0

我在其他通常是 Bootstrapped Rails 3 应用程序中有一个非 Bootstrapped 语言环境选择器，我想引导它。对于如何在下拉菜单中的表单中制作（我假设）无序列表，我有点难过。

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)

应用程序/视图/布局/_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'

app/helpers/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更改为下面的代码，以获取显示我想要的下拉列表，但它正在获取 等显示/正常工作的内容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 个文件以使下拉列表看起来不错，但它仍然没有提交...

app/helpers/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

应用程序/视图/布局/_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]in my的所有原始后端处理都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)

应用程序/视图/布局/_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]

app/helpers/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中的代码已经被完全删除，因为它变得多余了。

更新：这似乎得到了很多意见，所以：

  • 您可以在我为 Michael Hartl 的Rails 教程制作的应用程序中找到 locale 下拉菜单的完整实现，包括控制器中的代码
4

2 回答 2

1

我认为没有办法<select>通过 Bootstrap 将元素设置为下拉菜单。与其使用表单，不如使用无序列表中的链接并稍微更改您的控制器？

或者——如果这不是解决方案，你可能不得不使用一些 JavaScript 魔法或创建某种 POST 链接（我现在不太喜欢 Rails 以准确记住你是如何做到的，但你可以，对吧？）

（不确定我的问题是否正确……）

于 2012-09-04T06:59:55.503 回答
1

您的<select>解决方案看起来不错，但不幸的是这不是 Bootstrap 原生的。
如文档中所述，导航栏下拉菜单的标记如下：

<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 回答