Ruby on rails and tabs

Question

Я все еще новичок с рубинами и рельсами, и теперь я ищу способы создания меню с вкладками, отмечая элемент списка текущего активного контроллера классом css «current». В Google много хитов, но я не нашел ни одного, с которым мне удавалось работать.

У меня есть меню здесь:

<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'). Мне нужно, чтобы он работал для обоих типов ссылок.

Можете ли вы предоставить мне хороший учебник, подходящий для моего двухдневного опыта работы с рельсами или (предпочтительнее) пример кода, который может идеально поместиться в моем списке выше? Заранее спасибо!

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, чтобы узнать больше.