Sempre tenho a necessidade de menus com abas ou menus baseados em tags ul e li, como já mostramos aqui , este tipo de menu é simples de se fazer temos um retorno bem bacana.

Porém seria muito bom que dentro do Rails conseguíssemos controlar qual deve ser marcada com base nos controllers e actions, ao contrário de ter que ficar definindo em todas as views qual é a aba corrente.

E para isto, eu encontrei um plugin do Rafael Lima que é muito bacana, porém ele já acompanhava um CSS e imagens além de algumas coisas que não batiam com as minha necessidades. Então como tudo está no github, tratei de fazer meu “fork”: http://github.com/danielvlopes/tabs_helper/tree/master e adaptar para os meu projetos, e já á algum tempo venho usando este plugin para qualquer tipo de menu em meus projetos html.

Mas este fim de semana precisei de ícones para as abas e menus verticais do Cifras (ainda não falamos deste projeto, mas logo farei um post explicando tudo e apresentando o produto) e resolvi alterar bastante o código do plugin para que ele aceitasse também blocos, e se comportando praticamente igual ao link_to do Rails.

Então, para quem precisar de menus em Rails e queira controlar isto via controllers veja abaixo como é simples:

Controller

class DashboardController < ApplicationController
  current_tab :mydashboard

  ...

end

View

ERB code

<% tabs do |tab| %>
  <%= tab.account 'Account', account_path, :style => 'float: right' %>
  <%= tab.users 'Users', users_path, :style => 'float: right' %>
  <%= tab.mydashboard 'Dashboard', '/' %>
  <%= tab.projects 'Projects', projects_path %>
<% end %>

Resultado HTML

 <ul id="tabs">
   <li><a href="/accounts">Account</a></li>
   <li><a href="/users">Users</a></li>
   <li><a href="/" class="current">Dashboard</a></li>
   <li><a href="/projects">Projects</a></li>    
 </ul>  

E se você quiser utilizar ícones ou mais textos com tags html dentro de cada aba:

<% tabs do |tab| %>
  <% tab.account account_path do %>
    <%= image_tag "account.jpg" /> Accounts
  <% end %>
  <% tab.users users_path do %>
    <%= image_tag "user.jpg" /> Users
  <% end %>
  <% tab.posts posts_path do %>
    <%= image_tag "posts.jpg" /> Posts
  <% end %>
<% end %>

Download

Então quem quiser usar o plugin, aqui segue o link do repositório no github: http://github.com/danielvlopes/tabs_helper/tree/master