夏日博客

A-A+

jquery Bootstrap组件实现进度条示例代码

2016年01月12日 前端设计 暂无评论 阅读 7 views 次

jQuery UI Bootstrap 是一款 基于Bootstrap样式的 jQuery UI 控件了，我们下面一起来看看这插件实现的进度条效果，具体例子如下。

.progress——指定div包裹进度条组件；

.progress-bar——设置div为进度条样式；

.progress-bar-info、.progress-bar-warning、.progress-bar-success、.progress-bar-danger——设置进度条的情境效果；

.pregress-bar-striped——设置进度条具有条纹效果；

.active——可设置进度条的条纹处于动画状态；

属性aria-valuemin——设置进度条的最小值；

属性aria-valuemax——设置进度条的最大值；

属性aria-valuenow——设置进度条的当前值；

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">  
  6.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  7.     <title>www.111cn.net主创</title>  
  8.     <link rel="stylesheet" href="bootstrap.min.css" type="text/css">  
  9.    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>  
  10.     <script src="bootstrap.min.js"></script>  
  11.     <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->  
  12.     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->  
  13.     <!--[if lt IE 9]>  
  14.     <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>  
  15.     <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>  
  16.     <![endif]-->  
  17.     <style>  
  18.     </style>  
  19. </head>  
  20. <body>  
  21.     <div>  
  22.         <h4>进度条示例</h4>  
  23.         <div>  
  24.             <div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width:50%">  
  25.                 <span>50%</span>  
  26.             </div>  
  27.         </div>  
  28.         <div>  
  29.             <div role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width:2%">  
  30.                 2%  
  31.             </div>  
  32.         </div>  
  33.         <div><script type="text/javascript">  
  34.                  /*uxsou文章下面*/  
  35.                  var cpro_id = "u2065123";  
  36. </script>  
  37. <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript"></script>  
  38.         </div>  
  39.         <div>  
  40.             <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:60%">  
  41.                 60%  
  42.             </div>  
  43.         </div>  
  44.         <div>  
  45.             <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">  
  46.                 40%  
  47.             </div>  
  48.         </div>  
  49.         <div>  
  50.             <div class="progress-bar progress-bar-success" role="progressbar"  aria-valuemin="0" aria-valuemax="100" style="width:40%">  
  51.                 <span>40%</span>  
  52.             </div>  
  53.             <div class="progress-bar progress-bar-striped" role="progressbar"  aria-valuemin="0" aria-valuemax="100" style="width:40%">  
  54.                 <span>40%</span>  
  55.             </div>  
  56.         </div>  
  57.     </div>  
  58. </body>  
  59. </html>  
标签：

给我留言