jquery ui(四)进度条 progressbar

进度条可以向用户显示程序当前完成的百分比,让用户知道程序的进度,提高了用户体验。而jquery ui 则提供一个非常便捷的方法实现这一功能,就是progressbar.

一、 老规矩,先上一个简单的例子

1、代码如下:

<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js" > </script> 
<script type = "text/javascript" src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js" > </script>
< link href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel = "stylesheet"  />
<script type = "text/javascript" >
   $ ( function ( )  {
      $ (  "#progressbar1"  ) .progressbar ( {value :  7  } ) ;
     } ) ;

</script>
<div id = "progressbar1" >
<div  class = "progress-label" >ifxoxo .com .. 7 %</div >
</div >

2、 效果图如下:

Progressbar效果图

jQuery UI Progressbar –ifxoxo

二、具体用法

1、需要加载的js文件

(1)jquery.js
(2)jquery.ui
(3)jquery.ui的css

<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.9.1.js" > </script> 
<script type = "text/javascript" src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js" > </script>
< link href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel = "stylesheet"  />

2、页面上的html代码

需要一个用来装progressbar的空容器

<div id = "divProgerssbar" ></div >

3、js代码

初始化函数:$ ( .selecter ) .progressbar ( )

(1)options

它有三个参数可以使用

 参数  默认值  作用
 value  0  进度条显示的度数(0到100)
 max  100  进度条的最大值
 disable  false  是否隐藏

(2)事件

  • create: 加载progressbar的时候此事件将被触发
  • change: 进度条有改变的时候此事件将被触发
  • complete: 加载到100的时候此事件将被触发

4、一个会动的进度条的实例

(1)代码如下

<html lang = "en" >
<head >
   <meta charset = "utf-8"  />
   <title >jQuery UI Progressbar  - Custom Label </title >
   < link rel = "stylesheet" href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"  />
   <script src = "http://code.jquery.com/jquery-1.9.1.js" > </script>
   <script src = "http://code.jquery.com/ui/1.10.3/jquery-ui.js" > </script>
   <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 pro  = $ (  "#progressbar"  ) ;    //进度条div
     var proLabel  = $ (  ".progress-label"  ) ;  //进度条里面文字
 
    pro .progressbar ( {
      value :  false ,    //初始化的值为0
      change :  function ( )  {
       //当value值改变时,同时修改label的字
        proLabel .text ( pro .progressbar (  "value"  )  +  "%"  ) ;
       } ,
      complete :  function ( )  {
       //当进度条完成时,显示complate
        proLabel .text (  "Complete!"  ) ;
       }
     } ) ;

     //延迟500毫秒调用修改value的函数
    setTimeout ( addValue ,  500 ) ;   

     //动态修改value的函数
     function addValue ( ) {
        var pro  = $ (  "#progressbar"  ) ;
        var newValue  = pro .progressbar ( "value" )  + 1 ;
     
       pro .progressbar ( "value" ,newValue ) ;  //设置新值
        if ( newValue  >=  100 )  { return ; }     //超过100时,返回

       setTimeout ( addValue ,  500 ) ;  //延迟500毫秒递归调用自己
     }
   } ) ;
   </script>
</head >
<body >
 
<div id = "progressbar" ><div  class = "progress-label" >Loading ...</div ></div >

</body >
</html >

(2)截图

进度条loading的效果图

progressbar loading的截图–ifxoxo.com

进度条增加value的效果图

进度条增加value的截图–ifxoxo.com

progressbar 完成的效果图

progressbar 完成的截图–ifxoxo.com

5、其他

1、事件

(1)create 加载progressbar的时候此事件将被触发
(2)change 进度条有改变的时候此事件将被触发
(3)complete 加载到100的时候此事件将被触发

$ ( '.selector' ) .progressbar ( {
complete :  function (event , ui )  { alert ( 'has complete!!' ) ;  }
} ) ;

2、方法

(1) destory 销毁 .progressbar( “destroy” )
(2) disable 不可用 .progressbar( “disable” )
(3) enable 可用 .progressbar( “enable” )
(4) option 获取参数 .progressbar( “option”, optionName )
(5) option 设置参数 .progressbar( “otion” , optionName , [value] )
(6) widget 返回这个element .progressbar( “widget” )
(7) value 获取/设置value .progressbar( “value” , [value] )

//设置进度条新值
$ ( "#divProgressbar" ) .progressbar (  "value" ,  90 ) ;

三、其他相关联文章

1、jquery ui(一)简介
2、jquery ui(二)拖拽 draggable和droppable
3、jquery ui(三)弹出窗口 dialog
4、jquery ui(四)进度条 progressbar
5、jquery ui(五)日期选择器 datepicker

你可能感兴趣的:(JavaScript,jquery)