JQuery UI——进度条

来源：互联网发布：matlab2016 mac破解版编辑：程序博客网时间：2024/06/05 18:24

JQuery UI是功能非常强大的JQuery插件，小可在本专题将会逐一介绍JQuery UI的一些小技巧，首先下载JQuery UI，小可下的最新版本http://jqueryui.com/download/all/
开篇先介绍进度条

一.创建进度条

<html><head>    <title></title>    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script></head><script type="text/javascript">    $(function(){        $("#progressDiv").progressbar({            value:21        });    });</script><body>    <div id="progressDiv"></div></body></html>

将会得到：
这里写图片描述

二.进度条方法

progressbar(“destory”)：恢复div初始状态
progressbar(“disable”)：禁用进度条
progressbar(“enable”)：启动进度条
progressbar(“option”)：设置多个选项
progressbar(“value”, value)：获取或设置进度条进度

<html><head>    <title></title>    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script></head><script type="text/javascript">    $(function(){        $("#progressDiv").progressbar({            value:21        });        $("button").click(function(e){            var divElem = $("#progressDiv");            if(this.id == "mode"){                divElem.progressbar("value",false);            }else{                var currentProgress = divElem.progressbar("value");                if(!currentProgress){                    divElem.progressbar("value",21);                }else{                    divElem.progressbar("value",this.id == "decr"?currentProgress-10 : currentProgress + 10)                }            }        });    });</script><body>    <div id="progressDiv"></div>    <button id="decr">Decrease</button>    <button id="incr">Increase</button>    <button id="mode">Indeterminate</button></body></html>

效果可以设置如下：
这里写图片描述

三.进度条事件

create：在进度条组件创建时完成
change：在进度条组件发生变化时完成
complete：在进度条组件到达100%时完成

<html><head>    <title></title>    <script src="E:/jQuery/jquery-1.11.3.js" type="text/javascript"></script>    <link rel="stylesheet" href="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.css" />    <script type="text/javascript" src="E:/jQuery/jquery UI/jquery-ui-1.11.4.custom/jquery-ui.js" ></script></head><script type="text/javascript">    $(function(){        $("button").button();        $("#progressDiv").progressbar({            value:21,            create:function(e){                $("#progVal").text($("#progressDiv").progressbar("value"));            },            complete:function(e){                $("#incr").button("disable")            },            change:function(e){                var currentValue = $("#progressDiv").progressbar("value");                if(!currentValue){                    $("#progWrapper").hide();                }else{                    if($(this).progressbar("value") < 100){                        $("#incr").button("enable")                    }                    $("#progVal").text(currentValue);                    $("#progWrapper").show();                }            }        });        #("button").click(function(e){            var divElem = $("#progressDiv");            if(this.id == "mode"){                divElem.progressbar("value",false);            }else{                var currentProgress = divElem.progressbar("value");                if(!currentProgress){                    divElem.progressbar("value",21);                }else{                    divElem.progressbar("value",this.id=="decr"?currentProgress-10:currentProgress+10)                }            }        });    });</script><body>    <div id="progressDiv"></div>    <button id="decr">Decrease</button>    <button id="incr">Increase</button>    <button id="mode">Indeterminate</button>    <span id="progWrapper">Progress:<span id="progVal"></span>%</span></body></html>

0 0