`

Monkey Patch让Simple Form支持Bootstrap

阅读更多
Twitter推出Bootstrap有段时间了,一直关注,还没有机会用一下。刚好看到xdite的这篇《Simple Form - 你的 Form Framework》,我就准备把现在项目的难看后台换成Bootstrap。不过xdite似乎在写完这篇blog之后,把他的bootstrap-rails更新了,blog中提到的Custom Form Builder代码都没有了。我就想,自己去扩展一个Form Builder,然后再把代码中的simple_form_for都换成bootstrap_form_for,不如想办法不改动现有页面模板,来做这个事情。

在进入正题之前,再说个好消息,即将推出的Simple Form 2.0简直酷的一塌糊涂。看这里:
https://github.com/plataformatec/simple_form/wiki/Upgrading-to-Simple-Form-2.0

好了,回归正题。在《松本行弘的程序世界》中,Matz讲了Monkey Patch这个东西,这次就要让这只猴子出手了。给我的感觉,Monkey Patch的境遇有点类似著名的goto语句,有好处,有坏处,所以我们只用一点点。

在Rails项目的config/initializers/下新建个文件simple_form_monkeypatch.rb:
# encoding: utf-8
module SimpleForm
  module Components
    module LabelInput
      def label_input
        (options[:label] == false ? "" : label) + "<div class='input'>#{input}</div>".html_safe
      end
    end
  end
end


然后将config/initializers/simple_form.rb中的设置修改一下:
config.wrapper_class = :clearfix


好了,这样就完成了。如果你不希望所有的input周围都加上div.input的话,可以自己扩展下simple_form的设置选项,然后在label_input方法中做个判断。

按照这种方法来做,有一个好处就是等到Simple Form 2.0推出的时候,我们不需要去修改页面模板,直接把这个Monkey Patch删除掉就可以了。期待Simple Form 2.0 ...
分享到:
评论
2 楼 tiroc 2011-12-06  
Hooopo 写道
只用一点点..

goto我可是一点点都不敢用
1 楼 Hooopo 2011-12-06  
只用一点点..

相关推荐

    simple_form_bootstrap3:带有 simple_form 和 bootstrap3 的 Rails 表单生成器

    带有 simple_form 和 bootstrap3 的 Rails 表单生成器 安装 将此行添加到应用程序的 Gemfile 中: gem 'simple_form_bootstrap3' 或这一行: gem 'simple_form_bootstrap3', git: '...

    简洁simple个人博客bootstrap模板下载_简洁 个人 博客 棕色 标准 bootstrap 响应式 手机 个人主页 s

    简洁simple个人博客bootstrap模板下载_简洁 个人 博客 棕色 标准 bootstrap 响应式 手机 个人主页 s简洁simple个人博客bootstrap模板下载_简洁 个人 博客 棕色 标准 bootstrap 响应式 手机 个人主页 s

    简洁simple个人博客bootstrap模板下载- 响应式 手机 个人主页 simple 简单 css3

    这个“简洁simple个人博客bootstrap模板”充分利用了Bootstrap的功能,为个人博主提供了一个简单、优雅的平台,以展示他们的内容和思想。 该模板设计的核心是响应式布局,这意味着无论用户使用桌面电脑、平板电脑...

    Ruby-SimpleForm轻松处理Rails表单

    Simple Form支持多种输入类型,如`text_field`, `password_field`, `check_box`, `radio_button`等,可以通过`:as`选项指定。例如,为`password`字段添加`input_type`: ```ruby , as: :password %&gt; ``` 4. **...

    简洁simple个人博客bootstrap模板下载5728.zip

    "简洁simple个人博客bootstrap模板下载5728.zip" 是一个包含预设计的、适用于个人博客的网页模板资源。这个压缩包可能包含了HTML文件、CSS样式表、JavaScript脚本和其他相关图像资源,便于开发者快速搭建具有现代...

    zend-form-decorators-bootstrap, 用于 Twitter 用户界面 Bootstrap的Zend_Form decorator.zip

    zend-form-decorators-bootstrap, 用于 Twitter 用户界面 Bootstrap的Zend_Form decorator 用于 Twitter Bootstrap的 Zend_Form decorator这是一组 Zend_Form decorator和帮助器,帮助呈现所需的标记,以将任何Zend_...

    基于bootstrap的动态表单的实现

    在实现基于Bootstrap的动态表单时,我们通常会借助一些工具或库,如本例中提到的"Bootstrap Form Builder"。这个工具可能是一个基于GitHub的项目,版本为20160522(根据压缩包文件名推测)。它允许用户通过拖放方式...

    简洁simple个人博客bootstrap模板下载_简洁

    7. **简洁设计**:"simple"和"简单"标签表明此模板注重简洁明了的设计哲学,这意味着它可能避免过多的装饰元素,专注于内容呈现,让读者能快速聚焦到博客文章上。 8. **个人博客**:个人博客通常更注重个人风格和...

    django-bootstrap-form, Django 格式的Twitter Bootstrap.zip

    django-bootstrap-form, Django 格式的Twitter Bootstrap Django Bootstrap 表单 用于 Django 表单的Twitter Bootstrap 。一个简单的Django 模板标签,用于处理 Bootstrap 。安装用pip安装 django-bootstr

    bootstrapValidator.js验证在bootstrap4.0使用

    1.bootstrap使用4.0 2.customValidator.css Bootstrap v4.0.0-beta (https://getbootstrap.com) jQuery v3.2.1

    BootStrap表单宽度设置方法

    用bootstrap的栅格“ coll-md- ”命令设置宽度总是不尽人意,有时上下框对不齐,有时上下宽度又不齐,这时建议用“style=”width:100px” “ &lt;form class=form-horizontal &gt; &lt;div class=form-group&gt; &lt...

    前端项目-bootstrap3-contact-form.zip

    标题中的“前端项目-bootstrap3-contact-form.zip”表明这是一个基于Bootstrap 3框架的前端网页项目,主要功能是实现一个联系表单。Bootstrap 3是Twitter推出的一个开源的用于开发响应式布局、移动设备优先的WEB项目...

    Bootstrap formValidation

    4. **多语言支持**:Bootstrap FormValidation支持多语言,可以方便地切换不同地区的语言设置,适应国际化需求。 5. **插件扩展**:通过使用插件,可以添加更多功能,如Ajax验证,允许在不刷新页面的情况下验证远程...

    Laravel开发-bootstrap-form

    【Laravel开发-bootstrap-form】 在Laravel框架中,Bootstrap Form是一个非常实用的工具,它为开发者提供了方便的方式来创建和管理Bootstrap样式化的表单。Laravel 5与Bootstrap 3的结合,使得开发者能够构建出既...

    bootstrap bootstrap-3.3.7

    这个里面 包含整个bootstrap源程序 你所需要的都在了、里面.Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 本教程将向您...

    bootstrap-table可编辑下拉框editable js及css及bootstrap-table-editable.js以及使用实例

    `bootstrap-table-editable.js`是Bootstrap Table的扩展,它使得表格中的单元格可以变为可编辑状态,并且支持各种编辑类型。通过调用`bootstrapTable()`方法初始化表格,我们可以轻松地启用这个功能。 总的来说,`...

    Bootstrap框架下下拉框select搜索功能

    `bootstrap-select`插件还支持许多其他特性,如多选(multiple)、分组(groups)、禁用选项(disabled)、自定义样式(classes)等。如果你想要深入了解或进一步学习,可以参考官方文档或在线教程,以获取更详细的...

    Laravel开发-laravel-bootstrap-form

    在本文中,我们将深入探讨Laravel开发中的"laravel-bootstrap-form"组件,它是一个专为Laravel 5设计的Bootstrap 3表单构建器。这个工具由Dwight Watson创建并经过了定制,以满足特定的开发需求。下面,我们将会详细...

    Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证.zip

    Laravel-Bootstrap-Modal-Form, 使用AJAX提交模式中的Bootstrap 表单,使用 Laravel 验证 Laravel-Bootstrap-Modal-Form你的Laravel 应用程序的表单验证扩展插件。 在将 Bootstrap 窗体嵌入到 Bootstrap/jquery模式...

    simple:用bootstrap4制作的简单登录页面

    这个"simple:用bootstrap4制作的简单登录页面"项目是利用Bootstrap 4 的组件和网格系统来创建一个简洁、高效的登录界面。下面将详细介绍如何使用Bootstrap 4 创建登录页面以及涉及到的相关知识点。 1. **Bootstrap ...

Global site tag (gtag.js) - Google Analytics