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