KISSY OOP 组件编写

kissy_oop.js

/**
 * [Con_fun description]
 * @param {[type]} container [description]
 * @param {[type]} config    [description]
 * 继承关系
 */
function Con_fun(container,config){
    var self = this;

    if (!(this instanceof Con_fun)){
        throw new error('please use new Con_func()');
    }
    /**
     * 容器元素
     */
    self.container = container = S.one(container);
    if(!container) return;

    Con_fun.superclass.constructor.call(self,config);

    self._init();
}
S.extend(Con_fun,S.Base);
/**
 * 添加配置项
 */
Con_fun.ATTRS = {
    param_1:{
        value: X
    },
    param_2:{
        value: default_value,
        setter: function(v) {
            var tmp = S.makeArray(v),
                deft = this.get(param_2);
            if (S.isUndefined(tmp[0])) {
                tmp = deft;
            } else if (S.isUndefined(tmp[1])){
                tmp[1] = deft[1];
            }
            return tmp;
        },
        getter: function(v) {

        }
    }
};
/**
 * 实现主要逻辑
 */
S.augment(SlidingLabels, {
    /**
     * 初始化 label 状态及绑定 focus/blur 事件
     * @private
     */
    _init: function() {
        var self = this,
            blurStyle = self.get(BLUR_STYLE),
            position = self.get(POSITION);

        self.container.all('label').each(function(elem) {
            var lab = new S.Node(elem),
                area = S.one('#' + lab.attr('for')), prt, len;

            // 注意: 只取那些有 for 属性的 label
            if (!area) return;

            // label 的父元素设置为 relative
            prt = lab.parent();
            if (prt.css(POSITION) !== RELATIVE) {
                prt.css({ position: RELATIVE });
            }

            lab.css({
                position : ABSOLUTE,
                // 默认把 label 移入输入框
                left : position[0] + PX,
                top : position[1] + PX,
                zIndex : self.get('zIndex')
            });
            blurStyle && lab.css(blurStyle);

            // 输入框有值时, 把 label 移出输入框
            len = S.trim(area.val()).length;
            if ( len > 0) {
                self._css(lab);// or self._anim(lab);
            }

            // 绑定事件
            self._bindUI(area, lab);
        });
    },

    /**
     * 绑定 focusin/focusout 事件
     * @param {Node} area
     * @param {Node} lab
     * @private
     */
    _bindUI: function(area, lab) {
        var self = this;

        area.on('focusin', function() {
            var len = S.trim(area.val()).length;

            if (!len) {
                self._anim(lab);
            }
        }).on('focusout', function() {
            var len = S.trim(area.val()).length;

            if (!len) {
                self._anim(lab, true);
            }
        });
    },

    /**
     * @param {Node} lab
     * @parem {boolean} isDefault
     * @private
     */
    _anim: function(lab, isDefault) {
        this._change('animate', lab, isDefault);
    },

    /**
     * @param {Node} lab
     * @parem {boolean} isDefault
     * @private
     */
    _css: function(lab, isDefault) {
        this._change('css', lab, isDefault);
    },

    /**
     * 输入区域是否有值, 对应改变 label 所在位置
     * @param {string} fn 'css' or 'animate'
     * @param {Node} lab
     * @param {boolean} isDefault 为 true 时, 表示没有值, 移入, 为 false, 表示有值, 移开
     * @private
     */
    _change: function(fn, lab, isDefault) {
        var self = this,
            //axis = self.get('axis'),
            position = self.get(POSITION),
            blurStyle = self.get(BLUR_STYLE),
            focusStyle = self.get(FOCUS_STYLE),
            duration = self.get('duration'),
            offset = self.get('offset');
        //if (axis == X) {
            lab[fn](S.merge({
                left: (isDefault ? position[0] : -lab.width() - offset) + PX
            }, isDefault ? blurStyle : focusStyle), duration);
        /*}
        else if (axis == Y) {
            lab[fn](S.merge({
                top: (isDefault ? position[1] : -lab.height() - offset) + PX
            }, isDefault ? blurStyle : focusStyle), duration);
        }*/
    }
});