Цикл jQuery: 1 цикл, несколько пейджеров
-
27-10-2019 - |
Вопрос
Долгое время читатель, первый раз плакат. :)
Я использую плагин jQuery Cycle, который можно загрузить здесь: http://jquery.malsup.com/cycle/
Я получил все, что работает нормально для части поста, но пришел запрос на то, чтобы управлять пейджером выше и под объектом, который циклирует.
Похоже, что второй пейджер не забирается, либо подчеркивая ссылку на пейджер Active Panels и нажав на второй элемент управления пейджером, просто добавляет «#» к URL -адресу в адресной строке.
Я видел этот пост: stackoverflow.com/questions/1663974/using-multiple-pagers-in-jquery-cycle-plugin
Какой вид имеет смысл, но не уверен, почему это будет отличаться от моего, конечный результат можно увидеть здесь: http://dev02.web.lumens.demandware.net/on/demandware.store/sites-lumens-site/default/search-show?cgid=brands Если вы прокручиваете до конца.
HTML выглядит примерно так:
<ul class="pager"></ul>
<div id="list-screens" class="list-screens">
<div class="list-view-row"><!-- content goes here-></div>
</div>
<ul class="pager"></ul>
Для JavaScript:
jQuery(document).ready(function() {
var markupBegin = '<li><a href="#">';
var markupEnd = "</a></li>";
var i = 0;
var pagerArray = ["A - E","F - J", "K - O","P - T","U - Z", "#"];
var detailPagerArray = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","${'#'}"];
jQuery("${'#'}list-screens").children().each(function(index, element) {
jQuery(".list-view .pager").append(markupBegin + pagerArray[i] + markupEnd);
//if(i <jQuery("${'#'}list-screens").children().length - 1 ) {
jQuery(".list-view .pager").append("<li class='divider'></li>");
//}
i++;
});
jQuery(".list-view .pager").append("<li><a href=\"#\">See All Brands</a>");
jQuery(".list-view .pager").append("<li class='clear'></li>");
// browse listview
jQuery("#list-screens").cycle({
fx: 'scrollLeft',
easing: 'linear',
timeout: 0,
speed: 750,
width:935,
height:500,
pager: ".list-view .pager",
pagerAnchorBuilder: function(idx, slide) {
// console.log(idx);
//for every amount its over 1 we have to add an extra to account for the divider li
if(idx == 0) { // shouldn't have to do anything
} else {
idx = idx + (idx);
}
return ".list-view .pager li:eq("+ idx +") a";
},
updateActivePagerLink : function(pager, currSlideIndex) {
if(currSlideIndex != 0) {
currSlideIndex = currSlideIndex + currSlideIndex;
}
jQuery(pager).find("li").removeClass("activeSlide").filter('li:eq('+currSlideIndex+')').addClass("activeSlide");
}
});
Я, вероятно, мог бы попытаться просто запечатлеть клики и зацепить события цикла и заставить его таким образом, но это кажется немного странным, что это не работает. Я заметил, что есть один вариант, чтобы позволить ссылке клики для пузырьков. Не совсем уверен, это то, что мне было нужно. Спасибо за вашу помощь.
Решение
Вы всегда можете вернуться к созданию ручного пейджера и нажимать на обработку
Пример можно найти здесь:
http://jquery.malsup.com/cycle/goto2.html
Это создает 1 пейджер, но вы можете создать много, как и во втором ButtonContainer,
var bc = $('#buttonContainer');
var $container = $('#container').cycle({
fx: 'scrollHorz',
speed: 300,
timeout: 0
});
$container.children().each(function(i) {
// create input
$('<input type="button" value="'+(i+1)+'" />')
// append it to button container
.appendTo(bc)
// bind click handler
.click(function() {
// cycle to the corresponding slide
$container.cycle(i);
return false;
});
});