Рубин на рельсах и вкладках

Question

Я все еще новичок в ruby ​​и rails, и сейчас я гуглюсь о методах создания меню с вкладками, помечая элемент списка текущего активного контроллера классом 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>

Теперь у меня есть класс = "current", жестко запрограммированный на вкладке Home.Однако при нажатии, например, «Просмотр песен», я хочу, чтобы 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

Прочитайте Табличную документацию , чтобы узнать больше.