jQuery EasyUI，Slider(滑動條)組件

?

學習要點：

　　1.加載方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

?

本節課重點了解 EasyUI 中 Slider(滑動條)組件的使用方法，這個組件依賴于 Draggable(拖動)組件。

?

?

一．加載方式

class 加載方式

<input class="easyui-slider" value="12" style="width:300px" data-options="showTip:true,rule:[0,'|',25,'|',50,'|',75,'|',100]" />

slider()將一個輸入框執行滑動條方法

JS 加載調用

$(function () {$('#box').slider({width: 300,value: 12,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],});
});

?

?

二．屬性列表

width ? number 滑動條寬度。默認值 auto。

$(function () {$('#box').slider({width: 300,height: 50,mode:'v'});
});

?

height ? number 滑動條高度。默認值 auto。

$(function () {$('#box').slider({width: 300,height: 50,mode:'v'});
});

?

mode ? string 聲明滾動條類型。可用值有：'h'(水平)、'v'(垂直)。默認值'h'。

$(function () {$('#box').slider({width: 300,height: 50,mode:'v'});
});

?

reversed ? boolean 設置為 true 時，最小值和最大值將對調他們的位置。默認值 false。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],reversed:true});
});

?

showTip ? boolean 定義是否顯示值信息提示。默認值 false。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true});
});

?

disabled ? boolean 定義是否禁用滑動條。默認值 false。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,disabled:true});
});

?

value ? number 默認值。默認值0。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,value:10});
});

?

min ? number 允許的最小值。默認值0。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,min:10,     //允許的最小值max:90,     //允許的最大值
    });
});

?

max ? number 允許的最大值。默認值100。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,min:10,     //允許的最小值max:90,     //允許的最大值
    });
});

?

step ? number 增加或減少值。默認值1。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,step:10,     //增加或減少值。默認值1。
    });
});

?

rule ? array顯示標簽旁邊的滑塊，'|' — 只顯示一行。默認值[]。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});
});

?

tipFormatter ? function 該函數用于格式化滑動條。返回的字符串值將顯示提示。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,tipFormatter:function (value) {return value + '%';}});
});

?

?

三．事件列表

onChange ? newValue, oldValue 在字段值更改的時候觸發。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,onChange:function (newValue, oldValue) {alert('接收更改后的值'+newValue);alert('接收更改前的值'+oldValue);}});
});

?

onSlideStart ? value 在開始拖拽滑動條的時候觸發。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,onSlideStart:function (value) {alert(value);}});
});

?

onSlideEnd ? value 在結束拖拽滑動條的時候觸發。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,onSlideEnd:function (value) {alert(value);}});
});

?

?

四．方法列表

options ? none 返回滑動條屬性。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});alert($('#box').slider('options'));
});

?

destroy ? none 銷毀滑動條對象。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});$('#box').slider('destroy');
});

?

resize ? param設置滑動條大小。'param'參數包含一下屬性：width：新滑動條寬度。height：新滑動條高度。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});$('#box').slider('resize',{width:500,height:20});
});

?

getValue ? none 獲取滑動條的值。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});alert($('#box').slider('getValue'));
});

?

setValue ? value 設置滑動條的值。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});$('#box').slider('setValue',90);
});

?

clear ? none 清除滑動條的值。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});$('#box').slider('clear');
});

?

reset ? none 重置滑動條的值。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});$('#box').slider('reset');
});

?

enable ? none 啟用滑動條控件。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});$('#box').slider('enable');
});

?

disable ? none 禁用滑動條控件。

$(function () {$('#box').slider({width: 300,rule: [0, '|', 25, '|', 50, '|', 75, '|', 100],showTip:true,});$('#box').slider('disable');
});

?

?

使用$.fn.slider.defaults 重寫默認值對象。

轉載于:https://www.cnblogs.com/adc8868/p/6674453.html

總結

以上是生活随笔為你收集整理的第二百二十节，jQuery EasyUI，Slider(滑动条)组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。