jquery ui progressbar

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

   老规矩，先上一个简单的例子。

  【代码】

 <script>
 $(function() {
     $( "#progressbar" ).progressbar({value: 7 });
  });
 </script>

<div id="progressbar"></div>

  【效果图】

       

  下面介绍一下具体用法：

一、需要加载的js文件

    (1)jquery.js

    (2)jquery.ui.core.js

    (3)jquery.ui.widget.js

    (4)jquery.ui.progressbar.js

二、html代码

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

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

 

三、js代码

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

    【参数】

     

参数	默认	作用
value	0	进度条显示的度数（0到100）

 

  【代码示例】

   //一个会动的进度条

   

 

  【效果】

   展示一个用了自定义gif动画为进度条的背景，每500毫秒就前进3刻度的进度条。

   （1）进度条背景声明：

      <style>
         .ui-progressbar-value { background-image: url(images/pbar-ani.gif); }
      </style>

   （2）每500毫秒加载前进 3刻度的循环调用

     //使用setTimeout函数延迟调用updateProgressbarValue函数，延迟时间为500毫秒
     setTimeout(updateProgressbarValue, 500);  

四、其他

  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( "option" , optionName , [value] )

    (6)widget       返回这个element     .progressbar( "widget" )

    (7)value        获取/设置value      .progressbar( "value" , [value] )

 

   【示例】

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