对prototype.js进行的扩展


最近的项目中要使用ajax,于是对各种ajaxframework在进行比较之后,最终选择了prototype.js,由于prototype.js是一个非常基础的ajaxframework,需要根据项目需求自己来进行一些扩展,下面就是我所做的一些扩展,如有误,请指正! 

  我实现了一个Form.Element.ValidationObserver,这个类需要依赖Validation.js以及相应的css(validation-advice),该类是对表单中的单个元素通过ajax结合后台进行验证,其中因为无法实现对Validation.js进行重用,所以copy了其中的一些代码,我实在想不到更好的办法,如果有哪位有更好的做法,不吝赐教! 

/* 
*对Form.Element进行扩展 
*/ 
Object.extend(Form.Element,{ 
 /* 
 *使指定的element不可用 
 */ 
 disable:function(element){ 
  element=$(element); 
  element.disabled=’true’; 
 }, /* 
 *使指定的element可用 
 */ 
 enable:function(element){ 
  element=$(element); 
  element.disabled=’’; 
 }, /* 
 *判断值是否为空 
 */ 
 empty:function(element){ 
   returnthis.getValue(element).match(/^s*$/); 
 }, /* 
 *判断值是否不为空 
 */ 
 notEmpty:function(element){ 
   return!this.empty(element); 
  } 
});/* 
*对Element进行扩展 
*/ 
Object.extend(Element,{ 
 /* 
 *以块状显示指定的element 
 */ 
 block:function(){ 
  for(vari=0;i<arguments.length;i++){ 
   varelement=$(arguments[i]); 
   element.style.display=’block’; 
  } 
 } 
});/* 

*验证观察者,用来实现对指定字段进行验证 

  *复写Abstract.EventObserver.initialize(),在回调函数中通过ajax发送消息进行后台验证 

  */ 

Form.Element.ValidationObserver=Class.create(); 
Object.extend(Object.extend(Form.Element.ValidationObserver.prototype,Form.Element.EventObserver.prototype),{ 
 /* 
 *对Form.Element.EventObserver.initialize进行的修改,将要注册的验证回调函数设置为创建ajax验证请求 
 *element为需要验证的元素 
 *url为ajax要发送请求的地址 
 *parameterCallback为取得验证参数的回调函数 
 *使用方法: 
 *newForm.Element.ValidationObserver("pol", 
      "http://localhost:8080/agreement/ValidatePol";, 
      function(){returnForm.Element.serialize("pol");}); 
 */ 
 initialize:function(element,url,parameterCallback){ 
  this.element =$(element); 
  this.callback=function(element,value){ 
    newAjax.Validator(element,url,{parameters:parameterCallback()}); 
  }  this.lastValue=this.getValue(); 
  this.registerCallback(this.element); } 
})/* 
*新增通过Ajax进行验证类 
*借鉴Validation验证类 
*/  
Ajax.Validator=Class.create();  
Object.extend(Object.extend(Ajax.Validator.prototype,Ajax.Request.prototype),{ 
  initialize:function(validated,url,options){ 
  this.element=$(validated);  this.transport=Ajax.getTransport(); 
  this.setOptions(options);  varonComplete=this.options.onComplete||Prototype.emptyFunction; 
  this.options.onComplete=(function(transport,object){ 
   this.updateContent(); 
   onComplete(transport,object); 
  }).bind(this);  this.request(url); 
 },

/* 

  *根据后台返回的结果,如果返回responseText为空则表示验证通过,不显示出错信息 

  *否则将返回responseText作为出错信息显示 

  */ 

 updateContent:function(){ 
  varresponse=this.transport.responseText;  if(!this.options.evalScripts) 
   response=response.stripScripts();  varid=’advice-’+this.element.id; 
  varprop=’__advice’; 
  if(Validation.isVisible(this.element)&&!response==""){ 
    if(!this.element[prop]){ 
      varadvice=document.createElement(’div’); 
      advice.appendChild(document.createTextNode(response)); 
      advice.className=’validation-advice’; 
      advice.id=id; 
      advice.style.display=’none’; 
      this.element.parentNode.insertBefore(advice,this.element.nextSibling); 
      if(typeofEffect==’undefined’){ 
        advice.style.display=’block’; 
      }else{ 
        newEffect.Appear(advice.id,{duration:1}); 
      } 
    } 
    this.element[prop]=true; 
  }else{ 
    try{ 
      $(id).remove(); 
    }catch(e){} 
    this.element[prop]=’’; 
  } 
 } 
})



相关阅读:
在命令行下运行PHP脚本[带参数]的方法
比较详细的javascript DOM 学习笔记
insert into tbl() select * from tb2中加入多个条件
极大的改善网站的性能的10个PHP技巧
VBS教程:函数-LoadPicture 函数
ASP.NET教程:数据缓存和输出缓存
Oracle学习教程
用bat实现的自动关机的代码
安装Oracle RAC使用NFS作为共享存储
拥抱模块化的JavaScript
下拉菜单
取消微软签名认证讨厌的警告对话框
JavaScript 动态创建VML的方法
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
快速导航

Copyright © 2016 phpStudy |