jQuery UI 實例 - 進度條（Progressbar） · W3School jQuery UI 教程

# jQuery UI 實例 - 進度條（Progressbar）顯示一個確定的或不確定的進程狀態。如需了解更多有關 progressbar 部件的細節，請查看 API 文檔 [進度條部件（Progressbar Widget）](api-progressbar.html)。 ## 默認功能默認的確定的進度條。 ``` <!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> ``` ## 自定義標簽自定義更新的標簽。 ``` <!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> ``` ## 不確定的值不確定的進度條，并可在確定和不確定的樣式之間切換。 ``` <!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> ```