Question

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

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

Answer 1

要设置jQuery滑块的宽度，只需使用CSS将其包装在div和样式中。您也可以通过CSS引用子元素来设置它们的样式，但必须在渲染后使用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

具有可变宽度元素的jquery滑块

2 个答案: