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结构约定
http://dl.iteye.com/upload/attachment/187596/be943b20-c627-3336-b1d7-9f20cde7fabc.jpg
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 = ; } for(var i=0;i<values.length;i++){ if(codeValue==values){ 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').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);
页:
[1]