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

 园子中的朋友大家好。在上一篇文章中我们，给大家介绍了 Wijmo Dialog -对话框插件的特性及使用方法。感谢园子中朋友的支持，朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 wijpopup 的特性及使用方法。 wijpopup 即为 jQuery 中的弹出插件。

有些朋友第一次看到本系列文章，所以给出本系列文章的链接：

• 不得不爱开源 Wijmo jQuery 插件集（1）-【开篇】(附演示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（2）-【准备工作】(附30种Theme演示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（3）-【Menu】(附页面展示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（4）-【手风琴效果】(附页面展示和源码)
• 不得不爱开源 Wijmo jQuery 插件集（5）-【对话框】(附页面展示和源码)

首先让我们看看 Wijmo Popup 给我们带来了哪些惊喜？

wijpopup 用于灵活的展示或隐藏页面元素。wijpopup 可以使目标对象(例如 DIV) 弹出或隐藏在特定位置。目标元素被放置在所有元素的前方。并且会自动在目标元素下方创建透明的FRAME。还可以定制显示和隐藏 wijpopup 的动画效果。

点击查看效果预览

建立你的第一个 Wijmo jQuery Wijpopup (感兴趣的朋友可以下载【资源分享中的 Demo】):

点击查看效果预览

HTML

<div style="width:xxx;height:xxx">content goes here</div>

jQuery 脚本

$(".selector").wijpopup({ showEffect: 'blind' });

 

感谢大家阅读本文章，在下一篇文章中我们将介绍。Wijmo jQuery Progressbar-进度条 的使用方法。

最后，和大家分享一些资源吧：

1.源码下载（包含以上特性）:Wijmo-Accordion.zip 

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

3.开源Wijmo jQuery 讨论社区： http://gcdn.grapecity.com/index.aspx

点击查看 API

Options

autoHide

设置当元素失去焦点时元素是否自动隐藏。

Type: Boolean

Default: false

Code Example:

$(".selector").wijpopup({ autoHide: true });

ensureOutermost

设置 wijpopup 的父节点是否在最前。

Type: Boolean

Default: false

Code sample:

$(".selector").wijpopup({ ensureOutermost: true });

hideDuration

设置 wijpopup 隐藏过程的持续时间。

Type: Int

Default: 100

Code Example:

$(".selector").wijpopup({ hideDuration: 200 });

hideEffect

设置隐藏 wijpopup 动画特效。
主义: 可使用的效果有 'blind', 'clip', 'drop', 'fade', 'fold', 'slide', 和 'pulsate'。

Type: String

Default: ‘hide’

Code Example:

$(".selector").wijpopup({ hideEffect: 'blind' });

hideOptions

设置 object/hash 隐藏时的 其他选项，弹出方向等。

Type: Hash

Default: {}

Code Example:

$( ".selector" ).wijpopup({ hideOptions: {direction: 'up' });

position

设置 wijpopup 弹出位置。

Type: Hash

Default: {at: 'left bottom',my: 'left top'}

Code Example:

$(".selector").wijpopup({ position:{ of: $('#TextBox1'), offset: '0 4' }});

showDuration

设置 wijpopup 隐藏过程的持续时间。

Type: Int

Default: 300

Code Example:

$(".selector").wijpopup({ showDuration: 100 });

showEffect

设置显示 wijpopup 动画特效。
主义: 可使用的效果有 'blind', 'clip', 'drop', 'fade', 'fold', 'slide', 和 'pulsate'。

Type: String

Default: 'show'

Code sample:

$(".selector").wijpopup({ showEffect: 'blind' });

showOptions

设置 object/hash 显示时的 其他选项，弹出方向等。

Type: Hash

Default: {}

Code Example:

$( ".selector" ).wijpopup({ showOptions: {direction: 'up' });

Events

hidden

在 wijpopup 隐藏后触发。

Parameters:

• e: the jQuery.Event object.

Type: Function

Default: null

Code Example:

$("#element").wijpopup({ hidden: function (e) { } });

hiding

在 wijpopup 隐藏前触发。

注意:可以通过 data.cancel = true 取消事件。

Parameters:

• e: the jQuery.Event object.

Type: Function

Default: null

Code Example:

$("#element").wijpopup({ hiding: function (e) { } });

posChanged

当 wijpopup 位置移动后触发。

Parameters:

• e: the jQuery.Event object.

Type: Function

Default: null

Code Example:

$("#element").wijpopup({ posChanged: function (e) { } });

showing

在 wijpopup 弹出之前触发，可取消。

注意:可以通过 data.cancel = true 取消事件。

Type: Function

Default: null

Code Example:

$("#element").wijpopup({ showing: function (e, args) { } });

shown

在 wijpopup 弹出之后触发。

Parameters:

• e: the jQuery.Event object.

Type: Function

Default: null

Code Example:

$("#element").wijpopup({ shown: function (e) { } });

Methods

hide

hide()

隐藏 wijpopup。

Code Example:

$(".selector").wijpopup('hide');

isVisible

isVisible()

设置 wijpopup 是否可见。

Code Example:

var display= $(".selector").wijpopup('isVisible');

show

show(position)

弹出 wijpopup ，参数可选。

Code Example:

$(".selector").wijpopup('show', {offset: ’50 50’});

showAt

showAt(x, y)

在固定位置弹出 Popup。

Code Example:

$(".selector").wijpopup('showAt', 100, 100);