0

ブートストラップ化したい、それ以外の場合は一般的にブートストラップされたRails 3アプリに、ブートストラップされていないロケールセレクターがあります。ドロップダウンメニューのフォームに順序付けられていないリストを作成する方法について、私は少し困惑しています。

TL;DR完全な解決策については、この質問の下部にある編集 3 に移動してください。

現在のコードは次のように実装されています。

アプリ/ビュー/レイアウト/_header.html.haml

%header.navbar.navbar-fixed-top
  .navbar-inner
    .container
      # ...
      %nav
        %ul.nav.pull-right
          # ...
          %li= render 'layouts/locale_selector',
                       controller: controller, 
                       action: action
          # (controller, action params passed in from application.html.haml)

app/views/layouts/_locale_selector.html.haml

= form_tag({ controller: controller,
             action: action },
             method: 'get',
             class: 'locale') do
  = select_tag 'set_locale',
               options_for_select(locale_languages, I18n.locale)
  = hidden_field_tag 'page', params[:page] if params[:page]
  = submit_tag 'submit'

アプリ/ヘルパー/application_helper.rb

module ApplicationHelper
  # ...
  def locale_languages
    [
      [t('locale_selector.en'), 'en'],
      [t('locale_selector.it'), 'it'],
      [t('locale_selector.ja'), 'ja']
    ]
  end
end

アプリ/アセット/スタイルシート/bootstrap_and_overrides.css.scss

# ...
.locale {
  padding-top: 5px;
  padding-left: 5px;
  margin: -0.25em;
  #set_locale {
    width: 85px;
    height: 36px;
    color: $grayLight;
    border: none;
    background: none;
    text-align: center;
    &:hover {
      color: $white;
      text-decoration: none;
    }
  }
}

アプリ/資産/javascripts/application.js.coffee

$ ->
  $(".locale input").hide()
  $("#set_locale").change ->
    $(this).closest("form").submit()

Bootstrap コンポーネントのドキュメントを読んで、 header.html.hamlを以下のコードに変更し、必要な方法を表示するドロップダウン リストを取得しましたが、.html などのコンテンツがselect_tag正しくoptions_for_select表示/動作していません。について）わかっている：

アプリ/ビュー/レイアウト/_header.html.haml

# ...
%li#fat-menu.dropdown
  %a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"}
    = t('.language')
    %b.caret
  .dropdown-menu
    = render 'layouts/locale_selector',
              controller: controller,
              action: action

フォームに関する Bootstrap ドキュメントで情報を見つけようとしましたが、StackOverflow と Google を検索しましたが、役に立ちませんでした。シンプルで些細なことを見逃しているに違いありませんが、Bootstrap の専門家が助けてくれますか?

編集

ドロップダウンの見栄えを良くするために2つのファイルを変更しましたが、まだ送信されていません...

アプリ/ヘルパー/application_helper.rb

module ApplicationHelper
  # ...
  def locale_languages
    [
      { label: t('locale_selector.en'), locale: 'en' },
      { label: t('locale_selector.it'), locale: 'it' },
      { label: t('locale_selector.ja'), locale: 'ja' }
    ]
  end
end

app/views/layouts/_locale_selector.html.haml

= form_tag({ controller: controller,
             action: action },
             method: 'get',
             class: 'locale') do
  - locale_languages.each do |language|
    %li= link_to language[:label], '#', value: language[:locale]
  = hidden_field_tag 'page', params[:page] if params[:page]
  = submit_tag 'submit'

編集 2

アプリ/資産/javascripts/application.js.coffee

$ ->
  $(".locale input").hide()
  $(".locale").click ->
    $(this).closest("form").submit()

今は送信されますが、私の元のバックエンド処理はすべてparams[:set_locale]壊れApplicationControllerています (ここにコードを入れませんが、好奇心のためにここにあります)、ロケールは変更されません。これを取得してparams[:set_locale]値を返す必要があります...

編集 3: 完成したソリューション

@simbirsk と @quick_brown_fox が指摘したように、フォームを完全に削除しました。どうもありがとう、みんな。最終的なコードは次のとおりです。

アプリ/ビュー/レイアウト/_header.html.haml

%header.navbar.navbar-fixed-top
  .navbar-inner
    .container
      # ...
      %nav
        %ul.nav.pull-right
          # ...
          %li= render 'layouts/locale_selector',
                       controller: controller, 
                       action: action
          # (controller, action params passed in from application.html.haml)

app/views/layouts/_locale_selector.html.haml

%li#fat-menu.dropdown
  %a.dropdown-toggle{"data-toggle" => "dropdown", href: "#"}
    = t('.language')
    %b.caret
  %ul.dropdown-menu
    - locale_languages.each do |language|
      %li
        = link_to language[:label],
                  controller: controller,
                  action: action,
                  set_locale: language[:locale],
                  page: params[:page]

アプリ/ヘルパー/application_helper.rb

module ApplicationHelper
  # ...
  def locale_languages
    [
      { label: t('locale_selector.en'), locale: 'en' },
      { label: t('locale_selector.it'), locale: 'it' },
      { label: t('locale_selector.ja'), locale: 'ja' }
    ]
  end
end

上記のapp/assets/stylesheets/bootstrap_and_overrides.css.scssおよびapp/assets/javascripts/application.js.coffeeのコードは、不要になったため完全に削除されました。

更新：これは多くのビューを獲得しているようです。

4

2 に答える 2

1

<select>Bootstrap を介して要素をドロップダウンとしてスタイルする方法はないと思います。フォームを使用する代わりに、順序付けられていないリストでリンクを使用し、コントローラーを少し変更してみてはどうでしょうか?

または – それが解決策でない場合は、おそらく JavaScript マジックを使用するか、何らかの POST リンクを作成する必要があります (私は今、Rails にあまり興味がなく、その方法を正確に覚えていませんが、できますよね?)

（あなたの質問が正しいかどうかわかりません…）

于 2012-09-04T06:59:55.503 に答える
1

あなたの<select>ソリューションは素晴らしく見えますが、残念ながらそれは Bootstrap ネイティブではありません。
ドキュメントで述べたように、navbar ドロップダウンのマークアップは次のとおりです。

<div class="dropdown">
    <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
        Language
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li><a href="#">English</a></li>
        <li><a href="#">Portuguese</a></li>
        ...
    </ul>
</div>

したがって、「ブートストラップ」を維持したい場合は、コードを調整し、(必要に応じて動的に)<li>各言語へのリンクを含むコレクションを生成します。を使用して必要なデータを投稿できます<%= link_to %>

于 2012-09-04T09:18:31.937 に答える