园子中的朋友大家好。在上一篇文章中我们,给大家介绍了 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-对话框 的使用方法。 最后,和大家分享一些资源吧: 源码下载(包含以上特性):
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); |
关于葡萄城
赋能开发者!葡萄城是专业的集开发工具、商业智能解决方案、低代码开发平台于一身的软件和服务提供商,为超过 75% 的全球财富 500 强企业提供服务。葡萄城专注控件软件领域30年,希望通过模块化的开发控件、灵活的低代码应用开发平台等一系列开发工具、解决方案和服务,帮助开发者快速响应复杂多变的业务需求,最大程度地发挥开发者的才智和潜能,让开发者的 IT 人生更从容更美好。
了解详情,请访问葡萄城官网。