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

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

posted @ 2012-10-25 13:48  葡萄城开发工具  阅读(4270)  评论(2)  编辑  收藏  举报