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

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

1、代码如下：

		 
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />

ifxoxo.com..7% 
	
	2、 效果图如下：

	二、具体用法

	1、需要加载的js文件

	(1)jquery.js

(2)jquery.ui

(3)jquery.ui的css

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
	
	2、页面上的html代码

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

	3、js代码

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

	它有三个参数可以使用

				 参数
			
				 默认值
			
				 作用
			
				 value 
			
				 0
			
				 进度条显示的度数（0到100）
			
				 max
			
				 100
			
				 进度条的最大值
			
				 disable
			
				 false
			
				 是否隐藏
			
	(2)事件

		create： 加载progressbar的时候此事件将被触发
	
		change： 进度条有改变的时候此事件将被触发
	
		complete： 加载到100的时候此事件将被触发
	
	4、一个会动的进度条的实例

	（1）代码如下:

  jQuery UI Progressbar - Custom Label

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

Loading... 
		
	（2）截图

	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); 
	
------------>>转载于:http://blog.sina.com.cn/s/blog_a0db295e0100x7jj.html

                                                    来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/29119536/viewspace-1192694/
                            ，如需转载，请注明出处，否则将追究法律责任。

上一篇： SQL truncate 、delete与drop区别

下一篇： JQuery UI之进度条——Progressbar

请登录后发表评论登录

全部评论

ITPub博客

jquery ui进度条 progressbar

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

1、代码如下：

2、效果图如下：

二、具体用法

1、需要加载的js文件

2、页面上的html代码

3、js代码

(1)options

(2)事件

4、一个会动的进度条的实例

（1）代码如下:

（2）截图

5、其他

1、事件

2、方法

最新文章

参数	默认值	作用
value	0	进度条显示的度数（0到100）
max	100	进度条的最大值
disable	false	是否隐藏

ITPub博客

jquery ui进度条 progressbar

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

1、代码如下：

2、 效果图如下：

二、具体用法

1、需要加载的js文件

2、页面上的html代码

3、js代码

(1)options

(2)事件

4、一个会动的进度条的实例

（1）代码如下:

（2）截图

5、其他

1、事件

2、方法

最新文章

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

2、效果图如下：