使用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进行定制,下面是参数列表:

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

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

Y.on(event, fn, selector);

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏思考的代码世界

Python网络数据采集之HTML解析|第01天

假如我们确定一个我们需要采集的目标信息,可能是一组统计数据、或者一个 title等,但是此时这个目标可能藏的比较深,可能在第20层的标签里面,你可能会用下面的...

44270
来自专栏前端大白专栏

使用react心得

16550
来自专栏雨过天晴

原 荐 PHP 在 Console 模式下的

18610
来自专栏编程

如何用Vim提高开发效率

背景 虽然笔者是Android开发工程师,但也接触过各种IDE(不限于Android开发)。不同的IDE往往都有不同的快捷键,我们总不能对每种IDE都进行配置吧...

26980
来自专栏沈唁志

php中删除html标签和标签内内容的方法

30630
来自专栏c#开发者

selenum参考手册中文翻译

Added by SpringSideTeam, last edited by SpringSideTeam on 2006-11-23  (view chan...

29860
来自专栏Java帮帮-微信公众号-技术文章全总结

深入浅出爬虫之道: Python、Golang与GraphQuery的对比

本文将分别使用 Python ,Golang 以及 GraphQuery 来解析某网站的 素材详情页面 ,这个页面的特色是具有清晰的数据结构,但是DOM结构不够...

15410
来自专栏菩提树下的杨过

Silverlight:Dependency Property(依赖属性)学习笔记

学习SL/WPF,Dependency Properties(依赖属性)是一个全新(陌生)但又无法回避的概念。 http://www.wpftutorial.n...

21270
来自专栏腾讯IVWEB团队的专栏

你可能不知道的 ECMAScript 2016 的变化(英译)

与 ECMAScript 6(也称为ECMAScript 2015)相比,ECMAScript 2016 是对 JavaScript 语言规范的一个小更新。 ...

23700
来自专栏Django中文社区

Django模板标签regroup的妙用

在使用 Django 开发时,有时候我们需要在模板中按对象的某个属性分组显示一系列数据。例如博客文章按照时间归档分组显示文章列表(示例效果请看我的博客的归档页面...

35460

扫码关注云+社区

领取腾讯云代金券