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