前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >使用YUI3创建Popup弹出层

使用YUI3创建Popup弹出层

作者头像
大江小浪
发布2018-07-25 10:48:15
6560
发布2018-07-25 10:48:15
举报
文章被收录于专栏:小狼的世界

YUI3是一个非常好的开源框架,但是学习曲线稍微有些陡峭,这个系列将记录下我使用YUI3过程中的一些心得点滴,希望对大家能够有帮助。

很多互联网的项目应用中,弹出层出现的越来越多,使用YUI3可以快速的实现制作弹出层的效果。

YUI3提供了Overlay这个组件来实现可定位、可叠加的弹出层效果,这个弹出层同时还包含标准的布局模块。

首先是包含YUI的基础文件,因为Overlay组件使用中要用到WidgetPosition、WidgetStack、WidgetPositionAlign、WidgetPositionConstrain等组件,简单的方法是只引用YUI的种子文件,他会根据情况自动加载需要的组件。

<script type="text/javascript" charset="utf-8" src="http://yui.yahooapis.com/3.1.1/build/yui/yui-min.js"> </script>

之后,我们就可以创建YUI的实例了。

YUI().use(“overlay”, function(Y){ });

传给use最后的一个参数是一个回调函数。该回调函数在YUI实例完成了页面中缺少的文件加载后开始执行。

Overlay组件继承自Widget类,所以初始化方式同Widget一样,可以接受一个配置对象来设置初始的环境变量。Overlay初始的方式有很多种,即支持基于已有的HTML生成的方式,也支持代码动态创建的方式生成。我们可以根据自己的需求选择不同的方式。个人认为基于已有HTML的方式,比较容易控制HTML的结构和样式,方便后期的修改,对于包含复杂弹出层内容的应用比较合适。而代码动态创建的方式,则适合显示简单信息的场景。

使用HTML的方式,需要准备的HTML为(Markup):

<div id="myContent"> <div class="yui3-widget-hd">Overlay Header</div> <div class="yui3-widget-bd">Overlay Body</div> <div class="yui3-widget-ft">Overlay Footer</div> </div>

代码语言:javascript
复制
在实例化的时候,需要在配置对象中指定一个到HTML的引用。引用可以是元素的ID\可以是YUI对象,也可以是一个选择器,如果选择到了多个符合的元素,则默认使用第一个。
代码语言:javascript
复制
来看一下基本的例子:

YUI().use('overlay', function(Y){     var popup = new Y.Overlay({         srcNode:"#myContent",         visible:false,         width:'650px',         height:'650px'     }).render(); });

也可以完全使用动态的方式来创建弹出,在脚本中指定要弹出的内容。

仅仅有上面这些还不够,我们还需要未弹出层设计位置和样式,光秃秃的弹出几句话来只会引起用户的奇怪。YUI提供了丰富的选项允许我们对Overlay进行定制,下面是参数列表:

image
image

我觉得 x,y\zIndex\align\centered 都是非常常用也非常有用的属性,具体的使用可以参考YUI的官方说明。

弹出层一般会绑定在一个事件上,比如鼠标单击按钮后,出现弹出层,那么首先需要绑定事件的函数:

Y.on(event, fn, selector);

这个函数还可以接受其他的一些参数,具体的可以参考 YUI Development。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2010-07-07 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档