jQuery 入门教程(37): jQuery UI Progressbar 示例

最新推荐文章于 2024-08-05 14:06:20 发布

iteye_19603

最新推荐文章于 2024-08-05 14:06:20 发布

阅读量130

点赞数

文章标签： ui javascript ViewUI

前面在介绍jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过Progessbar用法。
在使用进度条时，如果可以预知进度的大小，可以设置Max大小，如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。

基本用法

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#progressbar").progressbar({ 
 
value: 37 
 
}); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    18
 
<divid="progressbar"></div> 
 
    20
 
    21
 
</body> 
 
</html>

显示进度

可以在显示进度条的同时显示当前的百分比（实际上可以显示任意文字），这是通过两个嵌套的div元素来实现，本例使用一个定时器来模拟进度条的动态效果。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/trontastic/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<style> 
 
.progress-label { 
 
float: left; 
 
margin-left: 50%; 
 
margin-top: 5px; 
 
font-weight: bold; 
 
text-shadow: 1px 1px 0 #fff; 
 
} 
 
</style> 
 
<script> 
 
$(function () { 
 
var progressbar = $("#progressbar"), 
 
progressLabel = $(".progress-label"); 
 
    22
 
progressbar.progressbar({ 
 
value: false, 
 
change: function () { 
 
progressLabel.text(progressbar.progressbar("value") + "%"); 
 
}, 
 
complete: function () { 
 
progressLabel.text("Complete!"); 
 
} 
 
}); 
 
    32
 
function progress() { 
 
var val = progressbar.progressbar("value") || 0; 
 
    35
 
progressbar.progressbar("value", val + 1); 
 
    37
 
if (val <99) { 
 
setTimeout(progress, 100); 
 
} 
 
} 
 
    42
 
setTimeout(progress, 3000); 
 
}); 
 
</script> 
 
</head> 
 
<body> 
 
    48
 
<divid="progressbar"> 
 
<divclass="progress-label">Loading...</div> 
 
</div> 
 
    52
 
    53
 
</body> 
 
</html>

“中间过渡”状态条
可以通过设置 value=false 将进度条显示为“过渡”状态的进度条，此外也可以通过配置来修改进度条的颜色。

 
    1<!doctype html>
 
<htmllang="en"> 
 
<head> 
 
<metacharset="utf-8"/> 
 
<title>jQuery UI Demos</title> 
 
<linkrel="stylesheet"href="themes/base/jquery-ui.css"/> 
 
<scriptsrc="scripts/jquery-1.9.1.js"></script> 
 
<scriptsrc="scripts/jquery-ui-1.10.1.custom.js"></script> 
 
<script> 
 
$(function () { 
 
$("#progressbar").progressbar({ 
 
value: false 
 
}); 
 
$("button").on("click", function (event) { 
 
var target = $(event.target), 
 
progressbar = $("#progressbar"), 
 
progressbarValue 
 
= progressbar.find(".ui-progressbar-value"); 
 
    19
 
if (target.is("#numButton")) { 
 
progressbar.progressbar("option", { 
 
value: Math.floor(Math.random() * 100) 
 
}); 
 
} else if (target.is("#colorButton")) { 
 
progressbarValue.css({ 
 
"background": '#' 
 
+ Math.floor(Math.random() 
 
* 16777215).toString(16) 
 
}); 
 
} else if (target.is("#falseButton")) { 
 
progressbar.progressbar("option", 
 
"value", false); 
 
} 
 
}); 
 
}); 
 
</script> 
 
<style> 
 
#progressbar .ui-progressbar-value { 
 
background-color: #ccc; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
    44
 
<divid="progressbar"></div> 
 
<buttonid="numButton">Random Value - Determinate</button> 
 
<buttonid="falseButton">Indeterminate</button> 
 
<buttonid="colorButton">Random Color</button> 
 
    49
 
    50
 
</body> 
 
</html>

iteye_19603

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery 入门教程(37): jQuery UI Progressbar 示例

前面在介绍jQuery 入门教程(20): jQuery UI 基本工作过程时简要介绍过Progessbar用法。在使用进度条时，如果可以预知进度的大小，可以设置Max大小，如果对于一些无法预约时间比如下载文件可以使用“中间状态”的状态条。基本用法1&lt;!doctype html&gt;2&lt;htmllang="en"&gt;3&lt;head&gt;...
复制链接

扫一扫