JQuery Cycle: 1 цикл, несколько пейджеров - PullRequest
Новая
       27

JQuery Cycle: 1 цикл, несколько пейджеров

2 голосов
/ 08 сентября 2011

Долгое время читатель, первый постер.:)

Я использую плагин jQuery Cycle, который можно скачать здесь: http://jquery.malsup.com/cycle/

Я получил его нормально для почтовой части, но пришел запрос на пейджерконтролирует выше и ниже объекта, который циклически.

Кажется, что второй пейджер не срабатывает, либо с выделением ссылки на пейджер активной панели и нажатием на второй элемент управления пейджером просто добавляется "#" к 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");
        }
    });

Я мог бы, вероятно, попытаться просто захватить щелчки и подключиться к событиям цикла и заставить его таким образом, но это просто кажется немного странным, что это не работает.Я заметил, что есть одна опция, позволяющая кликам по ссылке пузыриться.Не был уверен, что это то, что мне нужно.Спасибо за вашу помощь.

1 Ответ

1 голос
/ 09 сентября 2011

вы всегда можете вернуться к ручному созданию пейджера и обработке кликов

пример можно найти здесь:

http://jquery.malsup.com/cycle/goto2.html

это создает 1 пейджер, ноВы можете создать много, как это во второй кнопкеКонтейнер 

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; 
        }); 
});
...