jQuery UI 范例 - 进度条（Progressbar）

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

默认功能

默认的确定的进度条。

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

程序猿的技术大观园：www.javathinker.net

[这个贴子最后由 flybird 在 2020-02-16 09:47:54 重新编辑]

Java精品书籍推荐