jquery插件系列之 - Slider滑块

最新推荐文章于 2022-02-15 22:25:22 发布

星火燎猿

最新推荐文章于 2022-02-15 22:25:22 发布

阅读量3.4w

点赞数 5

文章标签： jquery插件 function stylesheet ui integer string

本文链接：https://blog.csdn.net/fwj380891124/article/details/7690651

版权

ASP.NET 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

概述
滑动条是一种简单的设置一定范围内参数的插件。
官方示例地址：http://jqueryui.com/demos/slider/


·参数（参数名 : 参数类型 : 默认名称）
animate : Boolean : false
  设置是否在拖动滑块时执行动画效果。
  初始：$('.selector').slider({ animate: true });
  获取：var animate = $('.selector').slider('option', 'animate');
  设置：$('.selector').slider('option', 'animate', true);

max : Number : 100
  设置滑动条的最大值。
  初始：$('.selector').slider({ max: 7 });
  获取：var max = $('.selector').slider('option', 'max');
  设置：$('.selector').slider('option', 'max', 7);

min : Number : 0
  设置滑动条的最小值。
  初始：$('.selector').slider({ min: -7 });
  获取：var min = $('.selector').slider('option', 'min');
  设置：$('.selector').slider('option', 'min', -7);

orientation : String : 'auto'
  通常不需要设置此选项，程序会自动识别，如果未正确识别，则可以设置为：'horizontal' 或 'vertical'。
  初始：$('.selector').slider({ orientation: 'vertical' });
  获取：var orientation = $('.selector').slider('option', 'orientation');
  设置：$('.selector').slider('option', 'orientation', 'vertical');

range : Boolean, String : false
  如果设置为true，滑动条会自动创建两个滑块，一个最大、一个最小，用于设置一个范围内值。
  初始：$('.selector').slider({ range: 'min' });
  获取：var range = $('.selector').slider('option', 'range');
  设置：$('.selector').slider('option', 'range', 'min');

step : Number : 1
  在最大值和最小值中间设置滑块步进大小，此值必须能被(max-min)平分。
  初始：$('.selector').slider({ step: 5 });
  获取：var step = $('.selector').slider('option', 'step');
  设置：$('.selector').slider('option', 'step', 5);

value : Number : 0
  设置初始时滑块的值，如果有多个滑块，则设置第一个滑块。
  初始：$('.selector').slider({ value: 37 });
  获取：var value = $('.selector').slider('option', 'value');
  设置：$('.selector').slider('option', 'value', 37);

values : Array : null
  此属性用于设置滑块的初始值，并且只当range设置为true时有效。（至少两个滑块值）
  初始：$('.selector').slider({ values: [1,5,9] });
  获取：var values = $('.selector').slider('option', 'values');
  设置：$('.selector').slider('option', 'values', [1,5,9]);


·事件
start : slidestart
  当滑块开始滑动时，触发此事件。
  初始：$('.selector').slider({ start: function(event, ui) { ... } });
  绑定：$('.selector').bind('slidestart', function(event, ui) { ... });

slide : slide
  当滑块滑动时，触发此事件。使用ui.value获取当前值，或$(..).slider('value', index)获取其它滑块的值。
  初始：$('.selector').slider({ slide: function(event, ui) { ... } });
  绑定：$('.selector').bind('slide', function(event, ui) { ... });

change : slidechange
  当滑块滑动且值发生改变时，触发此事件。事件带两个参数event and ui，使用event.orginalEvent来判断是键盘或鼠标或其它触发，用ui.value获取当前值，用$(this).slider('values', index)获取其它滑块的值。
  初始：$('.selector').slider({ change: function(event, ui) { ... } });
  绑定：$('.selector').bind('slidechange', function(event, ui) { ... });

stop : slidestop
  当滑块停止滑动时，触发此事件。
  初始：$('.selector').slider({ stop: function(event, ui) { ... } });
  绑定：$('.selector').bind('slidestop', function(event, ui) { ... });


·属性
destroy
  销毁当前滑动条对象。
  用法：.slider( 'destroy' )

disable
  禁用当前滑动条。
  用法：.slider( 'disable' )

enable
  启用当前滑动条。
  用法：.slider( 'enable' )

option
  获取或设置当前滑动条的参数。
  用法：.slider( 'option' , optionName , [value] )

value
  获取或设置当前滑动条的值。
  用法：.slider( 'value' , [value] )

values
  获取或设置当前滑动条的所有滑块的值。
  用法：.slider( 'values' , index , [value] )

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>jQuery UI Slider - Snap to increments</title>
  <link type="text/css" href="http://jqueryui.com/themes/base/jquery.ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.mouse.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/ui/jquery.ui.slider.js"></script>
  <link type="text/css" href="http://jqueryui.com/demos/demos.css" rel="stylesheet" />
  <style type="text/css">
    #demo-frame > div.demo { padding: 10px !important; };
  </style>
  <script type="text/javascript">
  $(function() {
    $("#slider").slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function(event, ui) {
        $("#amount").val('$' + ui.value);
      }
    });
    $("#amount").val('$' + $("#slider").slider("value"));
  });
  </script>
</head>
<body>

<div class="demo">

<p>
<label for="amount">Donation amount ($50 increments):</label>
<input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold;" />
</p>

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

</div>
<!-- End demo -->

<div class="demo-description">

<p>Increment slider values with the <code>step</code> option set to an integer, commonly a dividend of the slider's maximum value.  The default increment is 1.</p>

</div><!-- End demo-description -->

</body>
</html>

星火燎猿

关注

5
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
2
评论
jquery插件系列之 - Slider滑块

概述滑动条是一种简单的设置一定范围内参数的插件。官方示例地址：http://jqueryui.com/demos/slider/ ·参数（参数名 : 参数类型 : 默认名称） animate : Boolean : false 设置是否在拖动滑块时执行动画效果。初始：$('.selector').slide
复制链接

扫一扫