将jQuery UI滑块附加到DIV的边（作为DIV的滚动条） [英] attach jQuery UI Slider to side of DIV (as DIV's scrollbar)

问题描述

有一个简单的方法来附加一个UI滑块到div的一侧作为它的滚动条？我不在乎它是技术上在侧面还是技术上的内部。我只需要UI滑块看起来像div的滚动条。

这将是一个假的滚动条，因为div的内容将是动态的，所以我不能去jScrollPane路由。内容是根据UI Slider中的值填充的。

我陷入了CSS地狱，想知道是否有几行解决方案。

非常感谢！

解决方案

http://jsfiddle.net/vooboo13/6TGXj/3/ p>

HTML：

 < div id =container 
< div id =box> 
< p> asdf< / p> 
 
< / div> 
< div id =vertical-slider>< / div> 
  

Javascript：

  $（function（）{
 $（＃vertical-slider）.slider（{
 orientation：垂直，
范围：min，
 min：0，
 max：100，
值：60，
幻灯片：function（event，ui）{ 
 $（#amount）.val（ui.value）; 
} 
}）; 
 $（#amount）.val（$ -vertical）.slider（value））; 
}）; 
  

CSS：

 code> #container {
 float：left; 
 border：1px solid＃000; 
} 
 
 #box {
 float：left; 
 width：200px; 
 height：200px; 
} 
 
＃vertical-slider {
 float：right; 
 height：200px; 
} 
  

Is there an easy way to attach a UI Slider to the side of a div to act as its' scrollbar? I don't care if it's technically on the side of the div or technically inside. I just need the UI Slider to look like the div's scrollbar.

It'll be a fake scrollbar because the div's content will be dynamic, so I can't go the jScrollPane route. The content is populated based upon the values in the UI Slider.

I'm stuck in CSS hell and was wondering if there's a few-line solution.

Many thanks in advance!

解决方案

Do you mean something like this? http://jsfiddle.net/vooboo13/6TGXj/3/

HTML:

<div id="container">
<div id="box">
    <p>asdf</p>

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

Javascript:

$(function() {
    $( "#vertical-slider" ).slider({
        orientation: "vertical",
        range: "min",
        min: 0,
        max: 100,
        value: 60,
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
        }
    });
    $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
});

CSS:

#container{
  float: left;         
  border: 1px solid #000;  
}

#box{
  float: left;
  width: 200px;
  height: 200px;    
}

#vertical-slider{
  float: right;
  height: 200px;    
}

这篇关于将jQuery UI滑块附加到DIV的边（作为DIV的滚动条）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！