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

本文已经同步至我的个人博客站点:
jquery ui(四)进度条 progressbar ( http://ifxoxo.com/jquery-ui-prodressbar.html )

二、具体用法

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 ) ;

三、其他jquery ui 文章

本文已经同步至我的个人博客站点:
jquery ui(四)进度条 progressbar ( http://ifxoxo.com/jquery-ui-prodressbar.html )

如果想查看其它jquery ui的文章,可以点击以下链接到个人博客查看

1、jquery ui(一)简介 ( http://ifxoxo.com/jquery-ui-1.html )
2、jquery ui(二)拖拽 draggable和droppable ( http://ifxoxo.com/jquery-ui-draggable.html )
3、jquery ui(三)弹出窗口 dialog ( http://ifxoxo.com/jquery-ui-dialog.html )
4、jquery ui(四)进度条 progressbar ( http://ifxoxo.com/jquery-ui-prodressbar.html )
5、jquery ui(五)日期选择器 datepicker ( http://ifxoxo.com/jquery-ui-datepicker.html )
6、jquery ui(六)拖动排序 sortable ( http://ifxoxo.com/jquery-ui-sortable.html )

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值