中国第一Ajax站长门户:www.okajax.com   虚拟主机 域名注册 云主机

对prototype.js进行的扩展 - okajax.com - Ajax中国

我要投稿 会员登陆 RSS订阅 本站推荐:
您的位置主页 > Ajax技术 > Ajax框架学习 > prototype.js > 对prototype.js进行的扩展

对prototype.js进行的扩展

2008-06-24    文章来源:互联网    浏览次数:

最近的项目中要使用ajax, 于是对各种ajax framework在进行比较之后,最终选择了prototype.js, 由于prototype.js是一个非常基础的ajax framework, 需要根据项目需求自己来进行一些扩展, 下面就是我所做的一些扩展, 如有误, 请指正! 
我实现了一个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){ 
      return this.getValue(element).match(/^s*$/); 
  },  /* 
   * 判断值是否不为空 
   */ 
  notEmpty: function(element){ 
      return !this.empty(element); 
    } 
});/* 
 * 对Element进行扩展 
 */ 
Object.extend(Element, { 
  /* 
   * 以块状显示指定的element 
   */ 
  block: function(){ 
    for (var i = 0; i < arguments.length; i++) { 
      var element = $(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 为取得验证参数的回调函数 
   * 使用方法: 
   * new Form.Element.ValidationObserver("pol",  
            "
http://localhost:8080/agreement/ValidatePol";,  
            function(){return Form.Element.serialize("pol");}); 
   */ 
  initialize: function(element, url, parameterCallback) { 
    this.element  = $(element); 
    this.callback = function(element, value){ 
        new Ajax.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);    var onComplete = 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() { 
    var response = this.transport.responseText;    if (!this.options.evalScripts) 
      response = response.stripScripts();    var id = ’advice-’ + this.element.id; 
    var prop = ’__advice’; 
    if(Validation.isVisible(this.element) && !response == "") { 
        if(!this.element[prop]) { 
            var advice = 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(typeof Effect == ’undefined’) { 
                advice.style.display = ’block’; 
            } else { 
                new Effect.Appear(advice.id, {duration : 1 }); 
            } 
        } 
        this.element[prop] = true; 
    } else { 
        try { 
            $(id).remove(); 
        } catch(e) {} 
        this.element[prop] = ’’; 
    } 
  } 
})

文章评论(查看全部)

看不清楚?单击换一张。
loading.. 评论加载中....
关于我们 - 广告服务 - 版权隐私 - 免责声明 - RSS地图 - 网站地图 - 使用帮助 - 返回顶部