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.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">Decreasebutton>
    <button id="incr">Increasebutton>
    <button id="mode">Indeterminatebutton>
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">Decreasebutton>
    <button id="incr">Increasebutton>
    <button id="mode">Indeterminatebutton>
    <span id="progWrapper">Progress:<span id="progVal">span>%span>
body>
html>

你可能感兴趣的:(jQuery技术)