1、先引入jquery和jquery-ui的js,例子如下：

<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />
<script src="Scripts/jquery-1.8.2.js"></script>
<script src="JqueryUI/jquery-ui.js"></script>

可以使用div来作为显示进度条的载体：

<div id="divProgressbar"></div>

将上面的div变成进度条：

<script type="text/javascript">

$(function(){

$("#divProgressbar").progressbar({value: 30});  //初始话进度条并设置初始值为30

alert("当前值是: " + $("#divProgressbar").progressbar("option","value"));  //读取进度条的当前值

});

</script>

一运行例子就明白

三、          要进度条动起来怎么办？

做个小实验，修改jquery代码如下：

<script type="text/javascript">

$(function(){

$("#divProgressbar").progressbar({value: 30});

alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

$("#divProgressbar").progressbar({value: 60});

alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

$("#divProgressbar").progressbar({value: 90});

alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

});

</script>

运行，看是什么结果，进度条没变化，每次弹出框的值都是30吧！为什么捏？因为.progressbar({value: 30})是用来初始化的上面已经在代码的注释里提到，在dialog那篇里也说到同一个控件是不允许被多次初始化的，所以我们必须用其它的方法来修改进度条的当前值，jQuery提供了.progressbar("option", "value", 60)方法来设置当前值，这里还可以发现，不在后面加数值参数的话就是读取当前值。

再修改代码如下：

<script type="text/javascript">

$(function(){

$("#divProgressbar").progressbar({value: 30});

alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

$("#divProgressbar").progressbar("option", "value", 60);

alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

$("#divProgressbar").progressbar("option", "value", 90);

alert("当前值是: " + $("#divProgressbar").progressbar("option", "value"));

});

</script>

嘿嘿——进度条动起来了，而且弹出框的值也变化了。

四、          可以实用的进度条

修改代码如下：

<script type="text/javascript">

$(function(){

updateProgressbarValue();   //调用函数

function updateProgressbarValue(){

$("#divProgressbar").progressbar({value: 0});   //初始化进度条，如果已经初始化则会跳过

var newValue = $("#divProgressbar").progressbar("option", "value") + 3; //读取进度条现有值并计算出新值

$("#divProgressbar").progressbar("option", "value", newValue);  //设置进度条新值

setTimeout(updateProgressbarValue, 500);    //使用setTimeout函数延迟调用updateProgressbarValue函数，延迟时间为500毫秒

}

});

</script>

这里最重要的是使用了setTimeout来延迟调用函数，并且这是一个自嵌套函数，如果没有终止它的话它将一直运行下去，这是不被允许的。

在setTimeout(updateProgressbarValue, 500);前加入下面的代码就知道了：

alert(newValue);

五、          在适当的地方终止这个傻头傻脑的程序

其实我们只需要在setTimeout(updateProgressbarValue, 500);前加一个判断就ok了：

if(newValue <= 100)setTimeout(updateProgressbarValue, 10);

这样我们就可以在进度条满了后终止这个傻瓜继续执行。

最终代码如下：

<script type="text/javascript">

$(function(){

updateProgressbarValue();

function updateProgressbarValue(){

$("#divProgressbar").progressbar({value: 0});

var newValue = $("#divProgressbar").progressbar("option", "value") + 10;

$("#divProgressbar").progressbar("option", "value", newValue);

alert(newValue);

if(newValue <= 100) setTimeout(updateProgressbarValue, 10);

}

});

</script>

大文件上传带进度条的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UploadTest2.aspx.cs" Inherits="Html5UploadTest.UploadTest2" %>

<html lang="zh-CN">

<head>

    <meta charset="utf-8">

    <title>HTML5大文件分片上传示例</title>

    <script src="Scripts/jquery-1.8.2.js"></script>

    <link href="bootstrap-progressbar/bootstrap-progressbar-3.3.4.css" rel="stylesheet" />

    <script src="bootstrap-progressbar/bootstrap-progressbar.js"></script>

    <%--<link href="JqueryUI/jquery-ui.css" rel="stylesheet" />

    <script src="JqueryUI/jquery-ui.js"></script>--%>

    <script>

        function uploadFile() {

            $("#upload").attr("disabled", "disabled");

            var file = $("#file")[].files[],  //文件对象

                fileNum = $("#file")[].files[].length,

                name = file.name,        //文件名

                size = file.size,        //总大小

                succeed = ;

            var shardSize =  *  * ,    //以2MB为一个分片

                shardCount = Math.ceil(size / shardSize);  //总片数

            $('.progress .progress-bar').attr('data-transitiongoal', ).progressbar({ display_text: 'fill' });

            for (var i = ; i < shardCount; ++i) {

                //计算每一片的起始与结束位置

                var start = i * shardSize,

                    end = Math.min(size, start + shardSize);

                //构造一个表单，FormData是HTML5新增的

                var form = new FormData();

                form.append("data", file.slice(start, end));  //slice方法用于切出文件的一部分

                form.append("name", name);

                form.append("total", shardCount);  //总片数

                form.append("index", i + );        //当前是第几片

                //Ajax提交

                $.ajax({

                    url: "Upload.ashx",

                    type: "POST",

                    data: form,

                    async: true,        //异步

                    processData: false,  //很重要，告诉jquery不要对form进行处理

                    contentType: false,  //很重要，指定为false才能形成正确的Content-Type

                    success: function () {

                        ++succeed;

                        $("#output").text(succeed + " / " + shardCount);

                        var percent = ((succeed / shardCount).toFixed()) * ;

                        updateProgress(percent);

                        if (succeed == shardCount) {

                            $("#upload").removeAttr("disabled");

                        }

                    }

                });

            }

        }

        function progress(percent, $element) {

            var progressBarWidth = percent * $element.width() / ;

            $element.find('div').animate({ width: progressBarWidth }, ).html(percent + "% ");

        }

        //$(document).ready(function () {

        //    $('.progress .progress-bar').progressbar({ display_text: 'fill' });

        //});

        function updateProgress(percentage) {

            $('.progress .progress-bar').attr('data-transitiongoal', percentage).progressbar({ display_text: 'fill' });

        }

    </script>

