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

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

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

首先让我们看看 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);

posted @ 2012-09-27 09:04  葡萄城开发工具  阅读(2954)  评论(0)  编辑  收藏  举报