`
CaiDeHen
  • 浏览: 96737 次
  • 性别: 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了。
下次有时间改的通用些。
分享到:
评论

相关推荐

    Ai中英文菜单对照表

    - **剪切(Cut)**:删除选中的对象并将其放入剪贴板。 - **粘贴(Paste)**:将剪贴板中的内容粘贴到当前位置。 - **复制(Copy)**:复制选中的对象到剪贴板。 - **前粘贴(Paste to front)**:将剪贴板内容粘贴到所有...

    ps专业英语ps专业英语

    根据给定的信息,我们可以将这些内容整理为关于Adobe Photoshop软件中的关键术语和功能的专业英语词汇。下面是基于提供的信息,对各个部分的详细解释。 ### 文件(File)相关操作 #### 文件(File)菜单概述 在Photo...

    以下是常见的C++笔试面试题及其核心知识点解析,帮助您系统复习

    以下是常见的C++笔试面试题及其核心知识点解析,帮助您系统复习

    计算机短期培训教案.pdf

    计算机短期培训教案.pdf

    计算机二级Access笔试题库.pdf

    计算机二级Access笔试题库.pdf

    下是一份关于C++毕业答辩的心得总结,内容涵盖技术准备、答辩技巧和注意事项,供参考

    下是一份关于C++毕业答辩的心得总结,内容涵盖技术准备、答辩技巧和注意事项,供参考

    基于IPU的Cassandra集群技术验证与优化:苹果公司内部技术培训

    内容概要:本文档详细介绍了英特尔为苹果公司构建的基于智能处理单元(IPU)的Cassandra集群的技术验证(PoC)。主要内容涵盖IPU存储用例、已建存储PoC、MEV到MMG400的过渡、苹果构建IPU-Cassandra集群的动机以及PoC开发进展。文档还探讨了硬件配置、软件环境设置、性能调优措施及其成果,特别是针对延迟和吞吐量的优化。此外,文档展示了六节点Cassandra集群的具体架构和测试结果,强调了成本和复杂性的降低。 适合人群:对分布式数据库系统、NoSQL数据库、IPU技术感兴趣的IT专业人员和技术管理人员。 使用场景及目标:适用于希望了解如何利用IPU提升Cassandra集群性能的企业技术人员。主要目标是展示如何通过IPU减少服务器部署的成本和功耗,同时提高数据处理效率。 其他说明:文档中涉及的内容属于机密级别,仅供特定授权人员查阅。文中提到的技术细节和测试结果对于评估IPU在大规模数据中心的应用潜力至关重要。

    计算机二级考试C语言题.pdf

    计算机二级考试C语言题.pdf

    计算机发展史.pdf

    计算机发展史.pdf

    计算机仿真技术系统的分析方法.pdf

    计算机仿真技术系统的分析方法.pdf

    yolo编程相关资源,python编程与YOLO算法组成的坐姿检测系统,功能介绍: 一:实时检测学生错误坐姿人数 二:通过前端阿里云平台显示上传数据,实现数据可视化

    yolo编程相关资源,python编程与YOLO算法组成的坐姿检测系统,功能介绍: 一:实时检测学生错误坐姿人数 二:通过前端阿里云平台显示上传数据,实现数据可视化

    办公室网安全监控uptime-kuma,docker镜像离线压缩包

    办公室网安全监控uptime-kuma,docker镜像离线压缩包

    计算机课程设计-网络编程项目源码.zip

    计算机课程设计-网络编程项目源码.zip

    Microsoft.Office.Interop.Excel.dll 用作C#操作打印机

    将该dll包放入项目并引用,可以操作打印机

    杰奇2.3核淡绿小说网站源码+关关采集10.0

    杰奇2.3内核淡绿唯美小说网站源码 PC+手机版 自动采集 全站伪静态,送10.1版本关关采集器

    计算机辅助教学.pdf

    计算机辅助教学.pdf

    天文领域高画质流星与红色精灵闪电监控系统的构建及应用

    内容概要:本文详细介绍了如何利用天文相机和其他相关硬件设备搭建一套高画质、高帧率的流星监控系统,以及针对红色精灵闪电这一特殊自然现象的捕捉方法。文中不仅涵盖了硬件的选择标准如CMOS靶面尺寸、量子效率等重要参数,还提供了基于Python和OpenCV实现的基本监控代码示例,包括亮度突变检测、运动检测算法等关键技术点。此外,对于安装位置的选择、供电方式、成本控制等方面也有具体的指导建议。 适用人群:对天文摄影感兴趣的爱好者,尤其是希望捕捉流星和红色精灵闪电等瞬时天文现象的专业人士或业余玩家。 使用场景及目标:适用于希望搭建个人天文观测站,用于科学研究或个人兴趣爱好的场景。目标是能够稳定可靠地捕捉到流星和红色精灵闪电等难以捉摸的天文现象,为研究提供高质量的数据资料。 其他说明:文中提到的一些技术和方法虽然较为复杂,但对于有一定编程基础和技术动手能力的人来说是非常实用的参考资料。同时,文中提供的省钱技巧也为预算有限的用户提供了一些有价值的建议。

    时间序列分析-基于R(第2版)习题数据

    时间序列分析-基于R(第2版)习题数据

    LabVIEW与阿特拉斯开放式通讯:网口读取PM4000控制器扭矩值的技术详解

    内容概要:本文详细介绍了如何使用LabVIEW通过网口读取阿特拉斯PM4000控制器的扭矩值。主要内容涵盖开放式通讯协议的理解、阿特拉斯调试软件和测试软件的应用、LabVIEW程序的具体实现步骤,包括初始化网络连接、发送读取扭矩值命令、接收并解析扭矩值数据,以及关闭网络连接。文中还提供了多个调试技巧和注意事项,如硬件接线配置、数据解析方法、常见错误及其解决办法,以及性能优化建议。 适合人群:从事工业自动化领域的工程师和技术人员,尤其是那些需要集成阿特拉斯设备并与之进行数据交互的专业人士。 使用场景及目标:适用于需要实时监控和采集阿特拉斯PM4000控制器扭矩值的工业应用场景,旨在提高数据采集效率和准确性,确保设备运行状态的良好监测。 其他说明:文中提供的代码片段和调试经验有助于快速定位和解决问题,提升开发效率。此外,还强调了数据解析过程中需要注意的细节,如字节序问题和超时设置等。

Global site tag (gtag.js) - Google Analytics