LiveTabs¶ ↑

Dynamic in-page tabbed navigation for Rails, supporting both inline and remote content. LiveTabs also degrade gracefully and allow for bookmarking of open tabs.

Example¶ ↑

In order to copy the required assets to your public folder, first run:

script/generate live_tabs_assets

In your application template, require them as follow:

<%= javascript_include_tag :defaults, 'live_tabs', :cache => true %>
<%= stylesheet_link_tag 'live_tabs', :cache => true %>

In your view:

<% tabset(:tabs, :placeholder => "Loading...", :class => 'my-class') do |t|

	t.tab('Static HTML') do
		%>
			<h2>This is a tab containing plain HTML</h2>
		<%
	end
	
	t.tab('Static HTML with custom classes', {}, :style => 'color: red') do 
		%>
			<h2>This is a tab containing plain HTML but with some custom HTML attributes</h2>
		<%
	end
	
	t.tab('HTML',  :html => "Some <b>inline</b> HTML content without an ERb block")
	t.tab('Partial',  :partial => 'partial')
	t.tab('File',     :file => File.join(RAILS_ROOT, 'app/views/tabs/file.html.erb'))
	  
	t.tab('Remote content', :url => slow_tabs_path)
	t.tab('Remote content with custom placeholer', :url => slow_tabs_path, :placeholder => "Slow Loading...")
	
end %>

This will generate a series of <fieldset> elements which are then automatically processed to create a neat tabbed navigation. The helper will generate tab identifiers, e.g. “Remote content” will become “remote_content”. This ID can be used as an URL fragment to open the page and activate the tab, e.g. /path/to/page#remote_content.

You can also set the default active tab in your controller using:

set_tab_focus("Name of your default tab")

You can also programmatically set active tabs from within your views with:

<%= link_to_tab_with_id("open this tab", "remote_content") %>
<%= link_to_tab_with_name("open that tab", "Remote content") %>

Copyright © 2008-2009 Xavier Defrang, released under the MIT license