mask - 遮罩控件

mask控件,此控件是ui控件,已经生成了相关的html结构,你需要将其添加到dom中的任何位置,当遮罩开启时会并在content中

如:

遮罩控件

Allocate

ui mask控件所在脚本 {lib}ui/mask/mask.js

页面结构如下:

<html>
    <body>
        <div id ="mask"></div>
    </body>
</html>

简单调用实现如下:

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _tu = _('t.u');
        _p = _('nej.ui');
        _v = _('nej.v')
    // 初始化mask插件
    var _mask =_p._$$Mask
                    // 启动
                    ._$allocate({
                        parent:document.body,
                        //添加onmask的监听事件
                        content:"<div class='content'>你可以选择遮罩上的文字</div>"
                    })    
    _mask._$hide() //默认遮罩关闭
    // 获取遮罩节点
    var _maskBody = _mask._$getBody();
    // 我们简单的添加className 来增加我们的样式  这里我修改背景为灰色半透明
    _e._$addClassName(_maskBody,"mask-1");
    //点击button 开启遮罩
    _v._$addEvent(_e._$get("trigger"),"click",function(){
        _mask._$show()
    })
    // 点击遮罩关闭遮罩
    _v._$addEvent(_maskBody,"click",function(){
        _mask._$hide()
    })
    //启动代码高亮 
    _tu._$processCode();
}
define(['{lib}ui/mask/mask.js', '{pro}js/extend.js'],f);

Explain

参数 content [String|Node] - 内容节点或者HTML代码

更多的参数信息请参照mask.js api说明

Recycle

mask.$recycle();

mask external interface

_$show() - 显示遮罩 并填满整个窗口

Known Issues

Demo

Mask控件demo

© 1997-2013 Netease. All Rights Reserved.
comments powered by Disqus