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

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

1、代码如下：

<script type
=
"text/javascript" src
=
""
>
</script>

<script type
=
"text/javascript" src
=
""
>
</script>

< href
=
"" 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、 效果图如下：

jQuery UI Progressbar –ifxoxo

二、具体用法

1、需要加载的js文件

(1)jquery.js

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

<script type
=
"text/javascript" src
=
""
>
</script>

<script type
=
"text/javascript" src
=
""
>
</script>

< href
=
"" 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
>

< rel
=
"stylesheet" href
=
""
/>

<script src
=
""
>
</script>

<script src
=
""
>
</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）截图

progressbar loading的截图–ifxoxo.com

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

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

三、其他相关联文章