Overlay
基础浮层组件,提供浮层显示隐藏、定位和 IE6 下 select 遮挡、窗口 resize 时重新定位、点击页面空白处浮层消失等等特性,是所有浮层类组件的基类。
如果要开发一个浮层类的 UI 组件,可以基于它进行扩展,dialog、autocomplete、popup、select、calendar 等模块均继承了 Overlay 。
❏
Overlay 继承了 widget,可使用其中包括 base、class、events、attribute、aspect 的属性和方法。
配置说明
element
element 页面 dom 节点,只读。
string
template 浮层容器的模板,如<div class="myoverlay"></div>
,只读。和 element
属性二者择一即可。
string|number
zIndex 浮层的 z-index 属性。
string|number
width 浮层宽度(px)。
string|number
height 浮层高度(px)。
string
id 浮层的初始化 id 。
string
className 浮层的初始化 className 。
object
style 浮层的初始化 style 对象。
element
parentNode 浮层的父元素,默认为document.body,只读。
object
align 定位对象,形似下面代码。这块的定位原理可参照 arale/position 组件的 pin 方法。
selfXY: 0 0 // element 的定位点,默认为左上角 baseElement: PositionVIEWPORT // 基准定位元素,默认为当前可视区域 baseXY: 0 0 // 基准定位元素的定位点,默认为左上角
方法说明
render()
生成浮层的dom结构和样式并插入文档流。
show()
显示浮层,第一次调用时会进行render()操作。
hide()
隐藏浮层。
get(key)
获得属性值。
set(key, value)
非只读属性都可以通过set方法修改,并会立刻反映到浮层上。API 里的所有属性都可以修改。
最佳实践
注意 务必将浮层元素在 CSS 上设置 position: absolute or fixed
, 并且设置有效的 left/top 值.
以避免当没有设置 left/top 时, 在浮层元素插入到页面底部后, 瞬间出现浏览器滚动条后, 获取可视区域宽高错误, 以致定位有几像素偏差的问题.
-
直接使用:
var overlay =template: '<div class="overlay"></div>'width: 500height: 200zIndex: 99style: 'border:1px solid red;color:green;'parentNode: '#c'align:selfXY: '-100%' 0baseElement: '#a'baseXY: 0 0;overlay;// 修改元素样式overlay;// 非只读属性都可以通过 set 方法进行更新overlay;overlay; -
继承使用:
继承使用时,如果需要覆盖父类的 setup、show、hide 方法,强烈建议这样
Dialog.superclass.show.call(this);
调用一下父类的方法,否则可能造成一些特性的丢失。var Overlay = ;var Dialog = Overlay; -
Mask 组件的使用:
var mask = ;mask;//mask.hide();改变默认配置:
mask; -
点击页面空白处浮层消失的功能。
这个功能常用于提示层和弹出菜单等,要使用这个特性,需要调用 overlay 的私有方法 _blurHide()。
这个方法接受一个参数(元素数组),表示点击到这些元素上浮层不消失。示例如下:
{Popupsuperclasssetup;this;}