JQuery Ui 实例 W3Cschool

来源：互联网发布：中国河北网络电视编辑：程序博客网时间：2024/05/23 18:33
<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery UI 进度条（Progressbar） - 自定义标签</title>  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>  <link rel="stylesheet" href="jqueryui/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, 5000);  });  </script></head><body> <div id="progressbar"><div class="progress-label">加载...</div></div>  </body></html>
阅读全文
0 0