- 浏览: 2652419 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
80后的童年2:
深入浅出MongoDB应用实战开发网盘地址:https://p ...
MongoDB入门教程 -
shliujing:
楼主在不是精通java和php的前提下,请不要妄下结论。
PHP、CakePHP哪凉快哪呆着去 -
安静听歌:
希望可以一给一点点注释
MySQL存储过程之代码块、条件控制、迭代 -
qq287767957:
PHP是全宇宙最强的语言!
PHP、CakePHP哪凉快哪呆着去 -
rryymmoK:
深入浅出MongoDB应用实战开发百度网盘下载:链接:http ...
MongoDB入门教程
上次我们在 每天一剂Rails良药之In-Place Form Editing里讲到In-Place编辑,大家意犹未尽吧!
但是现在只能支持text和textarea的In-Place Edit,如何添加一个对select的In-Place Edit呢?
或者说,我们怎样写自己的JavaScript Helper插件呢?
今天我们就在上篇文章的基础上写一个对Rails自带In-Place Editor的扩展,让它支持对select的In-Place Edit,并且了解一下如何写我们自己的JavaScript Helper。
1,了解Rails自带的InPlaceEditor并写我们自己的InPlaceSelectEditor
Rails自带的InPlaceEditor在文件public/javascripts/controls.js里定义,它绑定click事件到enterEditMode()方法,该方法调用createForm()和createEditField(),这两个方法主要就是生成form和text/textarea,现在我们的思路就是继承InPlaceEditor并重写createEditField()方法,让它生成select。
创建public/javascripts/in_place_select_editor.js文件:
可以看到,我们继承了InPlaceEditor,并覆盖了它的createEditField()方法并生成一个selectField。
2,在我们的页面中include我们的JavaScript
我们通过在app/views/layouts/contacts.rhtml中引入我们刚才的JavaScript文件来让它全局生效:
3,写个demo页测试一下我们的JavaScript
创建一个app/views/contacts/demo.rhtml:
现在让我们访问一下http://localhost:3000/contacts/demo看看,是不是有In Place Select效果了?
别急,我们再写一个helper来让我们在view里用的更爽,而不用每次手动调用Ajax.InPlaceSelectEditor()。
4,写一个helper来包装我们的JavaScript
在app/helpers/application_helper.rb文件里添加以下两个方法:
这样我们就可以用helper方法来在view里生成JavaScript方法了
5,测试一下我们的In Place Select Editor吧
编辑app/views/contacts/show.rhtml:
这里我们的:select_options => country_options_for_select用到了Rails内建的country_options_for_select()这个helper方法。
好了,New一个Contact,并点击进入Show页面,看看我们的In Place Select Editor的效果吧!
但是现在只能支持text和textarea的In-Place Edit,如何添加一个对select的In-Place Edit呢?
或者说,我们怎样写自己的JavaScript Helper插件呢?
今天我们就在上篇文章的基础上写一个对Rails自带In-Place Editor的扩展,让它支持对select的In-Place Edit,并且了解一下如何写我们自己的JavaScript Helper。
1,了解Rails自带的InPlaceEditor并写我们自己的InPlaceSelectEditor
Rails自带的InPlaceEditor在文件public/javascripts/controls.js里定义,它绑定click事件到enterEditMode()方法,该方法调用createForm()和createEditField(),这两个方法主要就是生成form和text/textarea,现在我们的思路就是继承InPlaceEditor并重写createEditField()方法,让它生成select。
创建public/javascripts/in_place_select_editor.js文件:
Ajax.InPlaceSelectEditor = Class.create(); Object.extend(Object.extend(Ajax.InPlaceSelectEditor.prototype, Ajax.InPlaceEditor.prototype), { createEditField: function() { var text; if(this.options.loadTextURL) { text = this.options.loadingText; } else { text = this.getText(); } this.options.textarea = false; var selectField = document.createElement("select"); selectField.name = "value"; selectField.innerHTML = this.options.selectOptionsHTML || "<option>" + text + "</option>"; $A(selectField.options).each(function(opt, index) { if(text == opt.value) { selectField.selectedIndex = index; } } ); selectField.style.backgroundColor = this.options.highlightcolor; this.editField = selectField; if(this.options.loadTextURL) { this.loadExternalText(); } this.form.appendChild(this.editField); } });
可以看到,我们继承了InPlaceEditor,并覆盖了它的createEditField()方法并生成一个selectField。
2,在我们的页面中include我们的JavaScript
我们通过在app/views/layouts/contacts.rhtml中引入我们刚才的JavaScript文件来让它全局生效:
<%= javascript_include_tag "in_place_select_editor" %>
3,写个demo页测试一下我们的JavaScript
创建一个app/views/contacts/demo.rhtml:
<span id="an_element_we_want_to_edit">Some Value</span> <script type="text/javascript"> new Ajax.InPlaceSelectEditor( 'an_element_we_want_to_edit', '/an/update/url', { selectOptionsHTML: '<option>Blash</option>' + '<option>Some Value</option>' + '<option>Some Other Value</option>'}); </script>
现在让我们访问一下http://localhost:3000/contacts/demo看看,是不是有In Place Select效果了?
别急,我们再写一个helper来让我们在view里用的更爽,而不用每次手动调用Ajax.InPlaceSelectEditor()。
4,写一个helper来包装我们的JavaScript
在app/helpers/application_helper.rb文件里添加以下两个方法:
def in_place_select_editor_field(object, method, tag_options = {}, in_place_editor_options = {}) tag = ::ActionView::Helpers::InstanceTag.new(object, method, self) tag_options = { :tag => "span", :id => "#{object}_#{method}_#{tag.object.id}_in_place_editor", :class => "in_pace_editor_field"}.merge!(tag_options) in_place_editor_options[:url] = in_place_editor_options[:url] || url_for({ :action => "set_#{object}_#{method}", :id => tag.object.id }) tag.to_content_tag(tag_options.delete(:tag), tag_options) + in_place_select_editor(tag_options[:id], in_place_editor_options) end def in_place_select_editor(field_id, options = {}) function = "new Ajax.InPlaceSelectEditor(" function << "'#{field_id}', " function << "'#{url_for(options[:url])}'" function << (', ' + options_for_javascript( { 'selectOptionsHTML' => %('#{escape_javascript(options[:select_options].gsub(/\n/, ""))}') } ) ) if options[:select_options] function << ')' javascript_tag(function) end
这样我们就可以用helper方法来在view里生成JavaScript方法了
5,测试一下我们的In Place Select Editor吧
编辑app/views/contacts/show.rhtml:
<p> <b>Name: </b> <%= in_place_editor_field :contact, :name %> <br/> <b>Country:</b> <%= in_place_select_editor_field( :contact, :country, {}, :select_options => country_options_for_select) %> </p> <br/> <%= link_to 'Back', :action => 'list' %>
这里我们的:select_options => country_options_for_select用到了Rails内建的country_options_for_select()这个helper方法。
好了,New一个Contact,并点击进入Show页面,看看我们的In Place Select Editor的效果吧!
评论
3 楼
axgle
2008-06-04
FireFox下没问题。
IE下不工作~有问题
IE下不工作~有问题
2 楼
smokingcat
2008-04-30
我在IE下和FireFox下都可以工作,查查你的环境吧。
1 楼
s6520643
2008-04-29
按照你说的写完后,在FF下可以看见selece里的内容,但在IE下不工作..是为什么呢?
发表评论
-
用了TextMate才知道什么叫神级Editor
2011-03-09 04:51 57863一直用Eclipse作为开发Ruby和Java项目的IDE,但 ... -
Ruby使用OAuth登录新浪微博和豆瓣
2011-01-09 12:49 4306首先需要安装oauth这个gem包 gem install ... -
使用Passenger+nginx部署Rails
2010-12-28 15:12 49201. Install Passender gem instal ... -
markItUp+rdiscount搭建Rails下可视化Markdown编辑器
2010-12-21 17:48 5375markItUp是基于jQuery的可视化编辑器,支持Html ... -
Rails3 and MongoDB Quick Guide
2010-12-10 14:13 2717Install MongoDB Download: http: ... -
基于ruby-protobuf的rpc示例
2009-08-11 11:51 41101, 安装ruby-protobuf gem instal ... -
Ruby导出xls和csv的utf-8问题的解决
2009-02-04 15:05 6745数据库数据为utf-8格式,包括中文和拉丁文等等 导出文件xl ... -
URL/HTML/JavaScript的encode/escape
2009-01-04 13:03 9234最近经常被URL、HTML、JavaScript的encode ... -
各种排序的Ruby实现
2008-11-27 14:51 3953Θ(n^2) 1, Bubble sort def bu ... -
12月5日北京RoR活动!
2008-11-26 18:38 2967又是一年过去了,Rails在国内的发展势态良好,很多使用RoR ... -
Rails程序开发的最大问题是代码规范
2008-08-28 11:56 5276使用Rails开发大型复杂B2B应用一年了,这个项目目前开发人 ... -
Web开发大全:ROR版——推荐序
2008-07-09 00:39 2376来自http://www.beyondrails.com/bl ... -
深入ActionMailer,使用Sendmail发邮件
2008-07-03 11:41 3365来自: http://www.beyondrails.com/ ... -
Rails里如何结合ExceptionNotification配置gmail账户发邮件
2008-06-19 19:56 30141,安装ExceptionNotification rub ... -
使用coderay和railscasts样式进行代码高亮
2008-06-17 00:16 2359CodeRay是一个语法高亮的Ruby库,效率很不错。 Cod ... -
Capistrano试用
2008-06-16 19:05 19051,客户端机器安装Capistrano gem insta ... -
lighttpd真垃圾啊
2008-06-04 18:38 2460使用lighttpd+fcgi跑Rails程序,文件上传会si ... -
将gem变成plugin
2008-06-04 11:27 1761有什么样的需求就有什么样的对策 当vhost上的帐号没有ge ... -
在Rails里使用ReCaptcha添加验证码
2008-06-03 15:51 42111,去http://recaptcha.net/sign up ... -
Rails里给文件上传添加progress_bar
2008-05-27 17:00 2051文件上传很慢时,UI没有什么用户提示,这样让人很费解,所以我们 ...
相关推荐
Build your own ruby on rails web application
rails-javascript-integrations, JavaScript重 Rails 应用的渐进集成策略 Rails JavaScript集成策略注意:这比最后一个提交日期更新更新,因为大多数有趣的工作不在 master 分支上。为什么?模块化视图使用户界面的...
Webpacker:使用Webpack在Rails中管理类似app的JavaScript模块
《Rails之道》按照Rails的各个子系统进行组织编排,分别介绍了Rails的环境、初始过程、配置和日志记录,Rails的分配器、控制器、页面生成和路由,REST、资源和Rails,ActiveRecord的基础、关联、验证和高级技巧,...
Build.Your.Own.Ruby.on.Rails.Web.Applications.Feb.2007.pdf
chosen-rails, 将选择的javascript库与 Rails 资产管道集成 为 Rails 资产管道选择的选择是一个用于制作长的,笨拙的选择框的用户友好的库。chosen-rails gem 将 Chosen 与 Rails 资产管道集成在一起。用法安装选择...
This pioneering book is the first resource that deep dives into the new Rails 3 APIs and shows you how use them to write better web applications and make your day-to-day work with Rails more ...
《Rails之道》详细讨论了Rails的程序代码并通过分析Rails中的代码片段来深入解释它的功能,同时,《Rails之道》部分章节也摘录了一些API文档中的内容,使读者能够快速地找到对应的API文档、相关的示例代码以及深入的...
ckeditor-rails, 集成 CKEditor javascript库和 Rails 资产管道 用于 Rails 资产管道的 CKEditorCKEditor 是一个WYSIWYG编辑器用来使用 inside 网页的库。ckeditor_rails gem 将 CKEditor 与 Rails 资产管道集成在...
博文链接:https://ziyoujiedao.iteye.com/blog/148307
Summary 94 Chapter 6: Creating Navigation Bars 95 Getting started with a navigation bar 95 Navigation bar helper classes 102 Adding a navigation bar to the Rails application 103 Summary 105 Chapter 7:...
Your Ruby on Rails application is sick. Deadlines are looming, but every time you make the slightest change to the code, something else breaks. Nobody remembers what that tricky piece of code was ...
Rails之道.pdf 高清 带书签
This book teaches intermediate to advanced web developers how to use both Ajax and Rails to quickly build high-performance, scalable applications without being overwhelmed with thousands of lines of ...
gem 'foundation_rails_helper' , '~> 3.0' 然后执行: $ bundle 兼容性 仅完全支持Rails 4.1 / 4.2 / 5/6和Foundation 6 某些功能可能适用于Foundation 5及更早版本,但结果可能会有所不同,并且
Learn to design your own APIs and successfully deploy a production-quality application. You'll see test-driven development and behavior-driven development in action throughout the book, just like in ...
Fusioncharts Rails Rails包装器可使用FusionCharts构建图表。 安装(RubyGems) 将此行添加到您的应用程序的Gemfile中: gem 'fusioncharts-rails' 然后执行: $ bundle 或将其自己安装为: $ gem install...
rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails 2.3.2离线安装rails ...
If you’re a web developer or designer ready to learn Ruby on Rails, this hands-on guide is the ideal way to get started. Rather than toss you into the middle of the framework’s Model-View-Controller...