6

我正在寻找一种在 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 可能被禁用或阻止，甚至延迟交付并导致闪烁......

干杯，
多米尼克

4

1 回答 1

0

https://github.com/phallstrom/form_helper_css

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

于 2011-07-27T15:01:30.873 回答