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

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

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


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

1. HTML
   
2. 
   
3. <div style="width:xxx;height:xxx">content goes here</div>
   
4. 
   
5. jQuery 脚本
   
6. 
   
7. $(".selector").wijpopup({ showEffect: 'blind' });

复制代码

感谢大家阅读本文章，在下一篇文章中我们将介绍 Wijmo jQuery Dialog-对话框 的使用方法。

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

源码下载（包含以上特性）:


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