</head>

<body>

    <input type="file" id="file" />

    <button id="upload" onclick="uploadFile();">上传</button>

    <span id="output" style="font-size: 12px">等待</span>

    <div class="progress">

        <div id="progressBar" class="progress-bar" role="progressbar" data-transitiongoal=""></div>

    </div>

</body>

</html>

JQuery UI进度条——Progressbar的更多相关文章

  1. Android 自学之进度条ProgressBar

    进度条(ProgressBar)也是UI界面中的一种非常使用的组件,通常用于向用户显示某个耗时完成的百分比.因此进度条可以动态的显示进度,因此避免长时间地执行某个耗时操作时,让用户感觉程序失去了响应, ...

  2. WPF的进度条progressbar，运行时间elapse time和等待spinner的实现

    今天用.NET 4.5中的TPL的特性做了个小例子,实现了WPF的进度条progressbar,运行时间elapse time和等待spinner. 先上图吧.   这个例子包含4个实现,分别是同步版 ...

  3. Android零基础入门第51节：进度条ProgressBar

    原文:Android零基础入门第51节:进度条ProgressBar 不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有AP ...

  4. JQuery入门——进度条

    越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...

  5. android圆形进度条ProgressBar颜色设置

    花样android Progressbar http://www.eoeandroid.com/thread-1081-1-1.html http://www.cnblogs.com/xirihanl ...

  6. Android-SpinKit 进度条 (ProgressBar)

    项目地址: https://github.com/ybq/Android-SpinKit 类别: 进度条 (ProgressBar) 打分: ★★★★★ 更新: 2016-03-28 11:17 大小 ...

  7. 进度条ProgressBar

    在本节中,作者只写出了进度条的各种样式,包括圆形.条形,还有自定义的条形,我想如果能让条形进度条走满后再继续从零开始,于是我加入了一个条件语句.作者的代码中需要学习的是handler在主线程和子线程中 ...

  8. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  9. WPF 进度条ProgressBar

    今天研究了一下wpf的进度条ProgressBar 1.传统ProgressBar WPF进度条ProgressBar 这个控件,如果直接写到循环里,会死掉,界面会卡死,不会有进度.需要把进度条放到单 ...

随机推荐

  1. Java中的成员初始化顺序和内存分配过程

    Java中的成员初始化顺序和内存分配过程 原帖是这样描述的: http://java.dzone.com/articles/java-object-initialization?utm_source= ...

  2. SQL 存储过程 通过多个ID更新数据 分类： SQL Server 2014-12-08 16:08 299人阅读 评论(0) 收藏

    下面举个例子说明: 我想让一部分品牌的名称(即Brand_Name)后面加上1,Brand_ID是主键,sql语句很容易实现,但是存储过程如何写呢? 错误写法如下: //*************** ...

  3. SuperSocket使用demo

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using SuperSocket. ...

  4. Android ListView的背景和黑色边缘化的问题

    解决方法1:给listview加上android:scrollingCache=”false”属性 解决方法2:给listview加上android:cacheColorHint="#000 ...

  5. HDU2255 奔小康赚大钱【二分图最佳匹配】

    题目链接: http://acm.hdu.edu.cn/showproblem.php? pid=2255 题目大意: 村里要分房子. 有N家老百姓,刚好有N间房子.考虑到每家都要有房住,每家必须分配 ...

  6. 分享一个牛逼的PHP无限极分类生成树方法，巧用引用(转)

    你还在用浪费时间又浪费内存的递归遍历无限极分类吗,看了该篇文章,我觉得你应该换换了.这是我在OSChina上看到的一段非常精简的PHP无限极分类生成树方法,巧在引用,整理分享了. function g ...

  7. UITableView beginUpdate和endUpdate使用的前提

    转载地址:http://blog.csdn.net/vieri_ch/article/details/46893023 UITableView有两个方法,用于单元格动画变化的方法,beginUpdat ...

  8. 关于 Cocoa Pods 的使用

    前提:电脑上已经安装好CocoaPods. 创建Podfile: 1.进入到项目的目录中: $ cd 目录 2.使用终端命令行: $ vim Podfile 3.然后按i键,进入编辑模式 我现在使用的 ...

  9. JS 拼凑字符串

    和Java一样,JS中直接用"+"号拼凑字符串是很耗费资源的,所以在大量拼凑字符串的情景中,我们也需要一个类似于StringBuffer的工具, 下面利用Array.join()方 ...

  10. at91sam9x5 linux 4.1.0下使能蜂鸣器驱动

    测试环境:  CPU: AT91SAM9X35      Linux: Atmel提供的linux-at91-linux4sam_5.3 (Linux-4.1.0) 转载请注明: 凌云物网智科嵌入式实 ...