如何从 Cycle2 哨兵中删除一个元素
How to remove an element from the Cycle2 sentinel
我需要从 jQuery Cycle2 幻灯片中删除一个元素,因为它会导致可访问性问题。这是幻灯片放映中的第一张幻灯片,包含 HTML 内容,因此它位于标记 div 中。
像这样的简单 jQuery 命令不起作用:
$( '.cycle-sentinel .cycle-search' ).destroy();
即使我尝试使用循环初始化回调(不可否认,我不确定我是否正确使用了它)。为了使页面符合 ADA,我需要能够删除该表单或对某些元素进行更改。这是相关幻灯片 html:
<div class="cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<img src="image.jpg" width="100%" alt="alt" style="visibility: hidden;">
<div class="cycle-search" style="visibility: hidden;">
<!-- role="search" -->
<form method="get" class="searchform" action="#" style="visibility: hidden;">
<label for="s2" class="screen-reader-only" style="visibility: hidden;">Enter search term</label>
<input type="text" value="" class="homeform" placeholder=" ? Find information, services, agencies and more..." style="visibility: hidden;">
<button type="submit" class="home-search-button" style="visibility: hidden;">
<i class="fa fa-search" style="visibility: hidden;"></i><span class="screen-reader-only" style="visibility: hidden;">Search</span>
</button>
</form>
</div>
<script>
jQuery(function($) {
$("#s2").focus(function() {
$(".cycle-slideshow").cycle("pause");
});
$("#s2").focusout(function() {
$(".cycle-slideshow").cycle("resume");
});
$( '#mySlideshow' ).on( 'cycle-initialized', function( event, optionHash ) {
$( '.cycle-sentinel .cycle-search' ).destroy();
});
});
</script>
顺便说一句,可访问性问题是前哨幻灯片在第一张幻灯片中重复出现,因此我有两个标签附加到同一个 ID(使用 "for")。
In latest version of cycle 2 plugin they removed id/name from sentinel content.
请检查这个 jsfiddle 示例。
我找到了一个解决方案,使用 cycle2 设置。 sentinel slide 用于设置幻灯片放映高度,但是您可以实现几个与之相关的选项。一种是使用幻灯片中的任意一张幻灯片作为哨兵。由于只有我的第一张幻灯片有表格,所以我使用了第二张幻灯片,因此:
data-cycle-auto-height=0
有关所有选项,请参阅:http://jquery.malsup.com/cycle2/api/#auto-height。根据可访问性的要求,该表单仅在 html 中出现一次。
我需要从 jQuery Cycle2 幻灯片中删除一个元素,因为它会导致可访问性问题。这是幻灯片放映中的第一张幻灯片,包含 HTML 内容,因此它位于标记 div 中。
像这样的简单 jQuery 命令不起作用:
$( '.cycle-sentinel .cycle-search' ).destroy();
即使我尝试使用循环初始化回调(不可否认,我不确定我是否正确使用了它)。为了使页面符合 ADA,我需要能够删除该表单或对某些元素进行更改。这是相关幻灯片 html:
<div class="cycle-slide cycle-sentinel" style="position: static; top: 0px; left: 0px; z-index: 100; opacity: 1; display: block; visibility: hidden;">
<img src="image.jpg" width="100%" alt="alt" style="visibility: hidden;">
<div class="cycle-search" style="visibility: hidden;">
<!-- role="search" -->
<form method="get" class="searchform" action="#" style="visibility: hidden;">
<label for="s2" class="screen-reader-only" style="visibility: hidden;">Enter search term</label>
<input type="text" value="" class="homeform" placeholder=" ? Find information, services, agencies and more..." style="visibility: hidden;">
<button type="submit" class="home-search-button" style="visibility: hidden;">
<i class="fa fa-search" style="visibility: hidden;"></i><span class="screen-reader-only" style="visibility: hidden;">Search</span>
</button>
</form>
</div>
<script>
jQuery(function($) {
$("#s2").focus(function() {
$(".cycle-slideshow").cycle("pause");
});
$("#s2").focusout(function() {
$(".cycle-slideshow").cycle("resume");
});
$( '#mySlideshow' ).on( 'cycle-initialized', function( event, optionHash ) {
$( '.cycle-sentinel .cycle-search' ).destroy();
});
});
</script>
顺便说一句,可访问性问题是前哨幻灯片在第一张幻灯片中重复出现,因此我有两个标签附加到同一个 ID(使用 "for")。
In latest version of cycle 2 plugin they removed id/name from sentinel content.
请检查这个 jsfiddle 示例。
我找到了一个解决方案,使用 cycle2 设置。 sentinel slide 用于设置幻灯片放映高度,但是您可以实现几个与之相关的选项。一种是使用幻灯片中的任意一张幻灯片作为哨兵。由于只有我的第一张幻灯片有表格,所以我使用了第二张幻灯片,因此:
data-cycle-auto-height=0
有关所有选项,请参阅:http://jquery.malsup.com/cycle2/api/#auto-height。根据可访问性的要求,该表单仅在 html 中出现一次。