Bar kemajuan
Menunjukkan status proses yang pasti atau tidak tentu.
Untuk butiran lanjut tentang widget bar kemajuan, sila lihat dokumentasi API Widget Bar Kemajuan.
Fungsi lalai
Bar kemajuan yang disahkan lalai.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 进度条（Progressbar） - 默认功能</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: 37
});
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Sesuaikan teg
Sesuaikan teg yang dikemas kini.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 进度条（Progressbar） - 自定义标签</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
.ui-progressbar {
position: relative;
}
.progress-label {
position: absolute;
left: 50%;
top: 4px;
font-weight: bold;
text-shadow: 1px 1px 0 #fff;
}
</style>
<script>
$(function() {
var progressbar = $( "#progressbar" ),
progressLabel = $( ".progress-label" );
progressbar.progressbar({
value: false,
change: function() {
progressLabel.text( progressbar.progressbar( "value" ) + "%" );
},
complete: function() {
progressLabel.text( "完成！" );
}
});
function progress() {
var val = progressbar.progressbar( "value" ) || 0;
progressbar.progressbar( "value", val + 1 );
if ( val < 99 ) {
setTimeout( progress, 100 );
}
}
setTimeout( progress, 3000 );
});
</script>
</head>
<body>
<div id="progressbar"><div class="progress-label">加载...</div></div>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Nilai tidak pasti
Bar kemajuan tidak menentu, dan boleh bertukar antara gaya yang ditentukan dan tidak pasti.
Instance
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI 进度条（Progressbar） - 不确定的值</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<script>
$(function() {
$( "#progressbar" ).progressbar({
value: false
});
$( "button" ).on( "click", function( event ) {
var target = $( event.target ),
progressbar = $( "#progressbar" ),
progressbarValue = progressbar.find( ".ui-progressbar-value" );
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>
<div id="progressbar"></div>
<button id="numButton">随机值 - 确定</button>
<button id="falseButton">不确定</button>
<button id="colorButton">随机颜色</button>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
