JQuery UI——进度条

最新推荐文章于 2023-04-10 08:55:17 发布

wxaURmine

最新推荐文章于 2023-04-10 08:55:17 发布

阅读量788

点赞数

分类专栏： jQuery技术文章标签： script 进度条 ui

本文链接：https://blog.csdn.net/wxaURmine/article/details/46846519

版权

jQuery技术专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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>

wxaURmine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery UI——进度条

JQuery UI是功能非常强大的JQuery插件，小可在本专题将会逐一介绍JQuery UI的一些小技巧，首先下载JQuery UI，小可下的最新版本http://jqueryui.com/download/all/ 开篇先介绍进度条一.创建进度条<html><head> <title></title> <script src="E:/jQuery/jquery-1.11.3.
复制链接

扫一扫

专栏目录