YUI3 Overlay的使用

YUI3的Overlay为我们提供了一个创建叠加层的方便的方(从名字就可以看出来),他扩展自Widget类。目前的版本,仅支持简单的页面XY定位、相对于一个Node或者viewport对其或居中。下面来体验一下Overlay。

最简单的引用YUI3的方法自然是引用Yahoo服务器上的种子文件,地址如下:

<script src="http://yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>

引用了种子文件之后,我们就可以在我们的应用中使用Overlay了,建立一个新的YUI的命名空间,如下:

YUI().use(‘overlay’,function(Y){     var overlay = Y.Overlay({          contentBox:“#MyContent”,          visible:true,          width:“20em”,          height:“20em”,          xy:[200,200]         });     overlay.render(); }); 先来熟悉一下overlay所支持的属性:

Attribute

Description

x, y and xy

Positioning attributes, to set the XY position in page co-ordinates on the Overlay's bounding box. Set to [0,0] by default

zIndex

Sets the z-index on the Overlay's bounding box. Set to 0 by default.

shim

Boolean, indicating whether or not an iframe shim should be added to the Overlay to protect against select box bleed through. It is only enabled by default for IE6.

align

Used to align a specific point on the Overlay's bounding box to a specific point on another node, or the viewport. Set to null by default.

centered

Used to center the Overlay inside another node, or inside the viewport. Set to false by default.

headerContent

Used to set the content of the Overlay's header section. No default value set.

bodyContent

Used to set the content of the Overlay's body section. No default value set.

footerContent

Used to set the content of the Overlay's footer section. No default value set.

fillHeight

Specifies which of the 3 sections - header, body or footer, should be automatically sized to fill out the height of the Overlay, if a fixed height has been set. Set to WidgetStdMod.BODY by default. Can be disabled by setting to null.

内容: overlay的内容既可以是我们事先写在页面中的,也可以通过script在后期创建。因为使用了标准的模块,所以内容基本上有三个部分:headerContent、bodyContent、footerContent。通过脚本设置内容的时候,既可以直接填入innerHTML,也可以通过传入一个node对象来实现,使用的方式非常的灵活。

定位

Overlay的定位有三种方式,xy、对齐、居中。

xy定位的方式是通过指定x,y或者xy来为叠加层定位,这个定位是基于页面的xy坐标,比如[200,200]是相对于页面左上角分别200px的位置。

对齐(align),可以将overlay与页面中的某个node进行对齐,通过传入一个两个属性的对象来实现,如下例:

YUI().use(‘overlay’,function(Y){   var overlay = Y.overlay({        contentBox:“MyContent”        align:{              node:“MyAchor”              points:[Y.WidgetPositionExt.TL,Y.WidgetPositionExt.TR]

}); 其中points表示叠加层和要对其的node的位置关系,第一个参数为叠加层,第二个为对齐node,上例的参数表示叠加层的左上角和node的右上角对齐。 层叠顺序: IE6下有一个著名的bug,就是select控件默认总是zindex高于其他所有的层,overlay的shim属性正是考虑了这个问题存在的。这个选项默认在IE6下是打开的,会通过创建iframe的方式来规避这个bug。

使用overlay也好,其他的yui特性也好,感觉非常的方便和灵活,可以说是一个真真正正为开发者考虑的js框架,而我们也应该学习YUI3的这种设计思想和风格,让自己的应用也变得更加灵活和方便。

总体来看,目前YUI3的Overlay基本能够满足我们日常创建一些叠加层的需要,但是还有一些更高级的属性或者控制功能期待在后续的版本中加入进来。

Technorati Tags: YUI3,Overlay,浮动层

参考资料: 1、YAHOO YUI3 Overlay

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

2016.06 第一周 群问题分享

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport(视口) 参考答案 <meta ...

3007
来自专栏博客园

WPF Binding学习(二)

  Binding作为数据的桥梁,连通业务逻辑层的对象(源对象)和UI的控件对象(目标对象)。在这座桥梁上,我们不仅可以控制在源对象与目标对象是双向通行还是单向...

1132
来自专栏前端菜鸟变老鸟

常见的html、css以及javascript兼容方案

    浏览器兼容性一直是一个前端开发人员不可避免的大问题,这篇文章主要列举了html、css以及javascript中一些常见的兼容性问题以及对应的解决方案。

971
来自专栏编程

第1章:初识编程

写在前面 之前答应过不少朋友今年要写个《猫哥极简编程入门》的系列,帮助各位对编程感兴趣的新人和非程序员,快速掌握一些实用的编程技巧,以便快速入门编程以及应付一些...

22610
来自专栏码神联盟

碎片化 | 第四阶段-41-struts2字节流生成验证码-视频

如清晰度低,可转PC网页观看高清版本: http://v.qq.com/x/page/r056700jckx.html 验证码实现 需求: 在登录的页面,增...

2969
来自专栏我的博客

Jquery学习第一天

1、jQuery优点 轻量级,强大的选择器,出色的DOM操作,可靠的事件处理,完善的Ajax,不污染的顶级变量,出色的浏览器兼容,链式操作,隐式迭代,行为层和结...

3728
来自专栏林德熙的博客

win10 uwp 分治法

算法涉及到了一个平面几何的知识。就是三角形p1p2p3的面积等于以下行列式的二分之一: % <![CDATA[ \begin{array}{cccc} | ...

821
来自专栏web编程技术分享

《从案例中学习JavaScript》之实现对话效果

38012
来自专栏小灰灰

cocos2dx-v3.4 2048(四):游戏逻辑的设计与实现

前言 ---- 2048的游戏逻辑比较简单,向四个方向移动单元格,若相邻的单元格数字相同,则合并成一个新的单元格,且数字为之前的两倍;若不同,则移动到目的方向上...

3996
来自专栏向治洪

iOS 滚动视图的复用问题解决方案

##LazyScroll是什么 LazyScrollView 继承自ScrollView,目标是解决异构(与TableView的同构对比)滚动视图的复用回收问题...

25510

扫码关注云+社区

领取腾讯云代金券