Progressbar 进度条组件

通过$.fn.progressbar.fn.defaults重写默认的defaults
进度条（progressbar）提供了一种显示长时间操作进度的反馈。进度可被更新以便让用户知道当前正在执行的操作。

不依赖其他组件

用法：
1、创建进度条Progressbar
1)进度条（Progressbar）组件可以从html标记创建或者编程创建。从标记创建更容易点，把‘easyui-progressbar’ class加到<div>标记
<div id = "p" class="easyui-progressbar" data-options="value:60" style="width:400px;" ></div>
2)使用javascript创建progressbar
<div id="p" style="width:400px;"></div>
$("#p").progressbar({
value : 60
});

获取或设置值
我们获取当前值并且给这个组件设置一个新值。
var value = $('#p').progressbar('getValue');
if(value < 100){
value += Math.floor(Math.random()*10);
$("#p").progressbar('setValue' , value);
}

2、属性
width string 设置进度条progressbar的宽度 auto
height number 组件的高度。该属性自版本1.3.2起可用 22
value number 百分比值 0
text string 显示在组件上的文本模板 {value}%

3、事件
onChange newValue，oldValue 当值改变时触发

4、方法
options none 返回选项（options）对象
resize width 调整组件尺寸
例子：
$("#p").progressbar('resize');//调整进度条为初始宽度
$("#p").progressbar('resize' , 350);//调整进度条为一个新的宽度
getValue none 返回当前的进度值
setValue value 设置一个新的进度值

 

<html>
<title>index</title>
<head>
<meta charset="UTF-8">
   
    <script type="text/javascript" src="easyui/jquery.min.js"></script>
    <script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
</head>
<body>
    <div style="width:400px;height:400px; margin-left:400px; margin-top:100px;">
        <!--
        <div class="easyui-progressbar" data-options="value:30" style="width:600px;"></div>
        -->
        <div id="box"></div>
    </div>
    
    
</body>
</html>


$(function(){
    
    $.fn.progressbar.defaults.value = 40;
    $("#box").progressbar({
        width : 600,
        height : 30,
        //value : 20,
        text : '${value}%',  // 默认是{value}%
        onChange : function(newValue , oldValue){
            console.log("new:" + newValue + " , old:" + oldValue);
        }
    });
    
    /*
    setTimeout(function(){
        $("#box").progressbar('setValue' , 70);
    },1000);
    */
    
    /*
    setInterval(function(){
        $("#box").progressbar('setValue' , $("#box").progressbar('getValue') + 5);
    },200);
    */
    
    //console.log($("#box").progressbar('options'));
    //$("#box").progressbar('resize' , 800);
    //$("#box").progressbar('resize'); //这个没看出什么效果
    
});