JQueryUI进度条——Progressbar
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 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);
}
⼤⽂件上传带进度条的代码
<%@ 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")[0].files[0],  //⽂件对象
fileNum = $("#file")[0].files[0].length,
name = file.name,        //⽂件名
javascript进度条size = file.size,        //总⼤⼩
succeed = 0;
var shardSize = 2 * 1024 * 1024,    //以2MB为⼀个分⽚
shardCount = il(size / shardSize);  //总⽚数
$('.progress .progress-bar').attr('data-transitiongoal', 0).progressbar({ display_text: 'fill' });
for (var i = 0; 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 + 1);        //当前是第⼏⽚
//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(2)) * 100;
updateProgress(percent);
if (succeed == shardCount) {
$("#upload").removeAttr("disabled");
}
}
});
}
}
function progress(percent, $element) {
var progressBarWidth = percent * $element.width() / 100;
$element.find('div').animate({ width: progressBarWidth }, 500).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" >等待</span>
<div class="progress">
<div id="progressBar"class="progress-bar" role="progressbar" data-transitiongoal=""></div>    </div>
</body>
</html>
View Code

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。