第一百九十八節，jQuery EasyUI，ProgressBar(進度條)元件

weixin_34391854發表於2017-03-29
jQueryUI元件

jQuery EasyUI，ProgressBar(進度條)元件

 

學習要點：

　　1.載入方式

　　2.屬性列表

　　3.事件列表

　　4.方法列表

 

本節課重點了解 EasyUI 中 ProgressBar(進度條)元件的使用方法，這個元件不依賴 於其他元件。

 

 

一．載入方式

//class 載入方式
<div class="easyui-progressbar"
　　data-options="value:60" style="width:400px;">
</div>

 

//JS 載入呼叫
$('#box').progressbar({
　　value : 60,
});

 

 

二．屬性列表

width  string 設定進度條寬度。預設為 auto。

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width:500,               //設定進度條寬度
        height:20                //設定進度條高度
    });
});

 

height  number 設定進度條高度。預設為 22。

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width:500,               //設定進度條寬度
        height:20                //設定進度條高度
    });
});

 

value  number 設定進度條值。預設為 0。，設定進度條值

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width:500,               //設定進度條寬度
        height:20,                //設定進度條高度
        value:50                //設定進度條值
    });
});

 

 

text  string 設定進度條百分比模版：預設{value}%，就是設定進度條的提示文字，預設是獲取進度條的值加上%號

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width:500,               //設定進度條寬度
        height:20,                //設定進度條高度
        value:50,                //設定進度條值
        text : '{value}%'       //設定進度條的提示文字，預設是獲取進度條的值加上%號
    });
});

 

 

三．事件列表

onChange  newValue,oldValue 在值更改的時候觸發，接收兩個引數，分別接收進度新值，和舊值

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width: 500,               //設定進度條寬度
        height: 20,                //設定進度條高度
        value: 50,                //設定進度條值
        text: '{value}%',       //設定進度條的提示文字，預設是獲取進度條的值加上%號
        onChange: function (newValue, oldValue) {           //在值更改的時候觸發
            alert('新:' + newValue + ',舊:' + oldValue);     //分別接收進度新值，和舊值
        }
    });
    setTimeout(function () {   //定時器1秒鐘
        $('#box').progressbar('setValue', 70);  //將進度改變為70%
    }, 1000);
});

動畫進度效果

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width: 500,               //設定進度條寬度
        height: 20,                //設定進度條高度
        value: 50,                //設定進度條值
        text: '{value}%'       //設定進度條的提示文字，預設是獲取進度條的值加上%號
    });
    setInterval(function () {  //定時器200毫秒，獲取當前進度值加5，迴圈設定成新值
        $('#box').progressbar('setValue',$('#box').progressbar('getValue') + 5);
    }, 200);
});

 

 

三．方法列表

options  none 返回屬性物件

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width: 500,               //設定進度條寬度
        height: 20,                //設定進度條高度
        value: 5,                //設定進度條值
        text: '{value}%'       //設定進度條的提示文字，預設是獲取進度條的值加上%號
    });
    alert($('#box').progressbar('options'));       //返回屬性物件
});

 

resize  width 元件大小

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width: 500,               //設定進度條寬度
        height: 20,                //設定進度條高度
        value: 5,                //設定進度條值
        text: '{value}%'       //設定進度條的提示文字，預設是獲取進度條的值加上%號
    });
    $('#box').progressbar('resize',800);       //設定元件大小
});

 

getValue  none 返回當前進度值

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width: 500,               //設定進度條寬度
        height: 20,                //設定進度條高度
        value: 5,                //設定進度條值
        text: '{value}%'       //設定進度條的提示文字，預設是獲取進度條的值加上%號
    });
    alert($('#box').progressbar('getValue'));       //返回當前進度值
});

 

setValue  value 設定一個新的進度值

/**
<div id="box"></div>
 **/

$(function () {
    $('#box').progressbar({
        width: 500,               //設定進度條寬度
        height: 20,                //設定進度條高度
        value: 5,                //設定進度條值
        text: '{value}%'       //設定進度條的提示文字，預設是獲取進度條的值加上%號
    });
    $('#box').progressbar('setValue',80);       //設定一個新的進度值
});

 

$.fn.progressbar.defaults 重寫預設值物件。

$.fn.progressbar.defaults.value = '60';

 

相關文章