`
myoldman
  • 浏览: 84978 次
  • 性别: Icon_minigender_1
  • 来自: 福建福州
最近访客 更多访客>>
社区版块
存档分类
最新评论

为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过程中的心得,一起进步。
分享到:
评论

相关推荐

    JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法

    最近项目中遇到了在同一DOM元素上需要添加 onclick 和 ondblclick 2个事件,如果按照正常的方式添加处理,结果发现只会执行 onclick,而不会执行 ondblclick;这时我们需要对2个事件的处理函数稍作处理就可以实现2个...

    C#实现给DataGrid单元行添加双击事件的方法

    在这个特定的场景中,我们关注的是如何为DataGrid的每一行添加双击事件,以便在用户双击某一行时触发特定的操作,如弹出删除确认对话框。以下是对这一主题的详细解释。 首先,我们需要了解的是在ASP.NET中,...

    javaScript常用事件命令

    例如,在图片上添加 ondblclick 事件,可以在双击图片时执行某些操作。 onfocus 事件 onfocus 事件是在表单元素中,当元素获得焦点时执行的事件。例如,在输入框中,当焦点移到输入框时,onfocus 事件将被触发。 ...

    JavaScript给每一个li节点绑定点击事件的实现方法

    最后,通过闭包(IIFE)解决循环中变量共享问题,实现为每个节点绑定带有不同参数的事件处理函数。 这种技术不仅能够提升网页的交互性,还能够根据用户的操作来动态地改变网页元素的样式或内容。在实际应用中,这...

    实验项目二十二  javascript事件处理.doc

    在 JavaScript 中,我们可以使用 onclick 事件来响应鼠标单击事件,ondblclick 事件来响应鼠标双击事件,onmouseover 事件来响应鼠标悬停事件等。 例如,我们可以使用 onclick 事件来响应鼠标单击事件,如下所示: ...

    js解决事件冲突

    2. **事件监听器**:为对象添加以下事件监听器: - `onmousedown`:当鼠标按钮被按下时触发,设置`eventIdx`为0,并启动定时器来判断是否需要触发`mousedown`事件。 - `ondragstart`:当元素开始被拖动时触发,...

    js事件详解-0-1-2级模型.pdf

    JavaScript事件模型是前端开发中处理用户交互的核心机制之一,主要包括了事件捕获、目标阶段和事件冒泡三个阶段,这个模型被广泛地理解为0-1-2级模型。 在描述中,文档内容被OCR扫描识别出的文字带有部分错误,但是...

    JavaScript触发事件列表

    除了上述事件外,还有许多其他的事件,例如:ondblclick、onkeypress、onkeydown、onkeyup等。 页面相关事件 页面相关事件包括:onabort、onbeforeunload、onerror、onmove、onresize、onscroll、onstop等。 表单...

    JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

    在JavaScript中,我们通常通过为HTML元素添加事件监听器来响应这些事件。例如,以下代码展示了如何监听输入框`&lt;input&gt;`的`change`事件: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;HTML文件 window.onload = ...

    js事件模型

    因此,我们需要一种方式来跟踪和管理这些事件,如使用一个特殊的属性(如`__EventHandles`)来存储事件处理函数,并为每个函数分配唯一的标识。 总的来说,JavaScript事件模型包括事件的定义、监听、触发和处理,...

    javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

    在处理这两个事件时,可能会遇到这样的情况:当用户进行双击操作时,首先会触发`onclick`事件,然后如果满足双击条件,则会触发`ondblclick`事件。如果点击速度较慢,可能会连续触发多次`onclick`事件而不触发`...

    关于js中的鼠标事件总结.docx

    - **DOM0级方式**:通过JavaScript直接访问元素并为其添加事件处理函数,如`btn.onclick = function() { alert(1); }`。这种方式的一个问题是,如果多次赋值,后面的事件处理函数会覆盖前面的。 - **DOM2级方式**...

    HTML_5_事件属性

    4. **鼠标事件**:鼠标事件涉及鼠标与页面元素的交互,如`onclick`、`ondblclick`、`onmouseover`等。例如,`onclick`在用户点击元素时执行,`onmousemove`则在鼠标移动时触发,可以用来实现鼠标悬停效果。 5. **...

    [js]javascript事件集合(包有触发事件)终版.pdf

    JavaScript事件是编程中的一种重要机制,它允许程序对用户的交互做出响应。JavaScript是基于对象的语言...理解并熟练应用这些事件是创建交互式网页的关键,它们为用户提供了一种与网页进行沟通的方式,提高了用户体验。

    BCB 窗体与控件应用基础

    - 用户事件:这些事件由用户的交互行为触发,例如 OnClick(鼠标单击)、OnKeyPress(键盘按键)和OnDblClick(鼠标双击)。例如,当用户点击按钮或按下具有焦点的控件的空格键时,会触发OnClick事件。 - 系统事件...

    给ListBox添加双击事件示例代码

    在服务器端的`Page_Load`事件处理程序中,我们给`ListBox`控件添加了一个`ondblclick`客户端事件,该事件在用户双击`ListBox`项时触发,并调用前面定义的JavaScript函数`JsListChangeItem`。 综上所述,这个示例...

    TMS Pack for FireMonkey2.3.0.1

    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 ...

    Delphi鼠标事件操作

    - `OnDblClick`: 双击事件,当鼠标快速连续两次单击同一位置时触发。 2. **TMemo和TEdit等控件的鼠标事件** - 这些控件通常不直接支持OnMouseDown、OnMouseMove和OnMouseUp事件,但可以通过设置`AcceptsControls`...

    TMS Component Pack v9.2.4.0 Full Source.rar

    TMS Component Pack v9.2.4.0 Full...在TAdvOfficeRadioButton中添加了OnDblClick事件 添加了OnPrintPageTopBottomSize事件以在TAdvStringGrid中动态更改每页的页眉和页脚大小 支持在THTMLHint中使用新的虚拟映像列表

Global site tag (gtag.js) - Google Analytics