園子中的朋友大家好。在上一篇文章中我們，給大家介紹了 Wijmo Popup 插件的特性及使用方法。感謝園子中朋友的支持，朋友們的支持給我們寫這一系列文章提供了很大的動力。在這篇文章中我們將介紹進度條 的特性及使用方法。
有些朋友第一次看到本系列文章，所以給出本系列文章的鏈接：
- 不得不愛開源 Wijmo jQuery 插件集（1）-【開篇】(附演示和源碼)
- 不得不愛開源 Wijmo jQuery 插件集（2）-【准備工作】(附30種Theme演示和源碼)
- 不得不愛開源 Wijmo jQuery 插件集（3）-【Menu】(附頁面展示和源碼)
- 不得不愛開源 Wijmo jQuery 插件集（4）-【手風琴效果】(附頁面展示和源碼)
- 不得不愛開源 Wijmo jQuery 插件集（5）-【對話框】(附頁面展示和源碼)
- 不得不愛開源 Wijmo jQuery 插件集（6）-【Popup】(附頁面展示和源碼)
首先讓我們看看 Wijmo 進度條 給我們帶來了哪些驚喜？
用ComponentOne為ASP.NET Wijmo出品的 ProgressBar™控件，可以讓最終用戶了解一個操作的進度。你可以輕松地用動畫、樣式、標簽，等等來自定義指針的外觀。
建立你的第一個 Wijmo jQuery Wijpopup (感興趣的朋友可以下載【資源分享中的 Demo】):
HTML
<div id="progressbar" style="width:50px;height:300px"></div>
jQuery 腳本
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$("#progressbar").wijprogressbar({ value: 75, fillDirection: "north" });
});
</script>
效果預覽：
特性
水平或垂直方向
在默認情況下，進度條一般是水平的，但是你可以通過將fillDirection選項設置為向北或向南，來將它設置為垂直的。
動畫
它可以制作進度條填充效果的動畫效果，可以從超過三十種款式中進行選擇。你還可以為每一個動畫設置其速度和頻率。
自定義標簽
它可以自定義標簽的位置，使它出現在控件的右側、底部、左側、頂部，或者控件的中心。當進度條正在填充時，你還可以設置標簽使它像一個選取框一樣運行，並將標簽格式化。
CSS支持
你可以使用這一種級聯樣式表（CSS）的樣式來定義自定義皮膚。有了CSS支持，你可以使該進度條與你的組織標准相匹配。
主題
只需點擊一下智能標簽，就可以通過從六個溢價主題（北極，午夜時分，雅集，火箭，鈷和英鎊）中選擇一個來改變進度條控件的外觀。另外，還可以使用jQuery UI中的ThemeRoller來創建一個自定義的主題！
最后，和大家分享一些 Wijmo 資源：
1.源碼下載（包含以上特性）:Wijmo-ProcessBar.zip
2.更多信息請參考：Wijmo 中文網站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm
3.開源Wijmo jQuery 討論社區： http://gcdn.grapecity.com/index.aspx
wijprogressbar API 介紹：(點擊隱藏 API)
Options
下列為 wijprogressbar 選項：
animationDelay
- 以毫秒為單位獲取或設置 wijprogressbar 動畫效果的延遲時間。默認值為 "0".
- Type: Number
- Default: 0
-
Code example:
$('.selector’).wijprogressbar('option', 'animationDelay', 300);
animationOptions
- jQuery 動畫選項。
- Type: Options
- Default: {disabled: false, easing: null, duration: 500}
-
Code example:
$('.selector’).wijprogressbar('option','animationOptions',{animated:'progress',duration:600);
disabled
- 禁止或允許 wijprogressbar。在初始化 wijprogressbar 時設置。
- Type: Boolean
- Default: false
-
Code Example:
$("selector").wijprogressbar({disabled:true});
fillDirection
- 設置 wijprogressbar 的填充方向。可選項為"east","west","south" or "north".
- Type: String
- Default: 'east'
-
Code example:
1
$('.selector’).wijprogressbar('option', 'fillDirection', 'east')
indicatorImage
- 指示器的圖片路徑。
- Type: String
- Default:
-
Code example:
$('.selector’).wijprogressbar('option','indicatorImage','images/abc.png')
indicatorIncrement
- 指示器的增加單位。
- Type: Number
- Default: 1
-
Code example:
1
$('.selector’).wijprogressbar('option','indicatorIncrement',10);
labelAlign
- wijprogressbar 的 lable（即進度顯示數字）的對齊方式。可選項有"west","east","center","north","south", or "running".
- Type: String
- Default: 'center'
-
Code example:
$('.selector’).wijprogressbar('option', 'labelAlign', 'center')
labelFormatString
-
wijprogressbar label 格式化字符串。可用格式列表:
- {0} or {ProgressValue} 整形
- {1} or {PercentProgress} 百分比
- {2} or {RemainingProgress}顯示wijprogressbar 剩余進度
- {3} or {PercentageRemaining} 顯示wijprogressbar 剩余進度百分比
- {4} or {Min} wijprogressbar 最小值
- {5} or {Max} wijprogressbar 最大值
- Type: String
- Default: '{1}%'
-
Code example:
$('.selector’).wijprogressbar('option', 'labelFormatString','{0}%');
maxValue
-
wijprogressbar 的最大值(數值型)
- Type: Number
- Default: 100
-
Code example:
$('.selector’).wijprogressbar('option', 'value', 60);
minValue
-
wijprogressbar 的最小值(數值型)
- Type: Number
- Default: 0
-
Code example:
$('.selector’). wijprogressbar('option', 'minValue', 0)
toolTipFormatString
- 設置 wijprogressbar 的提示信息，設置格式請參考 labelFormatString.。
- Type: String
- Default: '{1}%'
-
Code example:
$('.selector’).wijprogressbar('option', 'toolTipFormatString','{1}%')
value
-
wijprogressbar 當前值。
- Type: Number
- Default: 0
-
Code Example:
$('.selector’).wijprogressbar('option','value',300);
Events
下列為 wijprogressbar 事件:
beforeProgressChanging(event,params)
- 在 wijprogressbar 運行之前觸發。參數為 object: {oldValue:xxx,newValue:xxx}。返回值為 "false"阻止進度條運行。
- Type: Function
- Default: null
-
Parameters:
-
data:
- data.oldValue: This is the old value of the progressbar.
- data.newValue: This is the new value of the progressbar.
-
data:
- Code example:
-
$("#selector").wijprogressbar({beforeProgressChanging:function(e, data){// 添加操作// return false 取消事件}})$("#selector").bind("wijprogressbarbeforeprogresschanging",function(e,data){})
progressChanged(event,params)
-
在 wijprogressbar 運行結束時觸發。參數為 object: {oldValue:xxx,newValue:xxx}。
- Type: Function
- Default: null
-
Parameters:
- e: This is the jquery event object.
-
data
- data.oldValue: 進度條運行之前值
- data.newValue: 進度條運行之后值
- Code example:
-
$("#selector").wijpaogressbar({progressChanged:function(e, data){// 添加操作}})$("#selector").bind("wijprogressbarprogresschanged",function(e,data){})
progressChanging(event,params)
- 在 wijprogressbar 運行時觸發。參數為 object: {oldValue:xxx,newValue:xxx}。返回值為 "false"阻止進度條運行。
-
Parameters:
-
data:
- data.oldValue: 進度條運行之前值
- data.newValue: 進度條運行之后值
-
data:
- Code example:
-
$("#selector").wijprogressbar({progressChanging:function(e,data){alert('oldValue'+ data.oldValue +',newValue:'+ data.newValue);// return false 取消事件}})$("#selector").bind("wijprogressbarprogresschanging",function(e,data){})
Methods
下列為 wijprogressbar 方法:
destroy()
- 使 wijprogressbar 回到初始化狀態。
-
Code Example:
$(" selector ").wijprogressbar("destroy");
disable()
- 使 wijprogressbar 失效。
-
Code Example:
1
$(" selector ").wijprogressbar("disable");
enable()
- 激活 wijprogressbar 。
-
Code Example:
$(" selector ").wijprogressbar("enable ");
option()
- 獲取 wijprogressbar 選項。
-
Code Example:
$(" selector ").wijprogressbar("option", optionName , [value]);
option()
- 一次性獲取 wijprogressbar 多個選項
-
Code Example:
$(" selector ").wijprogressbar("option", options);
value()
- 設置 wijprogressbar 當前值
-
Code Example:
$(" selector ").wijprogressbar("value");
widget()
- 返回 .wijmo-wijprogressbarelement 對象。
-
Code Example:
$(" selector ").wijprogressbar("widget");