JQuery UI进度条—

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

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

将上面的div变成进度条：

$(function(){

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

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

});

</script>

一运行例子就明白

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

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

$(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)方法来设置当前值，这里还可以发现，不在后面加数值参数的话就是读取当前值。

再修改代码如下：

$(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>

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

四、可以实用的进度条

修改代码如下：

$(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);

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

最终代码如下：

$(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的更多相关文章

Android 自学之进度条ProgressBar
进度条(ProgressBar)也是UI界面中的一种非常使用的组件,通常用于向用户显示某个耗时完成的百分比.因此进度条可以动态的显示进度,因此避免长时间地执行某个耗时操作时,让用户感觉程序失去了响应, ...
WPF的进度条progressbar，运行时间elapse time和等待spinner的实现
今天用.NET 4.5中的TPL的特性做了个小例子,实现了WPF的进度条progressbar,运行时间elapse time和等待spinner. 先上图吧. 这个例子包含4个实现,分别是同步版 ...
Android零基础入门第51节：进度条ProgressBar
原文:Android零基础入门第51节:进度条ProgressBar 不知不觉这已经是第51期了,在前面50期我们学了Android开发中使用频率非常高的一些UI组件,当然这些组件还不足够完成所有AP ...
JQuery入门——进度条
越来越觉得常规javascript已经跟不上节奏了,打算学点进阶的,从JQuery学起. JQuery是一个Javascript库,可以从JQuery.com下载,放到本地,用 <script ...
android圆形进度条ProgressBar颜色设置
花样android Progressbar http://www.eoeandroid.com/thread-1081-1-1.html http://www.cnblogs.com/xirihanl ...
Android-SpinKit 进度条 (ProgressBar)
项目地址: https://github.com/ybq/Android-SpinKit 类别: 进度条 (ProgressBar) 打分: ★★★★★ 更新: 2016-03-28 11:17 大小 ...
进度条ProgressBar
在本节中,作者只写出了进度条的各种样式,包括圆形.条形,还有自定义的条形,我想如果能让条形进度条走满后再继续从零开始,于是我加入了一个条件语句.作者的代码中需要学习的是handler在主线程和子线程中 ...
基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
WPF 进度条ProgressBar
今天研究了一下wpf的进度条ProgressBar 1.传统ProgressBar WPF进度条ProgressBar 这个控件,如果直接写到循环里,会死掉,界面会卡死,不会有进度.需要把进度条放到单 ...

随机推荐

hdu 2546 饭卡（DP）
很久以前做过这道题,晚上睡不着,看见nyist加了一个DP的比赛,就进来打个酱油. 这道题的点睛之笔是将最大值记录下来,然后将其值改为0.之后就是普通的背包了. #include<stdio.h ...
如何彻底删除SVN中的文件和文件夹(附恢复方法)
在SVN中如果删除某个文件或文件夹也可以在历史记录中进行找回,有的时候需要彻底删除某些文件,即不希望通过历史记录进行恢复,需要在服务器上对SVN的数据进行重新整理这里假设SVN项目的目录为 /dat ...
Android 颜色渲染(九) PorterDuff及Xfermode详解
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色渲染(九) PorterDuff及Xfermode详解之前已经讲过了除ComposeShader之外Shader的全部子类 ...
SDL 实现透明悬浮窗
最近一直想用SDL实现弹幕功能,但是一直没法实现悬浮窗和透明背景功能. 在一个老外的博客上发现了思路:EthioProgrammer: Applying transparency using win3 ...
【转】 CoreGraphics QuartzCore CGContextTranslateCTM 用法
原文:http://blog.csdn.net/sqc3375177/article/details/25708447 CoreGraphics.h 一些常用旋转常量 #define M_E 2.71 ...
十三、C# 事件
1.多播委托 2.事件 3.自定义事件在上一章中,所有委托都只支持单一回调. 然而,一个委托变量可以引用一系列委托,在这一系列委托中,每个委托都顺序指向一个后续的委托, 从而形成了一个委托链,或 ...
corejava-chap01
<java是什么:>Programming language 程序语言Development environment 开发环境Application environment 应用环境Dep ...
挖潜无极限———数据挖掘技术与应用热点扫描[ZZ]
“我们把世界看成数学,并且把你也看成数学”——用这句话来说明数据挖掘技术的复合性和应用的广泛性似乎再好不过.如今,虽然一些行业在应用这一技术上仍然缺乏足够的主动,但一个不能阻挡的趋势是:已经有越来越多 ...
Visual Studio 2013环境下操作vc6/vc7/vc8等低版本平台项目【编译|生成|调试】
现代化的开发环境,微软一直在推出更新换代,我们所处的技术环境在日新月异的变化:不过在中国多数人们一边疲惫的追赶着时代的步伐,一边坚守着自己所获悉所掌握的那些紧吧吧的知本.对技术工具的掌握并非他们所想要 ...
《uname命令》－linux命令五分钟系列之五
本原创文章属于<Linux大棚>博客. 博客地址为http://roclinux.cn. 文章作者为roc 希望您能通过捐款的方式支持Linux大棚博客的运行和发展.请见“关于捐款” == ...

JQuery UI进度条——Progressbar

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

随机推荐

热门专题