Fake tabs

O que são abas fake

Aba fake representa um elemento de interface conhecido como aba, no qual o conteúdo de cada aba é exibido numa página separada, sem uso de requisições assíncronas.

Helper

Para criar a marcação das abas fake, basta utilizar o helper fake_tabs. Tal método recebe N listas e um bloco como argumento. Os elementos de cada lista são os mesmos argumentos passados para o helper link_to e serão responsáveis pela criação dos links da aba.

Um exemplo de uso:

  <%
    fake_tabs ["Informações", edit_environment_path(@environment), {:class => 'icon'}],
      ["Membros", admin_members_environment_path(@environment), {:class => 'icon'}],
      ["Notícias", admin_bulletins_environment_path(@environment), {:class => 'icon'}],
      ["Cursos", admin_courses_environment_path(@environment), {:class => 'icon'}] do
  %>
    <strong>Conteúdo da aba</strong>
  <% end %>

O conteúdo do bloco representa o HTML que será exibido no aba atual.

O helper, adiciona uma classe ui-state-active ao elemento <li> que envolve o link para a página atual. A chamada de método acima, gera o seguinte HTML:

  <div class="fake-tabs ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="clearfix">
      <li class="ui-state-active"><a class="icon" href="/centro-de-infromatica/editar">Informações</a></li>
      <li><a class="icon" href="/centro-de-infromatica/admin_membros">Membros</a></li>
      <li><a class="icon" href="/centro-de-infromatica/admin_bulletins">Notícias</a></li>
      <li><a class="icon" href="/centro-de-infromatica/admin_courses">Cursos</a></li>
    </ul>
    <div class="panel">
      <strong>Conteúdo da aba</strong>
    </div>
  </div>