2007-06-26

为In Place Editor添加ondblclick事件

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

public/javascripts/controls.js

这个文件中。

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

里面有很多的属性，相信大家在使用Ｒａｉｌｓ的ｉｎｐｌａｃｅｅｄｉｔｏｒ时候对照看一个也能知道个大概。
接下来我就给它的属性中添加一个 
 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定义了ｏｎｄｂｌｃｌｉｃｋ事件，其他的事件各位可以各取所需，自由定义了。

有什么不对的地方请大家支持，欢迎大家和偶一起讨论实践ＲｏＲ过程中的心得，一起进步。
评论
发表评论

您还没有登录，请登录后发表评论

myoldman
  • 浏览: 7966 次
  • 性别: Icon_minigender_1
  • 来自: 福建福州
  • 详细资料
搜索本博客
存档
最新评论