专栏首页小狼的世界YUI3 Overlay的使用

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 条评论
登录 后参与评论

相关文章

  • 利用setTimeout和SetInterval构建Javascript计时器

    看到了一篇深入浅出的讲解setTimeout和setInterval的例子,直接讲英文贴出来吧,也不是很难。

    大江小浪
  • CSS中的计数器

         <p>Place the flour in a large bowl, make a well in the centre and pour in t...

    大江小浪
  • 惊闻NBC在奥运后放弃使用Silverlight

    奥运初始的时候,媒体对于NBC使用Silverlight技术进行了高调的宣传,没想到奥运会结束刚刚三周的时间,NBC就弃用了Siverlight,重新采用Ado...

    大江小浪
  • ROS2编程基础课程--版本

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    zhangrelay
  • Tomcat 工作原理、使用方法和错误汇总

    参考链接:https://blog.csdn.net/qq_32786873/article/details/79609314

    城市中的游牧民族
  • JavaScript强化教程——语句

    本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 语句

    IMWeb前端团队
  • 我的 Sublime Text 必备插

    Sublime Text有一个缺点,当你想使用浏览器浏览你的html页面的时候,你需要在你的文件上点击鼠标右键,选择Open In Browser才可以浏览器浏...

    py3study
  • Java工具集-分布式全局唯一ID生成

    cwl_java
  • JavaScript强化教程——语句

    本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— 语句 条件语句 通常在写代码时,您总是需要为不同的决定来执行不...

    IMWeb前端团队
  • Microsoft AI - Custom Vision

    概述 前几天的 Windows Developer Day 正式发布了 Windows AI Platform,而作为 Windows AI Platform ...

    Shao Meng

扫码关注云+社区

领取腾讯云代金券