`
CaiDeHen
  • 浏览: 95046 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

修改edit_in_place插件,将“(点击编辑)”放入内容中

阅读更多
edit_in_place确实是个不错的效果。但是对于 主流用户 来说,输入框还有优于它的。为什么呢?因为你EIP在那,很多人不知道是可以点击修改的。好吧。你说后面加个提示,行,然后发现用户华丽的去点后面的提示,发现不能改……
不知道本身这个插件有没有这个功能。没找到。知道的望告诉一下
那么,我们就把提示放进内容中吧。
我用的代码比较HARD,以后再更新,先能用。
打开jrails_in_place_macros_helper.rb 在plugins里,这个是helper的东西。
看到in_place_editor_field方法。也就是平时我们用在页面中的方法:
其中
tag.to_content_tag(tag_options.delete(:tag), tag_options) + in_place_editor(tag_options[:id], in_place_editor_options)

假设我们用的是模型pair, 字段name,在页面得到是:
<span class="in_place_editor_field" id="pair_name_1_in_place_editor">或许只是传说</span><script type="text/javascript">
//<![CDATA[
$('#pair_name_1_in_place_editor').editInPlace({update_value:'value', url:'/admin/lovetrees/set_pair_name/1'})
//]]>
</script>

其中span里的是tag.to_content_tag得到的。javascript是后面in_place_editor得到了。我们想把提示加入到内容中,就应该得到:
<span class="in_place_editor_field" id="pair_name_1_in_place_editor">或许只是传说(点击编辑)</span>

大概这样的效果。
也就是说应该是需要改动tag.to_content_tag部分。这个方法到底什么用的。我们看看API:
# File actionpack/lib/action_view/helpers/form_helper.rb, line 624
      def to_content_tag(tag_name, options = {})
        content_tag(tag_name, value(object), options)
      end

哦。明白了。其中value(object)就是输出pair.name的值。那我们需要改动to_content_tag。但是我们不知道其他还有什么地方用到了。那就只改tag的这个方法吧。于是。我们在in_place_editor_field中这样改:
def in_place_editor_field(object, method, tag_options = {}, in_place_editor_options = {})
  tag = ::ActionView::Helpers::InstanceTag.new(object, method, self)

#
  def tag.to_content_tag(tag_name, str="", options = {})
    content_tag(tag_name, value(object) + str, options)
  end
#
#etc..
  tag.to_content_tag(tag_options.delete(:tag), content_tag(:span, "(点击编辑)", :class => "notice"), tag_options) + in_place_editor(tag_options[;id], in_place_editor_options)
end

OK,重启一下,原来的“或许只是传说”变成了“或许只是传说(点击编辑)”并且你点这个提示,就会出现编辑效果了。
---
但是问题出来了!
当我们点击这个提示时,输入框里面的内容也多了这个提示内容!
追寻一下原因。这就不是rails的事儿了。是js的事儿了。
打开public/jquery_inplac.pack.js,不用去改plugins里面的js(以前博客修改eip中文提示提到过)
这个文件压缩过。就不细谈了。找到对应页面的输出内容:
'<input type="text" name="inplace_value" class="inplace.field" value="' + jQuery(this).text().trim().escape_html() + '"/>'

里面的jQuery(this).text().trim().escape_html()就是从原来的页面获取的内容。也就是说这一段代码得到了“或许只是传说(点击编辑)”而不是我们本来想要的“或许只是传说”。
好吧。既然是HARD CODE。那就直接替换掉。
'<input type="text" name="inplace_value" class="inplace.field" value="' + jQuery(this).text().trim().escape_html().escape_html().replace('(点击编辑)', '') + '"/>'

好了,当我们再看页面的时候,点击内容,提示就不会再出现在编辑框重了。对应的textarea也是同样的改发。
或许认为事情结束了。然后打开有select(EIP)的页面。发现当当点击编辑的时候,不能得到原始值了。比如,我们本来选择“心情”用EIP的SELECT,当点击编辑时,SELECT应该指到我选择的心情,但是现在给的是默认的“选择。。”
当然,还是修改public/jquery_inplac.pack.js。由于压缩过后用了很多变量来替代,select的代码很复杂。但是我们不难发现其中有句:
引用
var K=N==H?'selected="selected"': #etc

太明显不过了。再找找N H分别是什么。发现了代码:H=jQuery(this).html()也就是得到EIP之前的内容。
这就简单了。修改H? nono,这一改全乱了。我们只修改SELECT当中的,改成:
var K=N==jQuery(this).text().trim().escape_html().replace('(点击编辑)','')?'selected="selected"': #etc

好了,虽然HARD但是能用就OK了。
下次有时间改的通用些。
分享到:
评论

相关推荐

    ALV EDIT_MASK字段的使用.rar_ABAP EDIT_MASK_ALV EDIT_MASK字段的使用_ALVEDIT

    在ABAP编程中,ALV (ABAP List Viewer) 是一个强大的工具,用于展示和编辑数据表。在处理用户输入时,我们有时需要对特定字段应用格式化或限制,这时`EDIT_MASK`就派上用场了。`EDIT_MASK`是ABAP中的一种功能,允许...

    color_edit.rar_EDIT B_color edit_edit_编辑框_语法编辑

    "color_edit.rar_EDIT B_color edit_edit_编辑框_语法编辑" 这个压缩包文件主要涉及的是一个名为 "color_edit" 的编辑工具,它具备独特的颜色区分和语法高亮功能,使得用户在编辑代码或者文本时能有更直观、更高效的...

    M32-Edit_PC_3.2

    M32-Edit_PC_3.2软件则将这些功能完美地移植到了个人电脑上。用户可以通过模拟器对M32进行详细的参数设置,如调整输入输出路由、设定通道处理链、编辑场景和预设等。软件的界面直观且易于理解,每个按钮和旋钮都与...

    M32-EDIT_PC_V2.5

    软件中的"M32-Edit.exe"是主程序,启动后将呈现一个逼真的M32控制面板,包括推子、按钮、旋钮和屏幕显示,几乎与实物无异。用户可以通过鼠标和键盘模拟操控,进行场景设置、通道处理、自动化编辑等工作。此外,该...

    Edit in place for jRails.

    支持JQuery的Edit In Place Rails插件(rakuto),使用简便轻巧,与大家共享。 例子 ======= # 控制器 class BlogController in_place_edit_for :post, :title end # Customize the action that update the ...

    API-edit.rar_api Edit_edit_edit api

    在这个名为"API Edit"的项目中,我们探讨的是如何利用API来创建和编辑文本输入框,这对于任何需要用户输入的软件来说都是基础且关键的。下面将深入剖析这个程序的核心知识点,以及API在其中的运用。 首先,我们要...

    Edit_Text.rar_Edit自绘_c++ edit_edit_edit 自绘_visual c

    标题中的"Edit_Text.rar_Edit自绘_c++ edit_edit_edit 自绘_visual c"表明这是一个关于C++编程语言在Visual C++环境中实现自定义编辑框(Edit)控件绘图的教程或资源包。自绘(Custom Drawing)是Windows编程中一个...

    Edit control 修改背景色.rar_CHECK 背景颜色_EDIT CONTROL_oldestehz_编辑;_背景色

    在这个主题中,我们探讨的是如何根据用户在check box的选择来动态修改Edit Control的背景颜色。这个功能可以增强用户界面的交互性和视觉效果。 首先,我们需要理解check box(复选框)的基本用法。在Windows API中...

    X32-EDIT_PC_V2.5

    1. **全参数控制**:通过X32-EDIT,用户可以访问混音器的所有参数,包括输入和输出电平、增益、均衡、压缩、噪声门等,实现细致入微的音质调整。 2. **路由配置**:软件允许用户自定义音频信号路由,创建复杂的信号...

    M32-Edit_PC_4.2.zip

    在【M32-Edit_PC_4.2.zip】软件包中,另一个重要的组成部分是M32-Edit-Releasenote_4.2.pdf文件,它详细记录了4.2版本的所有更新内容。更新说明不仅包括新增功能和改进的性能,也明确指出哪些已知问题得到了修复,...

    带图标的edit类.rar_edit 例子_edit图标_图标 Edit_图标Edit_编辑框

    在编程领域,编辑框(Edit)是用户界面中常见的组件,通常用于接收用户输入文本。在Windows编程中,如使用MFC(Microsoft Foundation Classes)或WinAPI,我们可以创建具有特定功能的自定义编辑框,例如在编辑框内...

    slickedit_16.0.2破解文件for Linux

    slickedit_16.0.2破解文件for Linux

    Screenshot_20220312_023756_edit_82386531772294.jpg

    Screenshot_20220312_023756_edit_82386531772294.jpg

    图文详细教程教你如何用Cool_Edit_Pro_2.1录音

    录音是音乐创作和声音编辑中的关键步骤,尤其对于喜欢唱歌或者从事配音工作的人来说,掌握一款优秀的录音软件至关重要。Cool Edit Pro 2.1是一款功能强大的音频编辑工具,其易用性和专业性使其在业余爱好者和专业...

    M32-Edit_PC_3.2.zip

    迈达斯MADIS32是一款专业的数字调音台,其3.2版本的编辑软件M32-Edit是调音师和音频工程师们的重要工具。这个压缩包"M32-Edit_PC_3.2.zip"包含了M32-Edit的安装程序"M32-Edit.exe",用于在个人计算机上配置和控制这...

    richedit_Linkdemo_richedit_超链接_

    在IT行业中,富文本编辑器(RichEdit)是一种常见的文本编辑组件,用于提供比普通文本编辑更丰富的格式化文本编辑功能。在这个特定的项目"richedit_Linkdemo_richedit_超链接_"中,我们主要关注的是如何在RichEdit中...

    一步一步学习MFC---1,Edit_Box控件使用

    在深入探讨MFC(Microsoft Foundation Classes)中的Edit_Box控件使用之前,我们首先需要了解MFC的基本概念及其在Windows编程中的重要性。MFC是一套由微软提供的C++类库,用于简化Windows应用程序的开发过程。它封装...

    in_place_edit_with_datepicker

    InPlaceEditWithDatepicker 待办事项:撰写宝石说明 安装 将此行添加到您的应用程序的Gemfile中: gem 'in_place_edit_with_datepicker' ...// = require best_in_place // = require best_in_pl

    TAP3编辑工具Digitel_TAP3Edit_V3.11.08_Setup.zip

    2. **编辑功能**:TAP3Edit允许用户对TAP3文件进行编辑,如修改通话属性、添加或删除通话记录,这对于故障定位和数据修复至关重要。 3. **数据导出与导入**:支持将TAP3数据导出为多种格式,如CSV、Excel,方便...

    label_edit.zip_vc label edit_文字编辑

    "label_edit.zip_vc label edit_文字编辑" 提供的是一组源代码和头文件,用于实现VC++(Visual C++)环境中可双击编辑的文字标签功能。这个压缩包包含了一些关键组件,如TLabelEdit、TLabelList和TLabelComboBox,...

Global site tag (gtag.js) - Google Analytics