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

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

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

1 个答案: