YUI3 Overlay的使用「建议收藏」

YUI3 Overlay的使用「建议收藏」YUI3的Overlay为我们提供了一个创建叠加层的方便的方(从名字就可以看出来),他扩展自Widget类。目前的版本,仅支持简单的页面XY定位、相对于一个Node或者viewport对其或居中。下面来体验一下Overlay。最简单的引用YUI3的方法自然是引用Yahoo服务器上的种子文件,地址如下:<scriptsrc="http://yui.yahooapis.com/3…

大家好,又见面了,我是你们的朋友全栈君。

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/160351.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • vs2015注册码[通俗易懂]

    vs2015注册码[通俗易懂]VisualStudioProfessional2015简体中文版(专业版)KEY:HMGNV-WCYXV-X7G9W-YCX63-B98R2VisualStudioEnterprise2015简体中文版(企业版)KEY:HM6NR-QXX7C-DFW2Y-8B82K-WTYJV专业版:HMGNV-WCYXV-X7G9W-YCX63-B98R2企业版:HM6NR-QXX7C-DFW2Y…

  • 在线学习Java的资源网站

    CodeGym(https://codegym.cc/):一个在线Java编程课程,80%的内容是练习,适合一窍不通的入门者。 CodeAcademy(https://www.codecademy.com/):该课程注重的是在找工作时非常有用的技术能力。 除此之外还有在线视频课程,如Coursera(https://www.coursera.org/)或Udemy(ht…

  • linux 命令行 查找文件_grep命令查找文件

    linux 命令行 查找文件_grep命令查找文件一grep:查看文件内容,在文件中查询一个关键字,即搜索字符串的命令(在指定的文件中搜索符合条件的字符串)grep是包含匹配,不是完全的精确匹配,特别适合查找内容语法:grep[-option]需要搜索的关键字文件名参数:-n—-连行号一起显示-c—-统计有几行-i—-忽略大小写(一般用的少)-v—-排除指定的字符串(了解),取反,查找出来的内容是搜索条件以外的所有的内容例如:[root@localhostTEST~]#grep-n

  • securecrt乱码解决方法[通俗易懂]

    设置securecrt属性。问题securecrt连接某台linux机器显示中文乱码解决方法菜单下option-&gt;sessionoption1.选择图中属性结构中Emulation属性,修改terminal改成linux2.选择Appearance,在字符集属性中选择utf-8(具体要根据linux环境而定)…

  • 卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!

    卸载 x 雷某度!GitHub 标星 1.5w+,从此我只用这款全能高速下载工具!作者|Rocky0429来源|Python空间大家好,我是Rocky0429,一个喜欢在网上收集各种资源的蒟蒻…网上资源眼花缭乱,下载的方式也同样千奇百怪,比如BT下载,磁力链接,网盘资源等等等等,下个资源可真不容易,不一样的方式要用不同的下载软件,因此某比较有名的x雷和某度网盘成了我经常使用的工具。作为一个没有钱的穷鬼,某度网盘几十kb的下载速度让我…

  • ubuntu中使用Deb安装VS Code[通俗易懂]

    ubuntu中使用Deb安装VS Code[通俗易懂]01、进入VSCode下载安装包网址:https://code.visualstudio.com/02、将Windows系统中下载的deb安装包复制到虚拟机ubuntu中03、进入虚拟机ubuntu中,通过cd命令进入到deb安装包目录04、执行deb包安装命令05、安装完成效果图…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号