注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

千年绿叶

黑夜给了我黑色的眼睛,我却用它来寻找光明......

 
 
 

日志

 
 

jquery ui 进度条 progressbar  

2013-06-19 09:25:14|  分类: JQuery UI |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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

  【代码】


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

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


  【效果图】

      jquery ui 进度条 progressbar - 千年绿叶 - 千年绿叶
 
  下面介绍一下具体用法:

一、需要加载的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)

 

  【代码示例】

   //一个会动的进度条

    jquery ui 进度条 progressbar - 千年绿叶 - 千年绿叶

 

  【效果】

   展示一个用了自定义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); 

  评论这张
 
阅读(994)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018