使用YUI3创建Popup弹出层

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>
在实例化的时候,需要在配置对象中指定一个到HTML的引用。引用可以是元素的ID\可以是YUI对象,也可以是一个选择器,如果选择到了多个符合的元素,则默认使用第一个。
来看一下基本的例子:

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

});

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

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

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

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

Y.on(event, fn, selector);

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

posted @ 2010-07-07 11:17  Cocowool  阅读(1619)  评论(0编辑  收藏  举报