提供功能:

  • 页面上的覆盖层;
  • Overlay 基类, 扩展出 Dialog
  • 见整体 demo
  • 调研报告, 见 slide

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") 读取

Events

show

Overlay 显示之后触发的事件.

hide

Overlay 隐藏之后触发的事件.

Methods

show()

显示 Overlay.

hide()

隐藏 Overlay.

move(x, y)

将 Overlay 移动到指定位置上, 绝对位置.

align(node, points, offset)

将 Overlay 定位到指定节点的特定位置上, 如果没有指定 node, 会默认使用 config 中的 align 设置.

center()

将 Overlay 居中到当前可视区域上.

详见 overlay 的简单 demo

Dialog 的简单实用

new S.Dialog(config)

S.Dialog 增加了 header 和 footer, 因此, config 和 method 做了对应调整.

config:
    headerContent: '',                     // header 内容
    footerContent: '',                     // footer 内容
    bodyContent: '',                       //body 内容
    closable: true                  // 是否需要关闭按钮, 默认需要
    constrain:true/false/string/KISSY.Node/HTMLElement //限制节点
    draggable:true/false            //是否可以拖动头部移动
    closable:true/false             //是否可以关闭                        
Member:
    header                          // 对话框头部的HTML元素
    body                            // 对话框体的HTML元素
    footer                          // 对话框尾部的HTML元素


                        

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.