紅寶石軌道和標籤

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瞭解更多信息。