JQuery Slider Probleme

Question

Ich versuche, JQ UIslider zu implementieren - aber ich laufe in Probleme, so hoffe ich, dass jemand helfen kann.

Ich versuche es ohne das JQUI-Bild für den "Slider" -Button zu tun. Ich kann so weit kommen, aber ich kann es nicht "richtig" arbeiten lassen. Mein Code ist wie folgt:

html:

<div id="scroll-pane" class="clearfix" > 
<div id="pagination" class="clearfix"></div> 
<div class="scroll-bar-wrap"> 
<div class="scroll-bar"></div></div> 
</div> 

css:

.scroll-bar { background-color:#00FFFF; width: 50px; height: 20px; } 
#pagination { width: 2440px; float: left; } 
#scroll-pane { overflow: auto; width: 99%; float:left; } 
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; background: #FFCC00; width: 400px; } 
.scroll-bar-wrap .ui-slider { border:0; height: 2em; margin: 0 auto; background: #FF0000; width: 20px;} 

und die JQ ist wie folgt: (BTW verstehe ich nichts davon!)

$(document).ready(function() { 

    var scrollPane = $("#scroll-pane"), 
    scrollContent = $("#pagination"); 
    var scrollbar = $(".scroll-bar").slider({ 
     slide: function(event, ui) { 
      if (scrollContent.width() > scrollPane.width()) { 
       scrollContent.css("margin-left", Math.round(
        ui.value/100 * (scrollPane.width() - scrollContent.width()) 
       ) + "px"); 
      } else { 
       scrollContent.css("margin-left", 0); 
      } 
     } 
    }); 

    //append icon to handle 
    var handleHelper = scrollbar.find(".ui-slider-handle") 
    .mousedown(function() { 
     scrollbar.width(handleHelper.width()); 
    }) 
    .mouseup(function() { 
     scrollbar.width("100%"); 
    }) 
    .append("<span class='ui-icon ui-icon-grip-dotted-vertical'></span>") 
    .wrap("<div class='ui-handle-helper-parent'></div>").parent(); 

    //change overflow to hidden now that slider handles the scrolling 
    scrollPane.css("overflow", "hidden"); 

    //size scrollbar and handle proportionally to scroll distance 
    function sizeScrollbar() { 
     var remainder = scrollContent.width() - scrollPane.width(); 
     var proportion = remainder/scrollContent.width(); 
     var handleSize = scrollPane.width() - (proportion * scrollPane.width()); 
     scrollbar.find(".ui-slider-handle").css({ 
      width: handleSize, 
      "margin-left": -handleSize/2 
     }); 
     handleHelper.width("").width(scrollbar.width() - handleSize); 
    } 

    //reset slider value based on scroll content position 
    function resetValue() { 
     var remainder = scrollPane.width() - scrollContent.width(); 
     var leftVal = scrollContent.css("margin-left") === "auto" ? 0 : 
      parseInt(scrollContent.css("margin-left")); 
     var percentage = Math.round(leftVal/remainder * 100); 
     scrollbar.slider("value", percentage); 
    } 

    //if the slider is 100% and window gets larger, reveal content 
    function reflowContent() { 
      var showing = scrollContent.width() + parseInt(scrollContent.css("margin-left"), 10); 
      var gap = scrollPane.width() - showing; 
      if (gap > 0) { 
       scrollContent.css("margin-left", parseInt(scrollContent.css("margin-left"), 10) + gap); 
      } 
    } 

    //change handle position on window resize 
    $(window).resize(function() { 
     resetValue(); 
     sizeScrollbar(); 
     reflowContent(); 
    }); 
    //init scrollbar size 
    setTimeout(sizeScrollbar, 10);//safari wants a timeout 
}); 

Der Inhalt für #pagination wird "dynamisch" generiert. Das Problem, das ich habe, ist, dass .scroll-bar-wrap .ui-slider nicht gleiten (animieren). Nur "berühre es" verschiebt den Inhalt der Folie zu sehr und zu schnell und es ist sehr schwierig "zurück zu bekommen".

Alles, was ich brauche, ist eine "einfache Slider-Situation", in der #pagination nach links/rechts bewegt wird, um Seitenzahlen anzuzeigen/auszublenden, wenn sie erstellt werden. Irgendwas sagt mir, dass der JQUI-Code "übermäßig komplex" ist - ich könnte mich irren - aber bis jetzt hat das weit zu viel Zeit in Anspruch genommen, was eine einfache Sache sein sollte - OK, ich bin keine JQ/JS-Person. Das JQUI-Beispiel link text funktioniert gut und das ist der Code dafür. Ich will nur nicht die Hintergründe/Slider-Taste, wie sie es haben.

Answer 1

Wenn dies zu kompliziert ist, können Sie das slideTo Plugin verwenden: http://plugins.jquery.com/project/slideto

Wrap eine Spanne oder div um jede Seitennummer in Ihrem Paginierung div, um sicherzustellen, dass scrollTo machen können, um es zu bewegen.

<div id="pagination"> 
    <span class="pagenumber">1</span> 
    <span class="pagenumber">2</span> 
    <span class="pagenumber">3</span> 
</div> 

Sie können dann ein jQuery-Objekt erstellen, die die div # Paginierung mit einigen Scrollen Fähigkeiten erweitert, so dass Sie den Scroll-Zustand und tun dies etwas erinnern können, wie:

pageNumbers = $("#pagination").find("span.pagenumber"); 
... 
$("#pagination").scrollTo(pageNumbers.next()); 

Sie haben werden um ein bisschen jQuery-Wissen zu bekommen, damit das funktioniert! Wenn Sie gründlicher erklären können, was Sie erreichen möchten, kann ich Ihnen auf Ihrem Weg helfen.