第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件

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';