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. web项目学习之spring-security

    转自<http://liukai.iteye.com/blog/982088> spring security功能点总结: 1. 登录控制 2. 权限控制(用户菜单的显示,功能点访问控制) ...

  2. XML认识

    XML概念 XML是eXtensible Markup Langguage 缩写,称之为可扩展标记语言.XML 被设计用来传输和存储数据.与HTML不同的是: HTML被设计用来显示数据,其焦点是数据 ...

  3. js判断input输入框为空时遇到的问题 弹窗后，光标没有定位到输入框，而是直接执行我的处理页面程序

    无论是会员注册还是提交订单,我们都要使用到form表单,此时我们在处理数据时,就要判断用户填写的信息.一次是直接通过js判断input输入框是否没有填信息,然后在后台处理文件中通过过滤字符串后再次判断 ...

  4. poj2406--Power Strings（KMP求最小循环节）

    Power Strings Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 33178   Accepted: 13792 D ...

  5. React Links

    Tutorial: https://hulufei.gitbooks.io/react-tutorial/content/jsx-in-depth.html

  6. [转] npm 模块安装机制简介

    npm 是 Node 的模块管理器,功能极其强大.它是 Node 获得成功的重要原因之一. 正因为有了npm,我们只要一行命令,就能安装别人写好的模块 . $ npm install 本文介绍 npm ...

  7. 本地代码git到github上

    本地代码git到github上 对于个程序员来说,不写自己的博客,没有自己的作品集没有Github就不算好的程序员!咳咳~ 开个玩笑.对于我个人来说,要做个程序员,就要有自己的作品集和技术博客(我说是 ...

  8. 关于mvc 分页的 这两个结合着用

    http://www.cnblogs.com/JackFeng/archive/2010/01/25/JackFeng.html http://www.webdiyer.com/mvcpager/de ...

  9. Fileupload控件导致500错误

    问题: 今天遇到一个问题,用Fileupload控件上传Excel文件,用一个button控件调用“FileUpload1.SaveAs”方法,点击按钮后出现服务器500错误.如下图: 解决方法: 在 ...

  10. Adding Validation to our Album Forms 添加类属性的一些验证特性

    Adding Validation to our Album Forms We’ll use the following Data Annotation attributes: Required – ...