1 /**
  2  *
  3  * 表单组件
  4  *
  5  * @fileOverView 表单
  6  * @author  <a href="mailto:chenzheng.carl@snda.com">CarlChen</a>
  7  * @date    2012-10-24
  8  */
  9 define(["core","component/autocomplete"], function() {
 10 
 11     /**
 12      * 表单
 13      *
 14      * @lends $we.widget.Form
 15      */
 16     $we.widget.reg("Form", {
 17         /**
 18          * 表单接口
 19          *
 20          * @memberOf $we.widget.Form-
 21          */
 22         interfaces: {
 23             /**
 24              * 验证表单
 25              * @memberOf $we.widget.Form-
 26              */
 27             valid: function(ele) {
 28                 ele = ele || this.container;
 29                 if(typeof ele == 'string') {
 30                     ele = this.getElement(ele);
 31                 }
 32                 return $we.utils.validForm(ele);
 33             },
 34 
 35             /**
 36              * 显示错误
 37              * @param name
 38              * @param message
 39              * @memberOf $we.widget.Form-
 40              */
 41             showError: function(name, message) {
 42                 this.container.find('.tip_' + name).html('<p class="we_cell_error_tips"><i class="we_icon_error"></i>' + message + '</p>');
 43             },
 44 
 45             /**
 46              * 显示成功信息
 47              *
 48              * @memberOf $we.widget.Form-
 49              *
 50              */
 51             showSuccess: function(name, message) {
 52                 this.container.find('.tip_' + name).html('<p class="we_cell_suc_tips"><i class="we_icon_suc"></i>' + message + '</p>');
 53             },
 54 
 55             /**
 56              * 显示警告信息
 57              */
 58             showWarm: function(name, message) {
 59                 this.container.find('.tip_' + name).html('<p class="we_cell_alert_tips"><i class="we_icon_alert"></i>' + message + '</p>');
 60             },
 61 
 62             /**
 63              *  显示警告信息
 64              */
 65             showInfo: function(name, message) {
 66                 this.container.find('.tip_' + name).html('<p class="we_cell_info_tips">' + message + '</p>');
 67             },
 68 
 69             /**
 70              * 显示HTML
 71              * @param  {[type]} name [description]
 72              * @param  {[type]} html [description]
 73              * @return {[type]}      [description]
 74              */
 75             showHtml: function(name, html) {
 76                 this.container.find('.tip_' + name).html(html);
 77             },
 78 
 79             /**
 80              * 清楚Tip
 81              * @param name
 82              * @memberOf $we.widget.Form-
 83              */
 84             clearTip: function(name) {
 85                 this.container.find('.tip_' + name).html('');
 86             },
 87 
 88             /**
 89              * 获取数据
 90              * @param name
 91              * @memberOf $we.widget.Form-
 92              */
 93             getValue: function(name) {
 94                 return this.container.find("[name='" + name + "']").val();
 95             },
 96 
 97             /**
 98              * 设置数据
 99              * @param name
100              * @param value
101              * @memberOf $we.widget.Form-
102              */
103             setValue: function(name, value) {
104                 this.container.find("[name='" + name + "']").val(value);
105             },
106 
107             /**
108              * 清空
109              * @param  {[type]} name [description]
110              * @return {[type]}      [description]
111              */
112             clear: function(name) {
113                 this.container.find("[name='" + name + "']").val('');
114                 this.clearTip(name);
115             },
116 
117             /**
118              * 清空所有
119              * @return {[type]} [description]
120              */
121             clearAll: function() {
122                 var t = this;
123                 var eleConfigs = this.eleConfigs;
124                 if(eleConfigs) {
125                     $.each(eleConfigs, function(i, config) {
126                         var name = config['name'];
127                         t.clear(name);
128                     });
129                 }
130             },
131 
132             /**
133              * 组装表单
134              *
135              * Config
136              *
137              * form_elements <br/>
138              * id
139              * label
140              * name
141              * expression
142              * value:默认值
143              * type 默认为text
144              * events 验证合法性事件
145              * click 点击事件
146              * require 必填，默认为false
147              * error    失败消息(如果不传，则默认验证失败消息)
148              * success  成功
149              * info 显示信息
150              *
151              * append 是否追加元素 <br/>
152              * title  表单标题
153              */
154             _assemble: function(container, config) {
155                 var t = this;
156                 config = config || {};
157                 container = $(container);
158 
159                 var containerId = null;
160                 if(config['append']) {
161                     containerId = container.attr('containerId');
162                 } else {
163                     containerId = '_we_form_' + new Date().getTime();
164                     container.attr('containerId', containerId);
165                 }
166                 var eleConfigs = config['form_elements'];
167                 if(eleConfigs && eleConfigs.length > 0) {
168                     if(!config['append']) {
169                         container.empty();
170                     }
171                     if(config['title']) {
172                         container.append('<div class="we_item we_ml130">' + config['title'] + '</div>');
173                     }
174                     $.each(eleConfigs, function(i, conf) {
175                         var id = conf['id'] || '';
176                         var label = conf['label'] || '';
177                         var type = conf['type'] || 'text';
178                         var expression = conf['expression'] || '';
179                         var name = conf['name'] || '';
180                         var events = conf['events'] || null;
181                         var click = conf['click'] || null;
182                         var value = conf['value'] || '';
183                         var require = conf['require'] || false;
184                         var error = conf['error'] || '';
185                         var success = conf['success'] || '';
186                         var info = conf['info'] || '';
187                         var placeholder = conf['placeholder'] || null;
188 
189                         var html = [];
190                         html.push('<div class="we_item">');
191                         html.push('<label class="we_title">');
192                         if(require) {
193                             html.push('<span class="we_star">*</span>');
194                         }
195                         html.push(label + '：</label>');
196                         html.push('<div class="we_input_container">');
197                         if(type == 'text' || type == 'password' || type == 'autocomplete') {
198                             html.push('<input type="' + type + '" class="we_input we_input_focus" ' + ' error="' + error + '" success="' + success + '" require="' + require + '" value="' + value + '" label="' + label + '" name="' + name + '"/>');
199                         } else if(type == 'content') {
200                             html.push(value);
201                         } else if(type == 'hidden') {
202                             html.push('<input type="hidden" value="' + value + '" name="' + name + '"/>');
203                         } else if(type == 'button') {
204                             html.push('<input type="button" class="we_get_code_btn" value="' + value + '" name="' + name + '"/>');
205                         }
206                         html.push('</div>');
207                         html.push('<div class="we_tips_box tip_' + name + '">');
208                         html.push('</div>');
209                         html.push('</div>');
210                         container.append(html.join(''));
211 
212                         var target = container.find('input:last');
213                         target.attr('container', containerId);
214                         if(id.length > 0) {
215                             target.attr('id', id);
216                         }
217                         if(type == 'text' || type == 'password' || type == 'autocomplete') {
218                             target[0].expression = expression;
219                             if(placeholder) {
220                                 target.attr("placeholder", placeholder);
221                             }
222 
223                             var checkContent = function() {
224                                     /*
225                                         var v = target.val();
226                                         if(v.length>0){
227                                             if(!target.hasClass('we_input_focus')){
228                                                 target.addClass('we_input_focus');
229                                             }
230                                         }else{
231                                             target.removeClass('we_input_focus');
232                                         }
233                                         */
234                                 };
235 
236                             //检查内容是否要高亮
237                             checkContent();
238                             target.keyup(function() {
239                                 checkContent();
240                             });
241 
242                             //自定义事件
243                             if(events) {
244                                 var es = events.split(',');
245                                 $.each(es, function(i, eName) {
246                                     target.bind(eName, function() {
247                                         $we.utils.validForm(target);
248                                     });
249                                 });
250                             }
251 
252                             if(info.length > 0) {
253                                 //兼容IE6的做法。。。。无力吐槽。。。。
254                                 setTimeout(function() {
255                                     t.showInfo(name, info);
256                                 }, 0);
257                             }
258                         }
259                         if(type == 'autocomplete') {
260                             var acConfig = conf['acConfig'];
261                             if(config['commit']) {
262                                 acConfig['commit'] = config['commit'];
263                             }
264                             $we.widget.add('Autocomplete', target, acConfig);
265                         }
266                         if(type == 'button' && click) {
267                             target.click(function() {
268                                 click.call(this, target);
269                             });
270                         }
271                     });
272                 }
273             },
274 
275             /**
276              * 组装表单
277              * @param config
278              * @memberOf $we.widget.Form-
279              */
280             assemble: function(config) {
281                 var t = this;
282                 config = config || this.config;
283                 this._assemble(this.container, config);
284 
285                 var eleConfigs = config['form_elements'];
286                 if(eleConfigs) {
287                     $.each(eleConfigs, function(i, c) {
288                         t.eleConfigs.push(c);
289                     });
290                 }
291 
292                 var commit = this.commit;
293                 if(commit) {
294                     // var elements=this.getElements(this.container);
295                     var elements = this.container.find('input[type="text"],input[type="password"]');
296                     var _commit = function(e) {
297                             if(e.keyCode == 13) {
298                                 commit();
299                             }
300                         };
301                     $.each(elements, function(i, input) {
302                         $(input).off("keyup", _commit);
303                         $(input).on("keyup", _commit);
304                     });
305                 }
306             },
307 
308             /**
309              * 获取表单元素列表
310              *
311              * @param container
312              * @memberOf $we.widget.Form-
313              */
314             getElements: function(container) {
315                 var elements = [];
316                 var isFormTag = _isFormTag(container[0].tagName);
317 
318                 if(isFormTag) {
319                     elements.push(container);
320                 } else {
321                     $.each(FORM_Tag, function(i, t) {
322                         var _t = container.find(t);
323                         if(_t && _t.length > 0) {
324                             $.each(_t, function(i, e) {
325                                 elements.push(e);
326                             })
327                         }
328                     });
329                 }
330                 return elements;
331             },
332 
333             /**
334              * 获取表单元素
335              *
336              * @param name
337              */
338             getElement: function(name) {
339                 return this.container.find('*').filter(function() {
340                     return $(this).attr('name') == name;
341                 });
342             }
343         },
344 
345         /**
346          * 事件
347          *
348          * @memberOf $we.widget.Form-
349          */
350         events: {},
351 
352         /**
353          *  Config配置说明 <br/>
354          *
355          *  eleConfigs:元素配置列表
356          *
357          * @param container 表单容器
358          * @param config    表单配置
359          *        commit    提交函数
360          * @constructs
361          */
362         init: function(container, config) {
363             config = config || {};
364             this.container = $(container);
365             this.config = config;
366 
367             var commit = config['commit'];
368             if(commit) {
369                 this.commit = commit;
370             }
371             this.eleConfigs = [];
372             this.assemble(config);
373         },
374 
375         /**
376          * Run
377          */
378         run: function() {}
379     });
380 
381     return $we.widget.amd("Form");
382 });