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 �Cifxoxo

二、具体用法

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的截图�Cifxoxo.com

进度条增加value的效果图

进度条增加value的截图�Cifxoxo.com

progressbar 完成的效果图

progressbar 完成的截图�Cifxoxo.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


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