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 %>

生成されたフォームビューにまだ触れなければならないので、正しく見えません（またはもっとDRY）...

別の方法として、クラスにモンキー パッチを適用するか、ヘルパーInstanceTagをハッキングすることが考えられます。form_for

誰もこれを以前にやったことがありますか？

ちなみに、クラス属性を適用するためにjQuery（または一般的にJavascript）を使用することは避けます.JSが無効になったり、ブロックされたり、遅延して配信されたり、ちらつきが発生したりする可能性があるためです...

乾杯、
ドミニク

4

1 に答える 1

0

https://github.com/phallstrom/form_helper_css

必要なクラスを指定することはできませんが、すべての入力に適切なクラス名が追加され、（すべてのブラウザーで）それらを簡単にターゲットにできるようになります。

于 2011-07-27T15:01:30.873 に答える