Ruby on rails和tabs

Question

我仍然是ruby和rails的初学者,现在我在谷歌上搜索创建选项卡式菜单的方法,用css类"current"标记当前活动控制器的list元素.谷歌有很多点击,但我没有找到任何我设法工作.

我的菜单在这里:

<ul>
  <li class="current"><%= link_to 'Home', root_path %> </li>
  <li><%= link_to 'Browse songs', page_path('browse') %> </li>
  <li><%= link_to 'Add song', new_song_path %> </li>
  <li><%= link_to 'Request song', artists_path %> </li>
  <li><%= link_to 'My ReChord', artists_path %> </li>
  <li><%= link_to 'Help', page_path('help') %> </li>
  <li id="search"><form><input type="search" placeholder="Type here to find a song or an artist"/></form> </li>
  <li class="notab">
    <% if user_signed_in? %>
      <%= link_to 'Sign out', destroy_user_session_path %>
    <% else %>
      <%= link_to 'Sign in', new_user_session_path %> or
      <%= link_to 'sign up', new_user_registration_path %>
    <% end %>
  </li>
</ul>

现在我在Home选项卡上硬编码了class ="current".但是,当单击例如浏览歌曲时,我希望将class ="current"移动到该行的相应列表元素.

请注意,我有一些链接只是路径路径(如new_song_path)和一些子页面链接,如page_path('help').我需要它适用于这两种类型的链接.

你能为我提供一个适合我两天使用rails的经验的好教程,或者(最好)可能完全符合我上面列表的示例代码吗？提前致谢!

Answer 1

创建一个帮助程序来为您构建该菜单:

def menu_builder(page_id)
  tabs = ['home','store','faq']
  content = ""
  tabs.each do |tab|
    content << if page_id == tab
      content_tag('li', content_tag('a', tab, :href => nil ), :class => 'current') + " "
    else
      content_tag('li', content_tag('a', tab, :href => "/#{tab}" )) + " "
    end
  end
  content
end

或者我自己的简短版本:

def menu_builder(page_id)
   ["home", "store", "faq"].map { |tab| 
       %{<li class="#{page_id == tab ? "active" : "inactive"}"><a href="#{tab}">#{tab.capitalize}</a></li>}  
   }.join("\n")
end

page_id 是某个页面的标识符,应在控制器中定义.

class Foo < ApplicationController

    def faq
        @page_id = 'faq'
        ...
    end
end

然后只需在模板中使用它:

<ul>
    <%= menu_builder(@page_id) %>
    <li class="search">...</li>
</ul>

Answer 2

如果你想要更灵活的东西,请查看我创建的tabs_on_rails插件,以解决这个常见模式.

在模板中,使用tabs_tag帮助程序创建选项卡.

<% tabs_tag do |tab| %>
  <%= tab.home      'Homepage', root_path %>
  <%= tab.dashboard 'Dashboard', dashboard_path %>
  <%= tab.account   'Account', account_path %>
<% end %>

上面的示例生成以下HTML输出.

<ul>
  <li><a href="/">Homepage</a></li>
  <li><a href="/dashboard">Dashboard</a></li>
  <li><a href="/account">Account</a></li>
</ul>

用法类似于Rails路由文件.您可以使用语法创建命名选项卡tab.name_of_tab.

当您要将选项卡标记为当前选项卡时,用于创建选项卡的名称与您在控制器中引用的名称相同.

class DashboardController < ApplicationController
  set_tab :dashboard
end

现在,如果操作属于DashboardController,模板将自动呈现以下HTML代码.

<ul>
  <li><a href="/">Homepage</a></li>
  <li class="custom"><span>Dashboard</span></li>
  <li><a href="/account">Account</a></li>
</ul>