Overlay 最简单的使用
new S.Overlay(config)
当 config 没有 srcNode 项, 表示新建 Overlay, 如果传入 srcNode, 表示在此节点基础上产生 Overlay.
srcNode 节点内容上应该注意标明相应类名,例如
<div id="markup1" style="visibility:hidden"> 从 markup 生成 overlay </div>
KISSY.ready(function(S) {
var popup = new S.Overlay({
srcNode:"#markup1",
width: 300,
height: 200
});
});
Config
srcNode - null | String | HTMLElement | KISSY.Node
Overlay 容器, 默认为 null 时, 表示新建 DOM,注意设置该配置时,也要设置 autoRender 配置
new S.Overlay({srcNode:"#markup1",autoRender:true});
autoRender - true/false
是否自动渲染,否则会等 show 时才新建节点,对于设置了 srcNode 时,该配置一定要设置为 true
shim - true/false
添加iframe shim,ie6 默认为 true,其他浏览器默认 false
elCls - String
添加到容器的 class
content - undefined | String
默认为 undefined, 不设置内容.
width - Number
容器宽度, 默认为 0.
height - Number
容器高度, 默认为 0.
zIndex - Number
z-index 值, 默认为9999.
xy - Array
相对 page 定位, 有效值为 [n, m].
后来, 加入了 x 和 y 两个独立参数, 设置 xy 等价于分别设置 x 和 y.
align - Object
相对指定 node or viewport 定位, 提供子选项
align: {
// 参考元素, falsy 值为可视区域, 其他为指定元素
node: null,
// ['tl', 'tr'] 表示 overlay 的 tl 与参考节点的 tr 对齐
points: ['cc','cc'],
// 水平, 垂直方向上的偏移, 有效值为 [n, m]
offset: [0,0]
}
align 使用示例
var test = new S.Overlay({
width: 300,
height: 200,
align: {
node: '#archor',
points: ['tr', 'tl'],
offset: [50, 0]
}
});
mask - Boolean
是否显示遮盖层, 默认为不显示.
Memeber
el - KISSY.Node
指向容器元素,通过 get("el") 获取
contentEl - KISSY.Node
指向内容容器元素,通过 get("contentEl") 获取,注意内容请通过set("content",content)设置
content - string
指向容器内容,通过 set("content",content) 设置,以及 get("content") 读取
Methods
show()
显示 Overlay.
hide()
隐藏 Overlay.
move(x, y)
将 Overlay 移动到指定位置上, 绝对位置.
align(node, points, offset)
将 Overlay 定位到指定节点的特定位置上, 如果没有指定 node, 会默认使用 config 中的 align 设置.
center()
将 Overlay 居中到当前可视区域上.
详见 overlay 的简单 demo
Dialog 的简单实用
Config
headerContent - undefined | String
默认为 undefined, 设置头部内容.
footerContent - undefined | String
默认为 undefined, 设置尾部内容.
bodyContent - undefined | String
默认为 undefined, 设置主体内容.
closable - true | false
是否包括关闭按钮
constrain - true/false/string/KISSY.Node/HTMLElement
是否包括限制在某个区域内拖放
Memeber
header - KISSY.Node
指向头元素,通过 get("header") 获取
body - KISSY.Node
指向体元素,通过 get("body") 获取,注意内容请通过set("bodyContent",content)设置
footer - string
指向尾内容,通过 get("footer") 读取
详见 dialog 的简单 demo
更多例子请参见 demo.