不得不爱开源 Wijmo jQuery 插件集（7）-【进度条】(附页面展示和源码)

园子中的朋友大家好。在上一篇文章中我们，给大家介绍了 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.

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: 进度条运行之后值

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