第二百二十節，jQuery EasyUI，Slider(滑動條)組件

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 重寫默認值對象。