閱讀(4.5k) 書簽贊(0) 我要糾錯(cuò)

jQuery EasyUI 表單插件 – Slider 滑塊

2018-09-11 12:40 更新

jQuery EasyUI 表單插件 - Slider 滑塊

通過 $.fn.slider.defaults 重寫默認(rèn)的 defaults。

滑塊（slider）允許用戶從一個(gè)有限的范圍內(nèi)選擇一個(gè)數(shù)值。當(dāng)沿著軌道移動(dòng)滑塊控件時(shí)，將顯示一個(gè)表示當(dāng)前值的提示框，用戶可通過設(shè)置它的屬性來自定義滑塊。

當(dāng)作為一個(gè)表單域使用時(shí)，從 <input> 標(biāo)記創(chuàng)建滑塊（slider）。

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

從 <div> 創(chuàng)建滑塊（slider）也是允許的，但是 'value' 屬性是無效的。

<div class="easyui-slider" data-options="min:10,max:90,step:10" style="width:300px"></div>

變成創(chuàng)建滑塊（slider）。

<div id="ss" style="height:200px"></div>

$('#ss').slider({
    mode: 'v',
    tipFormatter: function(value){
		return value + '%';
    }
});

名稱	類型	描述	默認(rèn)值
width	number	滑塊（slider）的寬度。	auto
height	number	滑塊（slider）的高度。	auto
mode	string	只是滑塊（slider）的類型?？赡艿闹担?h'(horizontal)、'v'(vertical)。	h
reversed	boolean	當(dāng)設(shè)置為 true 時(shí)，將會(huì)對(duì)調(diào)最小值和最大值的位置。該屬性自版本 1.3.2 起可用。	false
showTip	boolean	定義是否顯示值信息提示框。	false
disabled	boolean	定義是否禁用滑塊（slider）。	false
value	number	默認(rèn)值。	0
min	number	允許的最小值。	0
max	number	允許的最大值。	100
step	number	增加或減少的值。	1
rule	array	在滑塊旁邊顯示標(biāo)簽，'\|' — 值顯示線。	[]
tipFormatter	function	格式化滑塊值的函數(shù)。返回作為提示框顯示的字符串值。

名稱	參數(shù)	描述
onChange	newValue,oldValue	當(dāng)文本域的值改變時(shí)觸發(fā)。
onSlideStart	value	當(dāng)開始拖拽滑塊時(shí)觸發(fā)。
onSlideEnd	value	當(dāng)停止拖拽滑塊時(shí)觸發(fā)。
onComplete	value	當(dāng)滑塊的值被用戶改變時(shí)觸發(fā)，無論是通過拖拽滑塊改變還是通過點(diǎn)擊滑塊改變都會(huì)觸發(fā)。該事件自版本 1.3.4 起可用。

名稱	參數(shù)	描述
options	none	返回滑塊（slider）選項(xiàng)（options）。
destroy	none	銷毀滑塊（slider）對(duì)象。
resize	param	設(shè)置滑塊尺寸。'param' 參數(shù)包含下列屬性： width：新的滑塊寬度 height：新的滑塊高度
getValue	none	獲取滑塊（slider）的值。
setValue	value	設(shè)置滑塊（slider）的值。
clear	none	清除滑塊（slider）的值。該方法自版本 1.3.5 起可用。
reset	none	重置滑塊（slider）的值。該方法自版本 1.3.5 起可用。
enable	none	啟用滑塊（slider）組件。
disable	none	禁用滑塊（slider）組件。

以上內(nèi)容是否對(duì)您有幫助：

寫筆記

我要補(bǔ)充