← 返回所有博客文章
园子中的朋友大家好。在上一篇文章中我们,给大家介绍了 Wijmo Dialog -对话框插件的特性及使用方法。感谢园子中朋友的支持,朋友们的支持给我们写这一系列文章提供了很大的动力。在这篇文章中我们将介绍 wijpopup 的特性及使用方法。 wijpopup 即为 jQuery 中的弹出插件。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 Dialog-对话框 的使用方法。最后,和大家分享一些资源吧:源码下载(包含以上特性):
Wijmo-Popup.zip (987.87 K, 下载次数:50)
API 介绍:OptionsautoHide设置当元素失去焦点时元素是否自动隐藏。Type: BooleanDefault: falseCode Example:$(".selector").wijpopup({ autoHide: true });ensureOutermost设置 wijpopup 的父节点是否在最前。Type: BooleanDefault: falseCode sample:$(".selector").wijpopup({ ensureOutermost: true });hideDuration设置 wijpopup 隐藏过程的持续时间。Type: IntDefault: 100Code Example:$(".selector").wijpopup({ hideDuration: 200 });hideEffect设置隐藏 wijpopup 动画特效。主义: 可使用的效果有 'blind', 'clip', 'drop', 'fade', 'fold', 'slide', 和 'pulsate'.Type: StringDefault: ‘hide’Code Example:$(".selector").wijpopup({ hideEffect: 'blind' });hideOptions设置 object/hash 隐藏时的其他选项。Type: HashDefault: {}Code Example:$( ".selector" ).wijpopup({ hideOptions: {direction: 'up' });position设置 wijpopup 弹出位置。Type: HashDefault: {at: 'left bottom',my: 'left top'}Code Example:$(".selector").wijpopup({ position:{ of: $('#TextBox1'), offset: '0 4' }});showDuration设置 wijpopup 隐藏过程的持续时间。Type: IntDefault: 300Code Example:$(".selector").wijpopup({ showDuration: 100 });showEffect设置显示 wijpopup 动画特效。主义: 可使用的效果有 'blind', 'clip', 'drop', 'fade', 'fold', 'slide', 和 'pulsate'。Type: StringDefault: 'show'Code sample:$(".selector").wijpopup({ showEffect: 'blind' });showOptions设置 object/hash 显示时的其他选项,弹出方向等。Type: HashDefault: {}Code Example:$( ".selector" ).wijpopup({ showOptions: {direction: 'up' });Eventshidden在 wijpopup 隐藏后触发。Parameters:e: the jQuery.Event object.Type: FunctionDefault: nullCode Example:$("#element").wijpopup({ hidden: function (e) { } });hiding在 wijpopup 隐藏前触发。注意:可以通过 data.cancel = true 取消事件。Parameters:e: the jQuery.Event object.Type: FunctionDefault: nullCode Example:$("#element").wijpopup({ hiding: function (e) { } });posChanged当 wijpopup 位置移动后触发。Parameters:e: the jQuery.Event object.Type: FunctionDefault: nullCode Example:$("#element").wijpopup({ posChanged: function (e) { } });showing在 wijpopup 弹出之前触发,可取消。注意:可以通过 data.cancel = true 取消事件。Type: FunctionDefault: nullCode Example:$("#element").wijpopup({ showing: function (e, args) { } });shown在 wijpopup 弹出之后触发。Parameters:e: the jQuery.Event object.Type: FunctionDefault: nullCode Example:$("#element").wijpopup({ shown: function (e) { } });Methodshidehide()隐藏 wijpopup。Code Example:$(".selector").wijpopup('hide');isVisibleisVisible()设置 wijpopup 是否可见。Code Example:var display= $(".selector").wijpopup('isVisible');showshow(position)弹出 wijpopup ,参数可选。Code Example:$(".selector").wijpopup('show', {offset: ’50 50’});showAtshowAt(x, y)在固定位置弹出 Popup。Code Example:$(".selector").wijpopup('showAt', 100, 100);