jQuery-Zyklus:1 Zyklus, mehrere Pager

Question

Langjähriger Leser, erstes Poster.:) :)

Ich verwende das jQuery Cycle-Plugin, das hier heruntergeladen werden kann: http://jquery.malsup.com/cycle/

Ich habe es für den Post-Teil gut hinbekommen, aber es ist eine Anfrage eingegangen, ob über und unter dem Objekt, das sich bewegt, Pager-Steuerelemente vorhanden sein sollen.

Es scheint, dass der zweite Pager nicht erkannt wird. Wenn Sie den Pager-Link des aktiven Panels markieren und auf die Steuerelemente des zweiten Pagers klicken, wird lediglich das „#“ zur URL in der Adressleiste hinzugefügt.

Ich habe diesen Beitrag gesehen:stackoverflow.com/questions/1663974/using-multiple-pagers-in-jquery-cycle-plugin

Was irgendwie Sinn macht, aber ich bin mir nicht sicher, warum es sich von meinem unterscheiden sollte. Das Endergebnis von mir kann hier gesehen werden: http://dev02.web.lumens.demandware.net/on/demandware.store/Sites-Lumens-Site/default/Search-Show?cgid=brands wenn Sie ganz nach unten scrollen.

Der HTML-Code sieht in etwa so aus:

    <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>

Für das 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");
        }
    });

Ich könnte wahrscheinlich versuchen, einfach die Klicks zu erfassen und mich in die Ereignisse von Cycle einzubinden und es auf diese Weise zu erzwingen, aber es kommt mir einfach ein wenig seltsam vor, dass das nicht funktioniert.Mir ist aufgefallen, dass es eine Option gibt, mit der die Linkklicks sprudeln.Ich war mir nicht wirklich sicher, ob ich das brauchte.Danke für deine Hilfe.

Answer 1

Sie können jederzeit auf die manuelle Pager-Erstellung und Klick-Verwaltung zurückgreifen

ein Beispiel könnte hier gefunden werden:

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

Dadurch wird 1 Pager erstellt, Sie können jedoch in einem zweiten ButtonContainer viele weitere erstellen

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