NEJ控件开发实例-卡片控件（转载）

<div class="g-bd f-cb">
    <div id="box" class="m-box">
        <input type="button" id="input" class="w-btn" value = "生成卡片"/>
    </div>
</div>

css

<style>
.w-btn{padding:0 22px;height:31px;line-height:31px;color:#000;border:1px solid #b1b1b3;border-radius:2px;text-shadow:1px 1px #fff;/*background:-webkit-gradient(linear,0% 0%, 0% 100%, from(#fefefe), to(#f3f3f3));*/
background:-o-linear-gradient(top,#fefefe,#f3f3f3);
background:-moz-linear-gradient(top,#fefefe,#f3f3f3);
background:-webkit-linear-gradient(top,#fefefe,#f3f3f3);
box-shadow:inset 0 -1px #fff;}
.w-btn:hover{
background:-o-linear-gradient(left,#fff,#f5f5f5);
background:-moz-linear-gradient(left,#fff,#f5f5f5);
background:-webkit-linear-gradient(top,#fff,#f5f5f5);
}
.w-btn:active{
background:#f8f8f8;
box-shadow:inset 0 1px 1px #cccfd0;
}
.js-card{width:225px;border:1px solid #b1b1b3}
.js-card .itm{line-height:34px;border-bottom:1px solid #e8e8e8;font-size:12px;padding-left:35px;width:190px}
body .js-card .itm:hover{background-color:#f7f7f7}
</style>

js

<script src="http://nej.netease.com/nej/src/define.js?pro=./"></script>
<script>
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;}\
	        .#<uispace> .itm{color:#000;text-decoration:none;cursor:pointer;display:inline-block;*zoom:1}\
			.#<uispace> .itm:hover{background-color:#ccc;text-decoration:none;}');
	    // ui html code
	    var _seed_html = _e._$addNodeTemplate('<div class="'+_seed_css+'">\
	    		 									<a class="itm pnt" href="javascript:void(0)">相册属性</a>\
	    											<a class="itm pnt" href="javascript:void(0)">相册封面</a> \
	    											<a class="itm pnt" href="javascript:void(0)">推送相册</a> \
	    											<a class="itm pnt" href="javascript:void(0)">删除相册</a>\
	    											<a class="itm pnt" href="javascript:void(0)">相片说明</a> \
	    											<a class="itm pnt" href="javascript:void(0)">批量管理</a> \
	    											<a class="itm pnt" href="javascript:void(0)">相片排序</a>\
	    									   </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();
	};
	
	var _input = _e._$get('input');
	_p._$$CustCard._$attach(_input,{parent:document.body,align:'bottom left',itemclick:onItemClick,destroyable:true,clazz:'js-card'});
	
	var _card;
    //_v._$addEvent(_input,'click',onNewCardClick);
    function onNewCardClick(_event){
        _v._$stop(_event);
        if(!!_card)_card._$recycle();
        _card = _p._$$CustCard._$allocate({parent:_input.parentNode,itemclick:onItemClick,destroyable:true,clazz:'js-card'});
    };
    
    
    function onItemClick(_item){
    	alert(_item);
    };
};
define(['{lib}ui/layer/card.wrapper.js'], f);
</script>

转载于:https://my.oschina.net/Qm3KQvXRq/blog/198178