为Rails的表单构建器帮助器方法设置默认的CSS类

Question

我正在寻找一种在Rails应用程序中应用一些外部CSS框架的通用方法.这些框架通常定义一组应该用于某些HTML元素的类名.

考虑jQuery UI.要获得一致的表单样式,您可能会这样:

# in a view
<% form_for @foo do |f| %>
  ...
  <%= f.text_field :bar, :class => ['ui-widget', 'ui-widget-content', 'ui-widget-container', 'ui-corner-all'] %>
  or
  <%= f.text_field :bar, :class => 'ui-widget ui-widget-content ui-widget-container ui-corner-all' %>
<% end %>

对每个输入字段执行此操作根本不是DRY.

甚至像帮助方法一样

# in application_helper.rb
def jquery_ui_classes
  'ui-widget ui-widget-content ui-widget-container ui-corner-all'
end

# in a view
<%= f.text_field :bar, :class => jquery_ui_classes %>

要么

# in application_helper.rb
def jquery_text_field(form_builder, method, opts = {})
  ui = ['ui-widget', 'ui-widget-content', 'ui-widget-container', 'ui-corner-all']
  klass = [opts.delete(:class), ui].flatten.compact
  form_builder.text_field method opts.merge(:class => klass)
end

# in a view
<%= jquery_text_field f, :bar %>

看起来不对(或更干),因为您仍然需要触摸生成的表单视图...

替代方法现在可能是修补InstanceTag类或修改form_for帮助程序.

有没有人这样做过？

顺便说一句:我会避免使用jQuery(或一般的Javascript)来应用类属性,因为JS可能被禁用或阻止,甚至延迟交付并导致闪烁......

干杯,
多米尼克

Answer 1

https://github.com/phallstrom/form_helper_css

您无法指定所需的类，但它会向所有输入添加合理的类名称，以便您轻松定位它们（​​在所有浏览器中）。