不得不爱开源 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编辑  收藏  举报