jQuery UI 实例 - 进度条（Progressbar）

﹏ヽ暗。殇╰゛Y 2024-03-24 17:14 43阅读 0赞

显示一个确定的或不确定的进程状态。

如需了解更多有关 progressbar 部件的细节，请查看 API 文档 [进度条部件（Progressbar Widget）][Progressbar Widget]。

### 默认功能 ###

默认的确定的进度条。

>     <!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>

[Progressbar Widget]: https://www.runoob.com/jqueryui/api-progressbar.html