jquery ui進度條 progressbar

dawn009發表於2014-06-24
jQueryUI

進度條可以向使用者顯示程式當前完成的百分比，讓使用者知道程式的進度，提高了使用者體驗。而jquery ui 則提供一個非常便捷的方法實現這一功能，就是progressbar.

一、 老規矩，先上一個簡單的例子

1、程式碼如下：

 src="">
 

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


ifxoxo.com..7%

2、 效果圖如下：

二、具體用法

1、需要載入的js檔案

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

&nbsp;src="">
 

< href="" 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
  < rel="stylesheet" href="" />
  

  

  
  


 
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);
------------&gt>轉載於:http://blog.sina.com.cn/s/blog_a0db295e0100x7jj.html

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/29119536/viewspace-1192694/，如需轉載，請註明出處，否則將追究法律責任。

2
0
上一篇： SQL truncate 、delete與drop區別
下一篇： JQuery UI之進度條——Progressbar
jquery ui進度條 progressbar
請登入後發表評論 登入
全部評論
dawn009

註冊時間：2013-08-15

  • 博文量
    595
  • 訪問量
    4903966

最新文章

支援我們 作者招募 使用者協議 FAQ Contact Us

北京盛拓優訊資訊科技有限公司. 版權所有  京ICP備16024965號-8 北京市公安局海淀分局網監中心備案編號：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人舉報專區

廣播電視節目製作經營許可證(京) 字第1234號 中國網際網路協會會員

相關文章