Dynamic in-page tabbed navigation for Rails, supporting both inline and remote content
Ruby
Pull request Compare This branch is 1 commit ahead of xavier:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
generators/live_tabs_assets
lib
rails
test
MIT-LICENSE
README.png
README.rdoc
Rakefile
TODO
install.rb
uninstall.rb

README.rdoc

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