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

登录

在这篇文章中我们将介绍 ProcessBar 的特性及使用方法。
有些朋友第一次看到本系列文章，所以给出本系列文章的链接：

不得不爱开源 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.源码下载（包含以上特性）:

2.更多信息请参考：Wijmo 中文网站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm

wijprogressbar API 介绍：(点击隐藏 API)
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:
$('.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:

$('.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");

		自动登录	找回密码
密码			立即注册

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

本帖子中包含更多资源

0 个回复

活字格认证

微信认证勋章

元老葡萄