ㄜ,其實真的很難解釋什麼叫做 in-place-editing 這個 AJAX 效果,簡單講就是你可以直接編輯畫面上某些欄位,而不用進入專門編輯的頁面,上圖就是最典型的效果。
這個效果廣泛的使用在 Flickr 以及其他的 AJAX 網頁。由於太過方便,常用,所以
script.aculo.us 就有這個效果,Rails 也對這個效果寫了相當方便的
Javascript Helper,並且做出一個相當完善的整合。雖然這個功能在 Rails 2.0 裡面即將被取消內建,轉為 plugin 形式,但是由於日常生活使用到的機會也蠻多的,我還是第一個 AJAX 效果就介紹這個。Ruby on Rails 上面要使用 in-place-editing 是相當相當方便的。一共有三步,我們假設我們想 in-place-editing
abc model 裡面的
name column。
第一步:加入相關 Lib在 HTML head 裡面加入相關 Javascritp Lib
javascript_include_tag :defaults
第二步:View在view 裡面,你需要 in-place-editing的位置,加入相關 in-place-editor 的 field
in_place_editor_field 'abc' , 'name'
第三步:Controller在你的 controller 裡面,加入 in-place-editor 的宣告
class AbcController < ApplicationController
in_place_edit_for :abc , :name
end
沒錯,不多不少三步就好。沒有任何 Javascript 宣告,只有簡潔有力的 Rails Style Coding,很棒吧。
中文化如果你想將裡面內建的 ok , cancel 改成中文的話,請在 view 裡面使用
in_place_editor_field 'abc' , 'name' , :save_text =""> '儲存' , :cancel_text => '取消' , :loading_text => '儲存中'
即可變成中文字。
多個 column in-place-editing 如果你想要一個 controller 有多個 in-place-editing 的 column,這裡就有點不方便了,可能必須要這樣寫
class AbcController < ApplicationController
in_place_edit_for :abc , :name
in_place_edit_for :abc , :nickname
end
延伸閱讀
分享到:
相关推荐
In a surprisingly short period of time, Visual Studio Code has become very popular among web developers. Part of that is because it’s fast, lightweight, and is available on the three main platforms ...
Bash-Terminal-Keyboard-Shortcuts-for-Editing.pdf
bash-vi-editing-mode-cheat-sheet Readline VI Editing Mode Cheat Sheet Default Keyboard Shortcuts for Bash
• Richly illustrated in full color and brimming with easy-to-follow, step-by-step instructions • Explains how to enhance your images by adjusting color, brightness, resolution, contrast, and sharp...
controlling D flipflop circuit
fyilmaz2312-fyilmaz2312-Ajax-and-AspNetMvc-Page-in-Without-Refreshing-The-Product-Editing-Adding
Undo/Redo operations in Bitmap-based Collaborative Graphic Editing Systems
要查看的文件: (VB: )如何调用约会编辑表而不是就地编辑下面的示例演示如何更改最终用户在Scheduler控件中按下键时执行的默认操作。 默认情况下将调用就地编辑器,从而使用户能够修改“主题”字段。...
Large-Scale Physics-Based Terrain Editing 2011
波松影像編輯源碼,實現影像無痕複製方法,為Perez於2003年發表在SIGGRAPH文件之實作
matlab开发-Poissonimageediting。possion图像编辑的matlab实现(无缝克隆和混合梯度)
matlab开发-PoissonImageEditing。佩雷斯关于泊松图像编辑的论文的直接实现
目录RNA-editing分析实战- 获取合适的测试数据RNA-editing分析实战获取合适的测试数据 目录我们要找到的数据集要满足以下几个条件:- ribo
对于习惯vim编辑的linux用户,在~/.bashrc文件中添加set -o vi,设置bash vim命令模式,可以加快方便输入
extjs-grid-row-editing-php-backend 这是 MiamiCoder.com 上 ExtJS 网格编辑教程的源代码。
geomajas-project-client-gwt.zip,geomajas gwt客户端:插件编辑-javascript apigomeajas gwt客户端项目
jsf 的简单例子,实现增删改查及分页,通过学习,很好的理解jsf开发。
A unique compact book on digital video editing fundamentalsCovers digital video file formats and data footprint optimizationTeaches you how to build a production pipeline,解压密码 share.weimo.info
Window using C Programming, storing data in a structures as a , searching and editing data
cursive for idea Advanced structural editing, refactorings, VCS integration and much more...Best in class interop with Java for mixed projects All standard IntelliJ features (project management, VCS etc)