红宝石轨道和标签

Question

我仍然是一个初学者与红宝石和铁轨，现在我用google搜索创建一个标签菜单的方法，用css类“当前”标记当前活动控制器的列表元素。谷歌有很多点击，但我还没有找到任何我设法工作。

我有我的菜单这里：

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

现在我有类=“当前”硬编码的主页选项卡上。但是，当点击浏览歌曲时，我想将class =“current”移动到该行的相应列表元素。

请注意，我有一些链接，只是路由路径（如new_song_path）和一些链接是子页面，如page_path（'help'）。我需要它为这两种类型的链接工作。

你能否给我提供一个适合我两天使用rails的经验的优秀教程，或者（最好是）可能完全符合我上面列表的示例代码？提前致谢！

Answer 1

如果你想要的东西更灵活，检出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> 

Answer 2

创建一个帮手build，对于您菜单：它

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 3

看看的这个插件：

http://github.com/paolodona/rails-widgets

它有很多很酷的组件，包括导航。

文档：http://wiki.github.com/paolodona/rails-widgets/

Answer 4

我创建tabulous来解决这个问题。有一个单独的选项卡配置文件，您可以在其中描述您希望选项卡的行为。例如：

Tabulous.setup do 

    tabs do 
    pictures_tab do 
     text   { 'Pictures' } 
     link_path  { pictures_path } 
     visible_when { true } 
     enabled_when { true } 
     active_when { in_action('any').of_controller('pictures') } 
    end 

    music_tab do 
     text   { 'Music' } 
     link_path  { songs_path } 
     visible_when { true } 
     enabled_when { current_user.has_music? } 
     active_when { in_action('any').of_controller('songs') } 
    end 

    profile_tab do 
     text   { 'My Profile' } 
     link_path  { account_path(current_user) } 
     visible_when { true } 
     enabled_when { true } 
     active_when { in_actions('show', 'edit', 'update').of_controller('accounts') } 
    end 
    end 

end 

阅读the tabulous documentation了解更多信息。