小悠学习——快乐工作,悠闲生活.超全的IT开发手册!
HTML CSS JAVASCRIPT SQL PHP BOOTSTRAP JQUERY ANGULAR XML
×

jQuery UI 教程

jQuery UI 教程 jQuery UI 简介 jQuery UI 下载 jQuery UI 使用 jQuery UI 定制 jQuery UI 工作原理

jQuery UI 主题

jQuery UI 主题 jQuery UI ThemeRoller jQuery UI CSS 框架 API jQuery UI 设计主题

jQuery UI 部件库

jQuery UI 部件库 jQuery UI 扩展小部件 jQuery UI 小部件方法调用 jQuery UI 为什么使用部件库 jQuery UI 如何使用部件库

jQuery UI 参考手册

jQuery UI 1.10 API 文档 API 类别 - 特效(Effects) API 类别 - 特效核心(Effects Core) API 类别 - 交互(Interactions) API 类别 - 方法重载(Method Overrides) API 类别 - 方法(Methods) API 类别 - 选择器(Selectors) API 类别 - 主题(Theming) API 类别 - UI 核心(UI Core) API 类别 - 实用工具(Utilities) API 类别 - 小部件(Widgets)

jQuery UI 实例

jQuery UI 实例 拖动(Draggable) 放置(Droppable) 缩放(Resizable) 选择(Selectable) 排序(Sortable) 折叠面板(Accordion) 自动完成(Autocomplete) 按钮(Button) 日期选择器(Datepicker) 对话框(Dialog) 菜单(Menu) 进度条(Progressbar) 滑块(Slider) 旋转器(Spinner) 标签页(Tabs) 工具提示框(Tooltip) 特效(Effect) 显示(Show) 隐藏(Hide) 切换(Toggle) 添加 Class(Add Class) 移除 Class(Remove Class) 切换 Class(Toggle Class) 转换 Class(Switch Class) 颜色动画(Color Animation) 定位(Position) 部件库(Widget Factory)
 

jQuery UI 实例 - 进度条(Progressbar)


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

如需了解更多有关 progressbar 部件的细节,请查看 API 文档 进度条部件(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>