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

Давно читал, первый раз постер. :)

Я использую подключаемый модуль 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");
        }
    });

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


jquery cycle jquery-cycle
person Matt Harpster    schedule 07.09.2011    source источник
comment
Вы пытаетесь изменить свой пейджер: .list-view .pager просто на .pager?   -  person idrumgood    schedule 08.09.2011
comment
он оформлен как таковой, потому что есть другие разделы, в которых используется модель стиля пейджера, поэтому я указываю .list-view .pager, просто .pager выберет другие разделы, такие как .detail-view .pager & .collection-view . пейджер. Похоже, что кишки цикла, чтобы не наступать на свои собственные пальцы, обрабатывают элементы управления, не используя стиль пейджера именно так, как он у вас есть, возможно, делая что-то вроде (относительно ссылки, по которой щелкнули) $(this).parents( [селектор пейджеров]). Кажется, лучше всего справиться с этим извне   -  person Matt Harpster    schedule 13.09.2011

Ответы (1)


arrow_upward
1
arrow_downward

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

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

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; 
        }); 
});
person Sander    schedule 09.09.2011
comment
Sander кажется лучшим решением, просто не полагайтесь на автоматическое создание ссылок на пейджер и просто обрабатывайте его снаружи - person Matt Harpster; 13.09.2011