progressbar

easyui的progressbar用来声明元素为进度条

<!DOCTYPE html>
<html>
<head>
<title>jQuery Easy UI</title>
<meta charset="UTF-8" />
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>
<script type="text/javascript" src="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/locale/easyui-lang-zh_CN.js" ></script>
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="C:/Users/秋萍/Desktop/easyui/jquery-easyui-1.5.1/themes/icon.css" />
<script type="text/javascript">
    $(function(){
        $.fn.progressbar.defaults.value=0;
        $("#bar").progressbar({
            width : "200px",//默认为 auto
            height : 30,
            value : 30,
            text : "{value}%",
            onChange : function(newValue,oldValue){
                console.log("当数值改变时 触发");
            }
        });
        console.log($("#bar").progressbar("options"));//获取属性对象
        $("#bar").progressbar("resize","390");//设置进度条额长度
        $("#bar1").progressbar("setValue","60");//设置进度值
        setInterval(function(){
            $("#bar").progressbar("setValue",
                $("#bar").progressbar("getValue")+5);//获取进度值
        },200);
    })
</script>
</head>
<body>
<div id="bar1" class="easyui-progressbar"
data-options="value:70" style="width: 200px"></div>
<div id="bar"></div>
</body>
</html>

 

 posted on 2017-03-01 21:09  夏末秋萍  阅读(162)  评论(0)  编辑  收藏  举报