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

最新推荐文章于 2023-07-30 16:00:31 发布

最新推荐文章于 2023-07-30 16:00:31 发布 · 213 阅读

文章标签：

本文详细介绍了如何使用 jQuery UI 实现不同类型的进度条，包括确定性进度条、显示百分比的进度条以及不确定性的过渡状态进度条，并提供了代码示例。

前面在介绍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>