jQuery UI：设置滑动条滚动条的位置

Question

我使用的是jQuery UI的滑动条滚动条，我想在页面加载时将其定位。我使用的是sample code from example，但我之前从未使用过jQuery UI，所以我不知道需要更改哪些内容。滑块的位置应该低于某个值（例如20个值），并且该值应该是可见的。

如何做到这一点？

Answer 1

只需指定value当你初始化滑块：

HTML：

<div id="slider"></div> 

的Javascript：

$(function() 
{ 
    $("#slider").slider(
    { 
     min : 0, 
     max: 10, 
     value : 5 
    }); 
}); 

Fiddle

更新

JS：

$(function() 
{ 
    //scrollpane parts 
    var scrollPane = $(".scroll-pane"), 
    scrollContent = $(".scroll-content"); 

    //build slider 
    var initialValue = 75; // 0 - 99 

    var scrollbar = $(".scroll-bar").slider(
    { 
     value : initialValue, 
     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); 
      } 
     } 
    }); 

    // Update offset position based on initialValue 
    scrollContent.css("margin-left", Math.round(
     initialValue/100 * (scrollPane.width() - scrollContent.width()) 
    ) + "px"); 

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

CSS：

.scroll-pane { overflow: auto; width: 99%; float:left; } 
.scroll-content { width: 2440px; float: left; } 
.scroll-content-item { width: 100px; height: 100px; float: left; margin: 10px; font-size: 3em; line-height: 96px; text-align: center; } 
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; } 
.scroll-bar-wrap .ui-slider { background: none; border:0; height: 2em; margin: 0 auto; } 
.scroll-bar-wrap .ui-handle-helper-parent { position: relative; width: 100%; height: 100%; margin: 0 auto; } 
.scroll-bar-wrap .ui-slider-handle { top:.2em; height: 1.5em; } 
.scroll-bar-wrap .ui-slider-handle .ui-icon { margin: -8px auto 0; position: relative; top: 50%; } 

HTML：

<div class="scroll-pane ui-widget ui-widget-header ui-corner-all"> 
    <div class="scroll-content"> 
     <div class="scroll-content-item ui-widget-header">1</div> 
     <div class="scroll-content-item ui-widget-header">2</div> 
     <div class="scroll-content-item ui-widget-header">3</div> 
     <div class="scroll-content-item ui-widget-header">4</div> 
     <div class="scroll-content-item ui-widget-header">5</div> 
     <div class="scroll-content-item ui-widget-header">6</div> 
     <div class="scroll-content-item ui-widget-header">7</div> 
     <div class="scroll-content-item ui-widget-header">8</div> 
     <div class="scroll-content-item ui-widget-header">9</div> 
     <div class="scroll-content-item ui-widget-header">10</div> 
     <div class="scroll-content-item ui-widget-header">11</div> 
     <div class="scroll-content-item ui-widget-header">12</div> 
     <div class="scroll-content-item ui-widget-header">13</div> 
     <div class="scroll-content-item ui-widget-header">14</div> 
     <div class="scroll-content-item ui-widget-header">15</div> 
     <div class="scroll-content-item ui-widget-header">16</div> 
     <div class="scroll-content-item ui-widget-header">17</div> 
     <div class="scroll-content-item ui-widget-header">18</div> 
     <div class="scroll-content-item ui-widget-header">19</div> 
     <div class="scroll-content-item ui-widget-header">20</div> 
    </div> 
    <div class="scroll-bar-wrap ui-widget-content ui-corner-bottom"> 
     <div class="scroll-bar"></div> 
    </div> 
</div> 

http://jsfiddle.net/pFwFj/

Answer 2

只是把尽可能多的元素，你在你的HTML喜欢和调整w^CSS中滑块的宽度。

在这个例子中，你看到原来的滑盖20个项目： http://jsfiddle.net/fN2v5/1/

在这个例子中，我拿出了10个项目： http://jsfiddle.net/fN2v5/2/

我除以2前宽和10个项目得到了1220px 。

.scroll-content { width: 1220px; float: left; } 

而我在HTML中只使用了前20个元素中的10个。

​​