card - 卡片控件

卡片控件是一类生成后,在任文档的任何地方有点周时,卡片都会被隐藏,如在allocate时传的参数是destroyable为true,在隐藏时卡片回收了制作卡片类需要的步骤是

1.在__initXGui指定css_seed,和html_seed,htmlseed是卡片的html结构种子,在$addNodeTemplate会返回这人种子 如果在html结构里有定义的css样式,在这里可以不设置css_seed

2.在__initNode获取节点和添加事件

3.在事件回调中,如果要通知外面模块,需要分发自定义事件出去

如:

日期选择控件

Allocate

card控件所在脚本 {lib}ui/layer/card.wrapper.js

页面结构如下:

<div id="box" class="box">
    <input type="button" id="input" value = "生成卡片"/>
</div>

从卡片需要从card.wrapper.js继承,并按上面的方式重写结构的事情

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _o = NEJ.P('nej.o'),
        _v = NEJ.P('nej.v'),
        _ui = NEJ.P('nej.ui'),
        _p = _('nej.demo'),
        _proCustCard,
        _supCustCard;
    var _seed_css = _e._$pushCSSText('.#<uispace>{background:#fff;line-height:26px;width:140px;border:1px solid #ccc;}\
            .#<uispace> .itm{color:#000;padding:0 0 0 8px;cursor:pointer}\
            .#<uispace> .itm:hover{background-color:#ccc;}');
        // ui html code
        var _seed_html = _e._$addNodeTemplate('<div class="'+_seed_css+'">\
                                                    <div class="itm pnt">相册属性</div>\
                                                    <div class="itm pnt">相册封面</div> \
                                                    <div class="itm pnt">推送相册</div> \
                                                    <div class="itm  pnt">删除相册</div>\
                                                    <div class="itm pnt">相片说明</div> \
                                                    <div class="itm pnt">批量管理</div> \
                                                    <div class="itm pnt">相片排序</div>\
                                               </div>');


    _p._$$CustCard = NEJ.C();
    _proCustCard = _p._$$CustCard._$extend(_ui._$$CardWrapper, !0);
    _supCustCard = _p._$$CustCard.prototype;

    /**
     * 初始化外观信息
     * 
     * @return {Void}
     */
    _proCustCard.__initXGui = function() {
        this.__seed_css = _seed_css;
        this.__seed_html = _seed_html;
    };
    /**
     * 控件重置
     * 
     * @param {Object}
     *            _options 可选配置参数 
     *              itemclick   卡片点击回调
     * @return {Void}
     */
    _proCustCard.__reset = function(_options) {
        this.__supReset(_options);
    };
    /**
     * 初始化节点
     * 
     * @return {Void}
     */
    _proCustCard.__initNode = function() {
        this.__supInitNode();
        _v._$addEvent(this.__body, 'click', this.__addCardItemClick._$bind(this));
    };
    /**
     * card点击回调
     */
    _proCustCard.__addCardItemClick = function(_event){
        var _elm = _v._$getElement(_event);
        this._$dispatchEvent('itemclick',_elm.innerHTML);
        this.__destroy();
    };
};
define('{pro}js/card.js', ['{lib}ui/layer/card.wrapper.js'], f);

上面的_$$CustCard是从card.wrapper.js继承过来,如前所述,只在给相关的方法里进行逻辑处理

Allocate card

var f = function(){
    var _  = NEJ.P,
        _e = _('nej.e'),
        _v = _('nej.v'),
        _tu = _('t.u'),
        _p = _('nej.demo');

    var _input = _e._$get('input');

    _v._$addEvent(_input,'click',onNewCardClick);

    function onNewCardClick(_event){
        _v._$stop(_event);
        _p._$$CustCard._$allocate({parent:_input.parentNode,itemclick:onItemClick,destroyable:true});
    }
    function onItemClick(_item){
        _tu._$log('itemclick',_item)
    }
    _tu._$processCode();
}
define(['{pro}js/card.js', '{pro}js/extend.js'],f);

Explain

卡片的隐藏是通过document上的click事件进行隐藏,如果在allocate卡片时,没有把事情阻止,document上的click马上把卡片隐藏,所以要在allocate卡片时,把click事件阻止掉,如果卡片在allocate时传入参数是destroyable为true,在隐藏时卡片就会被回收掉

卡片在allocate出来后,可以通过_$showByReference(_options)来进行位置的调整,调整的参数如下:

_options 可选配置参数,已处理参数列表如下

 delta   [Object]  - 位置偏移,{top:0,right:0,bottom:0,left:0}

 align   [String]  - 卡片位置,默认为'bottom left',

                     整体位置:top/right/bottom/left

                     对齐方式,传入的不是能矛盾的一对,但可以把位置颠倒的传:top/bottom -> left/right

                 left/right -> top/bottom

更多的参数信息请参照card.wrapper.js

Recycle

card.$recycle() 通常不用对其回收,document的click会进行回收,如果点击了卡片后需要马上隐掉卡片,需要进行回收或_$hide();

card external interface

_$show() 显示卡片

_$hide() 隐藏卡片

Known Issues

Demo

card控件demo

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