Wijmo 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= " xxx;height:xxx " >content goes here</div>
jQuery 脚本
$( " .selector " ).wijpopup({ showEffect: ' blind ' });
感谢大家阅读本文章,在下一篇文章中我们将介绍。 Wijmo jQuery Progressbar -进度条 的使用方法。
最后,和大家分享一些资源吧:
1.源码下载(包含以上特性): Wijmo-Accordion.zip
2.更多信息请参考:Wijmo 中文网站: http://HdhCmsTestgcpowertools测试数据.cn/products/c1_asp_overview.htm
3.开源Wijmo jQuery 讨论社区: http://gcdn.grapecity测试数据/index.aspx
点击查看 APIOptions 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);
分类: C1 ASP.NET Wijmo
标签: Wijmo
作者: Leo_wl
出处: http://HdhCmsTestcnblogs测试数据/Leo_wl/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
版权信息查看更多关于Wijmo jQuery 插件集的详细内容...