本节课重点了解 EasyUI 中 Slider(滑动条)组件的使用方法，这个组件依赖于
Draggable(拖动)组件。
一． 加载方式
//class 加载方式
<input class="easyui-slider" value="12" style="width:300px"
data-options="showTip:true,rule:[0,\'|\',25,\'|\',50,\'|\',75,\'|\',100]" />
//JS 加载调用
$(\'#box\').slider({
width : 300,
value : 12,
rule : [0,\'|\',25,\'|\',50,\'|\',75,\'|\',100],
});
二． 属性列表
//属性设置
$(\'#box\').slider({
width : 300,
value : 12,
mode : \'h\',
reversed : false,
showTip : true,
disabled : false,
min : 10,
max : 90,
step : 10,
tipFormatter : function (value) {
return value + \'%\';
},
rule : [0,\'|\',25,\'|\',50,\'|\',75,\'|\',100],
});
三． 事件
//事件列表
$(\'#box\').slider({
rule : [0,\'|\',25,\'|\',50,\'|\',75,\'|\',100],
onChange : function (newValue, oldValue) {
$(\'#text\').css(\'font-size\', newValue);
},
onSlideStart : function (value) {
console.log(value);
},
onSlideEnd : function (value) {
console.log(value);
},
});
四． 方法 列表
//返回滑动条属性
console.log($(\'#box\').slider(\'options\'));
//销毁滚动条对象
$(\'#box\').slider(\'destroy\');
//设置滚动条大小
$(\'#box\').slider(\'resize\', {
width : 500,
height : 30,
})
//获取滚动条值
console.log($(\'#box\').slider(\'getValue\'));
//设置滚动条值
$(\'#box\').slider(\'setValue\', 40);
//清理重置
$(\'#box\').slider(\'clear\');
$(\'#box\').slider(\'reset\');
//禁用启用
$(\'#box\').slider(\'enable\');
$(\'#box\').slider(\'disable\');
使用$.fn.slider.defaults 重写默认值对象。