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 这个控件,如果直接写到循环里,会死掉,界面会卡死,不会有进度.需要把进度条放到单 ...

随机推荐

Excel.Application SaveAs 把excel转换为html
Excel.Application SaveAs 中的第二个参数的值: 可以直接用 10 进制的值代替左边的这些 xl 类型 . 例如:把excel转换为html的js: var oWB = oXL. ...
c#基础语言编程-装箱和拆箱
引言为什么有装箱和拆箱,两者起到什么作用?NET的所有类型都是由基类System.Object继承过来的,包括最常用的基础类型:int, byte, short,bool等等,就是说所有的事物都是对 ...
LeetCode——Linked List Cycle
Given a linked list, determine if it has a cycle in it. Follow up: Can you solve it without using ex ...
[Angular 2] 9. Replace ng-modle with #ref & events
Let's say you want to write a simple data bing app. when you type in a text box, somewhere in the ap ...
Android 仿网易新闻v3.5:上下滑动的引导页
版权声明:本文为博主原创文章,未经博主允许不得转载. 在很多天气或者新闻的应用中,我们都能看到一些字幕滚动的效果,最简单的实现为跑马灯效果,用系统提供的属性即可实现. 复杂一些的就需要自己去用自定义控 ...
max_connections 与 max_used_connections --ERROR 1040: Too many connections
mysql> show variables like 'max_connections'; +-----------------+-------+ | Variable_name | Value ...
一次优化web项目的经历记录（一）
一次优化web项目的经历记录这段时间以来的总结与反思前言:最近很长一段时间没有更新博客了,忙于一堆子项目的开发,严重拖慢了学习与思考的进程.开水倒满了需要提早放下杯子,晚了就会烫手,这段时间以来, ...
poj 3463 Sightseeing(次短路+条数统计)
/* 对dij的再一次理解每个点依旧永久标记只不过这里多搞一维 0 1 表示最短路还是次短路然后更新次数相当于原来的两倍更新的时候搞一下就好了 */ #include<iostream& ...
21、javascript 基础
Javascript Javascript 是一种嵌入到HTML文档的脚本语言,由浏览器解释和执行,无需编译. Javascript 是大小写敏感的,大写字母与小写字母不同. 使用“:”分号来分割每一 ...
Less 关于css hack的写法
由于工作需要,最近一直在弄css转写less,遇到最多的问题就是 hack的写法,一些IE的hack,less不支持编译: 常见的不支持的hack如下: IE的滤镜写法 \9\0 IE8部分支持 ...

JQuery UI进度条——Progressbar

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

随机推荐

热门专题