Проблемы с слайдером JQuery

Question

Я пытаюсь реализовать JQ UIslider - но у меня все время возникают проблемы, поэтому я надеюсь, что кто-то может помочь.

Я пытаюсь сделать это без изображения JQUI для кнопки «слайдер». Я могу зайти так далеко, но я не могу заставить его работать «правильно». Мой код выглядит так:

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

и JQ, как это: (Кстати, я не понимаю этого!)

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

Содержимое для #pagination генерируется «динамически». Проблема у меня в том, что .scroll-bar-wrap .ui-slider не скользит (оживить). Просто «трогательно» перемещает слайд-контент слишком много и слишком быстро, и очень сложно «вернуть его».

Все, что мне нужно, это «простая ситуация с ползунком», где #pagination перемещается влево/вправо, чтобы показать/скрыть номера страниц по мере их создания. Что-то подсказывает мне, что код JQUI «слишком сложный» - возможно, я ошибаюсь - но до сих пор это заняло далеко не много времени на том, что должно быть простым - да, я не человек JQ/JS, но. пример JQUI link text работает отлично, и это код для него. Мне просто не нужна кнопка backgrounds/slider, поскольку она есть.

Answer 1

Если это слишком сложным, вы можете использовать плагин slideTo: http://plugins.jquery.com/project/slideto

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

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

Вы можете построить объект JQuery, который расширяет ДИВ # пагинации с некоторыми прокруткой способностями, так что вы можете вспомнить скроллинга состояние и сделать что-то вроде этого:

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

Вы будете иметь чтобы получить некоторые знания jQuery, чтобы это нормально работало! Если вы сможете более подробно объяснить, чего вы пытаетесь достичь, я могу помочь вам на вашем пути.