为In Place Editor添加ondblclick事件

上周忙着做其它的项目了,暂时没有时间实践了。
今天忙里偷闲,终于又有机会可以是实践一下了,真是开心啊。
下面我就讲讲如何为In Place Editor添加自定义事件
首先Rails中集成的Script.aculo.us支持的js都在

public/javascripts/controls.js

这个文件中。

找到该文件并且在文件中查找AJAX in-place editor
你会发现定义如下js对象
Ajax.InPlaceEditor = Class.create();
Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";
Ajax.InPlaceEditor.prototype = {
  initialize: function(element, url, options) {

里面有很多的属性,相信大家在使用Rails的inplaceeditor时候对照看一个也能知道个大概。
接下来我就给它的属性中添加一个
 doubleClickEdit:false,

并且对应该属性作如下处理

if(this.options.doubleClickEdit)
{
    Event.observe(this.element, 'dblclick', this.onclickListener);
}
else
{
   Event.observe(this.element, 'click', this.onclickListener);
}


以上代码直接利用Script.aculo.us中的Event.observe方法动态的给InPlaceEditor 添加事件。

在生成InPlaceEditor 的时候直接加上doubleClickEdit属性的定义
  def editable_content_href(options)
    options[:content] = { :element => 'span' }.merge(options[:content])
    options[:ajax] = {
    :onComplete => "function(){ iframeResize(); } ",
    :doubleClickEdit => true,
    :evalScripts=>true,:okText => "'Save'", 
    :cancelText => "'Cancel'",:submitOnBlur => true,
    :okButton => false,:cancelLink => false,
    :highlightcolor=>"''"}.merge(options[:ajax] || {})
    script = Array.new
    script << "new Ajax.InPlaceEditor("
    script << "  '#{options[:content][:options][:id]}',"
    script << "  '#{options[:url]}?_method=put',"
    script << "  {"
    script << options[:ajax].map{ |key, value| "#{key.to_s}: #{value}" }.join(", ")
    script << "  }"
    script << ")"
    
    javascript_tag( script.join("\n") )
  end


以上就为InPlaceEditor定义了ondblclick事件,其他的事件各位可以各取所需,自由定义了。

有什么不对的地方请大家支持,欢迎大家和偶一起讨论实践RoR过程中的心得,一起进步。

你可能感兴趣的:(JavaScript,Ajax,prototype,Rails)