上周忙着做其它的项目了,暂时没有时间实践了。
今天忙里偷闲,终于又有机会可以是实践一下了,真是开心啊。
下面我就讲讲如何为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过程中的心得,一起进步。
分享到:
相关推荐
最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick;这时我们需要对2个事件的处理函数稍作处理就可以实现2个...
在这个特定的场景中,我们关注的是如何为DataGrid的每一行添加双击事件,以便在用户双击某一行时触发特定的操作,如弹出删除确认对话框。以下是对这一主题的详细解释。 首先,我们需要了解的是在ASP.NET中,...
例如,在图片上添加 ondblclick 事件,可以在双击图片时执行某些操作。 onfocus 事件 onfocus 事件是在表单元素中,当元素获得焦点时执行的事件。例如,在输入框中,当焦点移到输入框时,onfocus 事件将被触发。 ...
最后,通过闭包(IIFE)解决循环中变量共享问题,实现为每个节点绑定带有不同参数的事件处理函数。 这种技术不仅能够提升网页的交互性,还能够根据用户的操作来动态地改变网页元素的样式或内容。在实际应用中,这...
在 JavaScript 中,我们可以使用 onclick 事件来响应鼠标单击事件,ondblclick 事件来响应鼠标双击事件,onmouseover 事件来响应鼠标悬停事件等。 例如,我们可以使用 onclick 事件来响应鼠标单击事件,如下所示: ...
2. **事件监听器**:为对象添加以下事件监听器: - `onmousedown`:当鼠标按钮被按下时触发,设置`eventIdx`为0,并启动定时器来判断是否需要触发`mousedown`事件。 - `ondragstart`:当元素开始被拖动时触发,...
JavaScript事件模型是前端开发中处理用户交互的核心机制之一,主要包括了事件捕获、目标阶段和事件冒泡三个阶段,这个模型被广泛地理解为0-1-2级模型。 在描述中,文档内容被OCR扫描识别出的文字带有部分错误,但是...
除了上述事件外,还有许多其他的事件,例如:ondblclick、onkeypress、onkeydown、onkeyup等。 页面相关事件 页面相关事件包括:onabort、onbeforeunload、onerror、onmove、onresize、onscroll、onstop等。 表单...
在JavaScript中,我们通常通过为HTML元素添加事件监听器来响应这些事件。例如,以下代码展示了如何监听输入框`<input>`的`change`事件: ```html <!DOCTYPE html> <title>HTML文件 window.onload = ...
因此,我们需要一种方式来跟踪和管理这些事件,如使用一个特殊的属性(如`__EventHandles`)来存储事件处理函数,并为每个函数分配唯一的标识。 总的来说,JavaScript事件模型包括事件的定义、监听、触发和处理,...
在处理这两个事件时,可能会遇到这样的情况:当用户进行双击操作时,首先会触发`onclick`事件,然后如果满足双击条件,则会触发`ondblclick`事件。如果点击速度较慢,可能会连续触发多次`onclick`事件而不触发`...
- **DOM0级方式**:通过JavaScript直接访问元素并为其添加事件处理函数,如`btn.onclick = function() { alert(1); }`。这种方式的一个问题是,如果多次赋值,后面的事件处理函数会覆盖前面的。 - **DOM2级方式**...
4. **鼠标事件**:鼠标事件涉及鼠标与页面元素的交互,如`onclick`、`ondblclick`、`onmouseover`等。例如,`onclick`在用户点击元素时执行,`onmousemove`则在鼠标移动时触发,可以用来实现鼠标悬停效果。 5. **...
JavaScript事件是编程中的一种重要机制,它允许程序对用户的交互做出响应。JavaScript是基于对象的语言...理解并熟练应用这些事件是创建交互式网页的关键,它们为用户提供了一种与网页进行沟通的方式,提高了用户体验。
- 用户事件:这些事件由用户的交互行为触发,例如 OnClick(鼠标单击)、OnKeyPress(键盘按键)和OnDblClick(鼠标双击)。例如,当用户点击按钮或按下具有焦点的控件的空格键时,会触发OnClick事件。 - 系统事件...
在服务器端的`Page_Load`事件处理程序中,我们给`ListBox`控件添加了一个`ondblclick`客户端事件,该事件在用户双击`ListBox`项时触发,并调用前面定义的JavaScript函数`JsListChangeItem`。 综上所述,这个示例...
Fixed : Issue with OnClick / OnDblClick in instrumentation components Fixed : Issue with scrolling and selecting value in iOS in TTMSFMXSpinner Fixed : Issue with escape key not cancelling edit ...
- `OnDblClick`: 双击事件,当鼠标快速连续两次单击同一位置时触发。 2. **TMemo和TEdit等控件的鼠标事件** - 这些控件通常不直接支持OnMouseDown、OnMouseMove和OnMouseUp事件,但可以通过设置`AcceptsControls`...
TMS Component Pack v9.2.4.0 Full...在TAdvOfficeRadioButton中添加了OnDblClick事件 添加了OnPrintPageTopBottomSize事件以在TAdvStringGrid中动态更改每页的页眉和页脚大小 支持在THTMLHint中使用新的虚拟映像列表