Slider( 滑动条) 组件

本节课重点了解 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 重写默认值对象。