jQuery滑块与可变宽度的元素 [英] jquery slider with variable width elements

问题描述

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

is it possible to create a jquery slider in which the elements have variable width (i.e. not all elements have the same width) ?

如果是，该怎么办? 汉尼特

If so, how do I do that ? Hannit

推荐答案

要设置jQuery滑块的宽度，只需将其包装在div中并使用CSS样式即可.您也可以通过CSS引用子元素来设置其样式，但这必须在渲染后使用jQuery完成.

To set the width of a jQuery slider just wrap it in a div and style using CSS. You can also reference the child elements through CSS to style those as well, but that has to be done using jQuery after they have been rendered.

示例:

<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>

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

I hope that answers your question, good luck!

这篇关于jQuery滑块与可变宽度的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！