slider(滑动条) · easyUI

### Slider（滑动条）使用$.fn.slider.defaults重写默认值对象。滑动条允许用户从一个有限的范围内选择一个数值。当滑块控件沿着轨道移动的时候，将会显示一个提示来表示当前值。用户可以通过设置其属性自定义滑块。 ![](https://box.kancloud.cn/2016-07-19_578d9139d2850.png) #### #### 依赖关系 - [draggable](#) #### #### 使用案例当使用一个表单字段时，使用<input>标签创建一个滑动条。 1. **<input** class="easyui-slider" value="12" style="width:300px" 1. data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" **/>** <input class="easyui-slider" value="12" style="width:300px" data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" /> 也允许使用<div/>创建滚动条，但是'value'属性是无效的。 1. **<div** class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"**></div>** <div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div> Create slider programatically. 1. **<div** id="ss" style="height:200px"**></div>** <div id="ss" style="height:200px"></div> 1. $('#ss').slider({ 1. mode: 'v', 1. tipFormatter: function(value){ 1. return value + '%'; 1. } 1. }); $('#ss').slider({ mode: 'v', tipFormatter: function(value){ return value + '%'; } }); #### #### 属性 <table class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></th></tr><tr><td>width</td> <td>number</td> <td>滑动条宽度。</td> <td>auto</td></tr><tr><td>height</td> <td>number</td> <td>滑动条高度。</td> <td>auto</td></tr><tr><td>mode</td> <td>string</td> <td>声明滚动条类型。可用值有：'h'(水平)、'v'(垂直)。</td> <td>h</td></tr><tr><td>reversed</td> <td>boolean</td> <td>设置为true时，最小值和最大值将对调他们的位置。<strong><font color="#ff0000">（该属性自1.3.2版开始可用）</font></strong></td> <td>false</td></tr><tr><td>showTip</td> <td>boolean</td> <td>定义是否显示值信息提示。</td> <td>false</td></tr><tr><td>disabled</td> <td>boolean</td> <td>定义是否禁用滑动条。</td> <td>false</td></tr><tr><td>value</td> <td>number</td> <td>默认值。</td> <td>0</td></tr><tr><td>min</td> <td>number</td> <td>允许的最小值。</td> <td>0</td></tr><tr><td>max</td> <td>number</td> <td>允许的最大值。</td> <td>100</td></tr><tr><td>step</td> <td>number</td> <td>值增加或减少。</td> <td>1</td> </tr><tr><td>rule</td> <td>array</td> <td><span lang="zh-CN" id="result_box" class="short_text" c="4" a="undefined" closure_uid_677294271="114"><span closure_uid_677294271="230">显示标签</span><span closure_uid_677294271="231">旁边的</span><span closure_uid_677294271="232">滑块，</span></span>'|' ― 只显示一行。</td> <td>[]</td></tr><tr><td>tipFormatter</td> <td>function</td> <td>该函数用于格式化滑动条。返回的字符串值将显示提示。</td> <td/></tr><tr><td>converter</td> <td>function</td> <td> <p>该转换器函数允许用户决定如何将一个值转换为进度条位置或进度条位置值。<strong><font color="#ff0000">（该属性自1.3.6版开始可用）</font></strong></p> <p>代码示例：</p><pre>$('#ss').slider({ converter:{ toPosition:function(value, size){ var opts = $(this).slider('options'); return (value-opts.min)/(opts.max-opts.min)*size; }, toValue:function(pos, size){ var opts = $(this).slider('options'); return opts.min + (opts.max-opts.min)*(pos/size); } } });</pre></td> <td/></tr></tbody></table> #### #### 事件 | **事件名** | **事件参数** | **描述** | |-----|-----|-----| | onChange | newValue, oldValue | 在字段值更改的时候触发。 | | onSlideStart | value | 在开始拖拽滑动条的时候触发。 | | onSlideEnd | value | 在结束拖拽滑动条的时候触发。 | | onComplete | value | 在滑块值被用户改变的时候触发，无论是拖动还是点击滑块。**（该事件自1.3.4版开始可用）** | #### #### 方法 <table class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>options</td> <td>none</td> <td>返回滑动条属性。</td></tr><tr><td>destroy</td> <td>none</td> <td>销毁滑动条对象。</td></tr><tr><td>resize</td> <td>param</td> <td>设置滑动条大小。'param'参数包含一下属性：<br/>width：新滑动条宽度。<br/>height：新滑动条高度。</td></tr><tr><td>getValue</td> <td>none</td> <td>获取滑动条的值。</td></tr><tr><td>setValue</td> <td>value</td> <td>设置滑动条的值。</td></tr><tr><td>clear</td> <td>none</td> <td>清除滑动条的值。<strong><font color="#ff0000">（该方法自1.3.5版开始可用）</font></strong></td></tr><tr><td>reset</td> <td>none</td> <td>重置滑动条的值。<strong><font color="#ff0000">（该方法自1.3.5版开始可用）</font></strong></td></tr><tr><td>enable</td> <td>none</td> <td>启用滑动条控件。</td></tr><tr><td>disable</td> <td>none</td> <td>禁用滑动条控件。</td></tr></tbody></table>