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)


相关推荐

  • 遍历数据时arraylist效率高于linkedlist_遍历问题种类

    遍历数据时arraylist效率高于linkedlist_遍历问题种类概述一个java程序猿比较广为人知的小知识,是ArrayList和LinkedList最好使用迭代器删除,而不是遍历删除。当我们尝试使用for循环或者forEach进行删除的

  • 深入编程之QQ盗号核心代码[通俗易懂]

    深入编程之QQ盗号核心代码[通俗易懂]经常有听到有朋友QQ被盗的消息,总感觉做出这种行为的人是可鄙的,不就是对QQ窗口进行监视,然后再是记录用户输入的号码和密码,认为没什么了不起。对于Windows核心编程,本人还是一只菜鸟,前一段时间把《Windows系统编程》粗略的看一边(当然重点地方仔细的看),由于对于C++有点基础,感觉学起来比较容易上手。但到了这两天真正实践的时候,遇到了各种各样的问题。即使一个小小的问题都足以让我…

  • PC端页面如何调用QQ进行在线聊天?

    PC端页面如何调用QQ进行在线聊天?

    2021年10月21日
  • 关于各种无法解析的外部符号问题的相应解决方案

    关于各种无法解析的外部符号问题的相应解决方案在使用vs2008调试程序的过程中,经常会出现无法解析的外部符号问题,可能的原因有很多种,下面这些是我一年来积累的经验.仅供参考.考虑可能的原因:[0]出现无法解析可能是因为lib文件不正确,比如64位的编译配置,结果使用的是32位的lib包.[1]只写了类声明,但还没有写实现类,造成调用时无法解析[2]声明和定义没有统一,造成链接不一致,无法解析[3]没有在项目属性页的链接器的

  • requestparam注解接的收的是什么格式(玄机赋注解)

    1、作用:@RequestParam:将请求参数绑定到你控制器的方法参数上(是springmvc中接收普通参数的注解)2、语法:语法:@RequestParam(value=”参数名”,required=”true/false”,defaultValue=””)value:参数名required:是否包含该参数,默认为true,表示该请求路径中必须包含该参数,如果不包含…

  • 浏览器无法复制文字解决办法是什么_粘贴复制浏览器里下载

    浏览器无法复制文字解决办法是什么_粘贴复制浏览器里下载以谷歌浏览器为例:第一步F12:打开开发者选项第二步:F1:设置项第三步:拉到最下面Debugger下的DisableJavaScript,勾选上,然后就可以复制了。注意这时候按钮都失效了,因为我们禁用了脚本。所以复制完成后再把√去掉即可。…

    2022年10月13日

发表回复

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

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