tab helpers

Example

<ul <%= tab_set('account_sections')%>>
  <li <%= tab_trigger('profile')%>>Profile</li>
  <li <%= tab_trigger('orders')%>>Orders</li>
  <li <%= tab_trigger('friends')%>>Friends</li>
</ul>

<div <%= tab_content('profile')%>> ...profile info here... </div>
<div <%= tab_content('orders')%>> ...orders here...</div>
<div <%= tab_content('friends')%>> ...friends here... </div>

Hooch tabs consist of 3 parts.

1. The Tab Set
   This is a wrapper around all the tab controls for this particular set of tabs.
2. The Tab Triggers
   These are the clickable elements which, when clicked, open an associated piece of content.
3. The Tab Content
   These are the content blocks controlled by the Tab Triggers

nb. as always the html elements and styling are independent of hooch, you can use any element or style you want for these. e.g. the tab triggers could be anchor tags or even just divs.

All the Options

tab_set(name, type: nil, default_tab: nil)

name the identifier for this set of tabs. Used as the key when adding history changes to the url.

type if set to :ajax, this will cause the tab content elements to be filled via ajax when tabs are clicked the first time.

default_tab this is the label of the tab to be loaded when the tab set is initialized.

tab_trigger(target_label, push_state: nil)

target_label the label of the content section to show when this tab is clicked.

push_state the value to be used with the tab_set name key when adding history to the url (and the browser history)

tab_content(label)

label the label connecting a content section to the tab trigger which opens it.

AJAX example (requires thin_man)

<ul <%= tab_set('user_tab', type: :ajax, default_tab: params[:user_tab] || 'profile') %> class="my_tab_class">
  <li <%= tab_trigger('profile') %> href="<%= profile_user_path(user) %>>Profile</li>
  <li <%= tab_trigger('friends') %> href="<%= friends_user_path(user) %>>Friends</li>
  <li <%= tab_trigger('posts') %> href="<%= posts_user_path(user) %>>Posts</li>
</ul>

<section class="my_content_class" <%= tab_content('profile') %>></section>
<section class="my_content_class" <%= tab_content('friends') %>></section>
<section class="my_content_class" <%= tab_content('posts') %>></section>

Browser History

Hooch tabs build in browser history updates.

In the above example, when you click on 'Profile', the query string will be extended with user_tab=profile and the new url pushed onto the browser history. This means users can reload the page or share the link and come back to the tab they were on.

Events

Hooch fires two events for tabs that you can listen for.

tabTriggerClicked fires on a tab trigger element as soon as it is clicked, before hooch does anything.

tabLoaded fires on a tab trigger element after the associated tab is loaded.