上周忙着做其它的项目了,暂时没有时间实践了。
今天忙里偷闲,终于又有机会可以是实践一下了,真是开心啊。
下面我就讲讲如何为In Place Editor添加自定义事件
首先Rails中集成的Script.aculo.us支持的js都在
[code]
public/javascripts/controls.js
[/code]
这个文件中。
找到该文件并且在文件中查找AJAX in-place editor
你会发现定义如下js对象
[code]
Ajax.InPlaceEditor = Class.create();
Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";
Ajax.InPlaceEditor.prototype = {
initialize: function(element, url, options) {
[/code]
里面有很多的属性,相信大家在使用Rails的inplaceeditor时候对照看一个也能知道个大概。
接下来我就给它的属性中添加一个
[code]
doubleClickEdit:false,
[/code]
并且对应该属性作如下处理
[code]
if(this.options.doubleClickEdit)
{
Event.observe(this.element, 'dblclick', this.onclickListener);
}
else
{
Event.observe(this.element, 'click', this.onclickListener);
}
[/code]
以上代码直接利用Script.aculo.us中的Event.observe方法动态的给InPlaceEditor 添加事件。
在生成InPlaceEditor 的时候直接加上doubleClickEdit属性的定义
[code]
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
[/code]
以上就为InPlaceEditor定义了ondblclick事件,其他的事件各位可以各取所需,自由定义了。
有什么不对的地方请大家支持,欢迎大家和偶一起讨论实践RoR过程中的心得,一起进步。
今天忙里偷闲,终于又有机会可以是实践一下了,真是开心啊。
下面我就讲讲如何为In Place Editor添加自定义事件
首先Rails中集成的Script.aculo.us支持的js都在
[code]
public/javascripts/controls.js
[/code]
这个文件中。
找到该文件并且在文件中查找AJAX in-place editor
你会发现定义如下js对象
[code]
Ajax.InPlaceEditor = Class.create();
Ajax.InPlaceEditor.defaultHighlightColor = "#FFFF99";
Ajax.InPlaceEditor.prototype = {
initialize: function(element, url, options) {
[/code]
里面有很多的属性,相信大家在使用Rails的inplaceeditor时候对照看一个也能知道个大概。
接下来我就给它的属性中添加一个
[code]
doubleClickEdit:false,
[/code]
并且对应该属性作如下处理
[code]
if(this.options.doubleClickEdit)
{
Event.observe(this.element, 'dblclick', this.onclickListener);
}
else
{
Event.observe(this.element, 'click', this.onclickListener);
}
[/code]
以上代码直接利用Script.aculo.us中的Event.observe方法动态的给InPlaceEditor 添加事件。
在生成InPlaceEditor 的时候直接加上doubleClickEdit属性的定义
[code]
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
[/code]
以上就为InPlaceEditor定义了ondblclick事件,其他的事件各位可以各取所需,自由定义了。
有什么不对的地方请大家支持,欢迎大家和偶一起讨论实践RoR过程中的心得,一起进步。