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基本能够满足我们日常创建一些叠加层的需要,但是还有一些更高级的属性或者控制功能期待在后续的版本中加入进来。
参考资料:
1、YAHOO YUI3 Overlay
转载于:https://www.cnblogs.com/cocowool/archive/2010/02/07/1665597.html
YUI3 Overlay的使用相关推荐
- DOCKER OVERLAY NETWORK consul 注册
下载 consul 二进制包并启动 wget https://releases.hashicorp.com/consul/0.9.2/consul_0.9.2_linux_amd64.zip unzi ...
- Docker overlay网络互通
1 yum install docker-ce -y yum install python-pip -y pip install docker-compose systemctl enable doc ...
- android资源替换方案overlay,Android 运行时资源替换----Runtime Resource Overlay
先抛一个问题:现在有一个第三方应用,没有代码,只有编译好的apk,在不去改动这个apk的前提下,如果想改变这个应用中的一些资源显示效果,比如改变一个button的文字,一个imageview的背景,有 ...
- Angular CDK Overlay 弹出覆盖物
为什么使用Overlay? Overlay中文翻译过来意思是覆盖物,它是Material Design components for Angular中针对弹出动态内容这一场景的封装,功能强大.使用方便 ...
- R语言ggplot2可视化分组的重叠图实战:grouped overlay plot
R语言ggplot2可视化分组的重叠图实战:grouped overlay plot 目录 R语言ggplot2可视化分组的重叠图实战:grouped overlay plot #仿真数据
- R语言ggplot2可视化分面图(faceting)、在所有的分面中添加相同的参考基准曲线(overlay a base or reference plot to all facets )
R语言ggplot2可视化分面图(faceting).在所有的分面中添加相同的参考基准曲线(overlay a base or reference plot to all facets in a gg ...
- R语言ggplot2可视化2d密度图:可视化二维密度图并将两个二维密度图重叠起来、Overlay two ggplot2 stat_density2d plots
R语言ggplot2可视化2D密度图:可视化二维密度图并将两个二维密度图重叠起来.Overlay two ggplot2 stat_density2d plots 目录
- R可视化ggplot2绘制重叠密度图(Overlay Density Plots)
R可视化ggplot2绘制重叠密度图(Overlay Density Plots) 目录 R可视化ggplot2绘制重叠密度图(Overlay Density Plots) 创建仿真数据 数据格式变换 ...
- 立刻停止使用AUFS,开启Overlay!
2019独角兽企业重金招聘Python工程师标准>>> 在大多数Ubuntu系统上,Docker的默认文件系统是AUFS. 别用它,用Overlay吧,下来我告诉你为什么. 首先,补 ...
- mxGraph改变图形大小重置overlay位置
要在改变图形大小的时候改变overlay的位置.那肯定就要对重置图形大小的方法进行改造了.以下是源文件里的代码 mxGraph.prototype.resizeCells = function(cel ...
最新文章
- 常考题 | IoU 计算
- CBNetV2:北大提出的复合主干网络,COCO成绩60.1%
- 使用IDEA创建maven父子工程项目
- vue引入组件时‘@/xxxx’的意思
- 基于python的语料库数据处理电子版_基于 Python 自然语言处理工具包在语料库研究中的运用...
- MySQL DBA面试全揭秘
- 674 Longest Continuous Increasing Subsequence(每日一题)
- 多语言制作工具(2013-01-24更新,支持VS2005、2008、2010、2012)(已开源)
- [51NOD1847]奇怪的数学题(杜教筛+min_25筛+第二类斯特林数)
- Oracle:ORA-28000异常(帐户已被锁定),修改账号登录失败次数
- 微信小程序 - 按照官网文档构建npm包 - 提示【没有找到可以构建的npm】
- 7-1 图形卡片排序游戏 (40 分)
- 性能服务器如何放进ppt,Linux服务器性能评估与优化.ppt
- Rust 第一章 简介
- 西门子224XP型PLC和MCGS触摸屏控制MM420变频器
- 【科技素养题】少儿编程 蓝桥杯青少组科技素养题真题及解析第16套
- 华为笔记本都是Linux版本,华为笔记本装上linux系统而非Windows系统 这是为何
- mysql group by COLUMN desc问题
- 科技开发规划VBS屌丝暗色调
- 解决WPS或Word中“图片隐藏在文字下面”的问题
热门文章
- Remote Desktop Connection Manager (RDCMan)
- 云数据库模糊查询与索引管理
- C实现的UDP压力测试工具
- 机房巡检知识点(一)
- STM32 OSAL操作系统抽象层的移植
- kali Linux渗透测试教程.pdf
- @Zabbix配置snmptrap及使用snmptt解析格式化输出
- ubuntu下NS2+leach算法安装笔记(1)
- 手把手教你使用LabVIEW OpenCV dnn实现物体识别(Object Detection)含源码
- 游戏服务器系统安装,修复Win10系统游戏服务无法安装错误 0x80073D26(4种方法)...