YOUI组件库之filed组件构建思路

一、YOUI组件库通用约定

1、遵循jQuery官方UI组件库的模式，依赖jquery.js(1.3.2),ui.core.js(1.7.2)

2、约定使用initHtml参数决定是否初始化静态html

3、约定使用_defaulHtmls方法执行静态html的初始化

4、约定使用_initAction方法初始化动作相关的操作

5、约定使用div元素作为组件的载体

 

二、Field组件的通用约定

1、所有的field组件都需要extend 自 $.youi.field，一般情况下使用如下代码组件化

       $.widget("youi.fieldText",$.extend({},$.youi.field,{......});

2、field结构约定

  field相关的抽象对象  

     $.youi.field                  所有field组件的需要extend的对象

     $.youi.fieldSource       带数据的类型的field组件需要extend的对象，通过parents数组参数实现父子联动

     $.youi.fieldPop            下拉类型的field组件需要extend的对象，已经extend 自 $.youi.fieldSource

 

3、field组件公共访问方法

        getValue             获得field组件值，返回单值或者值数组

        setValue(value)  设置field组件值，value可以是单值或者值数组

        getText               获得显示文本

        focus                   聚焦field组件

        clear                    清空

        reset                   重置（根据defaultValue决定调用 setValue或者clear）

        validate               校验

4、通过样式和field div元素的样式来展示校验信息，validate-error样式表示校验不通过，validate-success样式表示校验通过,通过title属性存储校验的输出信息,fieldText组件中使用validating样式表示ajax校验中。

 

fieldSelect示例：

      

 

/**
 * field组件
 * Copyright (c) 2009 zhouyi
 * licenses
 * doc 
 */
(function($) {
    var _log = $.youi.log;
    /**
     * fieldSelect组件
     * 
     */
    $.widget("youi.fieldSelect",$.extend({},
        $.youi.field,//field
        $.youi.fieldPop,{//fieldPop继承了fieldSource
        /**
         * fieldSelect的个性初始化
         * 1、调用约定的fieldSource组件的初始化方法_initSource
         */
        _initField:function(){
            this._initSource();
        },
        
        /**
         * 回调函数，返回record解析成的html
         */
        _parseRecord:function(index,record,options){
            var htmls = [],
                codeValue = record.code,
                showValue = record.show,
                itemClasses = ['option-item'];
            var selectedValue = options.selectedValue;
            if(selectedValue!=null){//已选值处理
                var values= [];
                if($.isArray(selectedValue)){
                    values = selectedValue;
                }else{
                    values = [selectedValue];
                }
                for(var i=0;i<values.length;i++){
                    if(codeValue==values[i]){
                        itemClasses.push('selected');
                        options.selectedTexts.push(showValue);//选值对应的文本加入约定的参数selectedTexts中
                        break;
                    }
                }
            }
            htmls.push('<div value="'+codeValue+'" class="'+itemClasses.join(' ')+'">'+showValue+'</div>');
            return htmls.join('');
        },
        /**
         * 空记录的html
         */
        _nullItemHtml:function(){
            return '<div class="option-item"></div>';
        },
        /**
         * 获得存放数据的容器的id
         */
        _getDatasContextId:function(){
            return this._getPanelId();//fieldSelect组件的数据panel和popPanel一致
        },
        
        /**
         * 初始化panel的动作
         */
        _initPanelAction:function(){
            this._getPopPanel()
                .mousedown(function(event){event.stopPropagation();})//阻止冒泡
                .bind('click',function(event){
                    var eventClass = $.youi.eventUtil.getEventClass(event);//option-item;
                    if(eventClass=='option-item'){
                        var fieldId = this.getAttribute('fieldId');
                        $.youi.fieldUtil.execMethod($('#'+fieldId),'setValue',event.target.getAttribute('value'));
                        $.youi.fieldUtil.execMethod($('#'+fieldId),'_closePanel');
                    }
                }
            );
        },
        /**
         * 设置值
         */
        setValue:function(value){
            this.element.find('input.value').val(value);
            //设置文本
            if(!this._isLoaded()){//如果没有加载数据
                this._datasLoader();//加载数据
            }else{//已经加载了数据
                var text = this._getPopPanel().find('.option-item[value='+value+']').text();
                this.setText(text);
                this._resetChildren();
            }
        },
        /**
         * 获得值
         */
        getValue:function(){
            return this.element.find('input.value').val();
        },
        /**
         * 设置显示值
         */
        setText:function(text){
            this.element.find('input.textInput').val(text);
        },
        /**
         * 获得显示值
         */
        getText:function(){
            return this.element.find('input.textInput').val();
        },
        
        clear:function(){
            this.element.find('input.textInput,input.value').val("");
        },
        
        focus:function(){
            //TODO
        }
    }));
    
    $.extend($.youi.fieldSelect,{
        defaults:$.extend({},$.youi.fieldPopDefaults,{
            
        })
    });
})(jQuery);