jQuery的可变宽度元素滑块

Question

是否有可能创建一个jQuery的滑块，其中的元素具有可变宽度（即不是所有的元素都有相同的宽度）？

如果是这样，我该怎么做？ Hannit

Answer 1

要设置jQuery滑块的宽度，只需使用CSS将其包装为div和样式即可。你也可以通过CSS引用子元素来设置它们的风格，但是这必须在jQuery渲染后使用jQuery完成。

例子：

<script type="text/javascript"> 
    $(document).ready(function(){ 
     //render the sliders 
     $(".oSlider").slider({ 
     value: 12, 
     min: 8, 
     max: 24, 
     step: 1 
     }); 
     //size each handle according to class 
     $(".narrow-handle .ui-slider-handle").css("width","10px"); 
     $(".wide-handle .ui-slider-handle").css("width","50px"); 
    }); 
</script> 
<style type="text/css"> 
    /* define a width for the sliders by styling the wrapping div */ 
    .oSliderContainer { width:100px; } 
    .oSliderContainer2 { width:200px; } 
</style> 

<div class="oSliderContainer"><div class="oSlider narrow-handle"></div></div> 
<div class="oSliderContainer2"><div class="oSlider wide-handle"></div></div> 

我希望回答您的问题，祝你好运！

Answer 2

你试过Lemmon Slider吗？

http://jquery.lemmonjuice.com/plugins/slider-variable-widths.php