好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

Wijmo jQuery 插件集

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

点击查看 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);

 

分类:  C1 ASP.NET Wijmo

标签:  Wijmo

作者: Leo_wl

    

出处: http://HdhCmsTestcnblogs测试数据/Leo_wl/

    

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

版权信息

查看更多关于Wijmo jQuery 插件集的详细内容...

  阅读:72次