Module: TabsOnRails::ActionController::HelperMethods

Defined in:
lib/tabs_on_rails/action_controller.rb

Instance Method Summary collapse

Instance Method Details

#tabs_tag(options = {}, &block) ⇒ Object

In your template use the tabs_tag helper to create your tab.

<%= tabs_tag do |tab| %>
  <%= tab.home      'Homepage', root_path %>
  <%= tab.dashboard 'Dashboard', dashboard_path %>
  <%= tab.account   'Account', account_path %>
<% end %>

The example above produces the following HTML output.

<ul>
  <li><a href="/">Homepage</a></li>
  <li><a href="/dashboard">Dashboard</a></li>
  <li><a href="/account">Account</a></li>
</ul>

The usage is similar to the Rails route file. You create named tabs with the syntax tab.name_of_tab.

The name you use creating a tab is the same you’re going to refer to in your controller when you want to mark a tab as the current tab.

class DashboardController < ApplicationController
  set_tab :dashboard
end

Now, if the action belongs to DashboardController, the template will automatically render the following HTML code.

<ul>
  <li><a href="/">Homepage</a></li>
  <li class="current"><span>Dashboard</span></li>
  <li><a href="/account">Account</a></li>
</ul>

Use the current_tab helper method if you need to access the value of current tab in your controller or template.

class DashboardController < ApplicationController
  set_tab :dashboard
end

# In your view
<p>The name of current tab is <%= current_tab %>.</p>

Options

You can pass the following options:

  • builder: the custom builder to use

  • active_class: the custom CSS class to use for active links

Customizing a Tab

You can pass a hash of options to customize the style and the behavior of the tab item. Behind the scenes, each time you create a tab, the #tab_for method is invoked.

<%= tabs_tag do |tab| %>
  <%= tab.home      'Homepage', root_path, :style => "padding: 10px" %>
  <%= tab.dashboard 'Dashboard', dashboard_path %>
  <%= tab.account   'Account', account_path, :class => "custom" %>
<% end %>

<ul>
  <li style="padding: 10px"><a href="/">Homepage</a></li>
  <li class="current"><span>Dashboard</span></li>
  <li class="custom"><a href="/account">Account</a></li>
</ul>

You can pass any option supported by the <li>content_tag</li> Rails helper.

See TabsOnRails::Tabs::TabsBuilder#tab_for for more details.

Customizing open_tabs and close_tabs

The open_tabs and the close_tabs methods can be customized with the :open_tabs and :close_tabs option.

<%= tabs_tag :open_tabs => { :id => "tabs", :class => "cool" } do |tab| %>
  <%= tab.home      'Homepage', root_path %>
  <%= tab.dashboard 'Dashboard', dashboard_path %>
  <%= tab.account   'Account', account_path %>
<% end %>

<ul id="tabs" class="cool">
  <li><a href="/">Homepage</a></li>
  <li><a href="/dashboard">Dashboard</a></li>
  <li><a href="/account">Account</a></li>
</ul>

Further customizations require a custom Builder.



208
209
210
 
# File 'lib/tabs_on_rails/action_controller.rb', line 208

def tabs_tag(options = {}, &block)
  Tabs.new(self, { :namespace => :default }.merge(options)).render(&block)
end