What Is It?

These are some view helpers I use in Rails to better integrate jQuery UI into my sites.

I hope you find them useful.

TabsHelper

This helper simplifies the code required to use the jQuery UI Tab plugin.

<% tabs_for do |tab| %>
	<% tab.create('tab_one', 'Tab 1') do %>
		# ... insert tab contents
	<% end %>
	<% tab.create('tab_two', 'Tab 2') do %>
		# ... insert tab contents
	<% end %>
<% end %>

The above will generate this HTML in your view:

<div id="tabs">
	<ul>
		<li><a href="#tab_one"><span>Tab 1</span></a></li>
		<li><a href="#tab_two"><span>Tab 2</span></a></li>
	</ul>
	<div id="tab_one">
		# ... insert tab contents
	</div>
	<div id="tab_two">
		# ... insert tab contents
	</div>
</div>

Tabs will be rendered in the order you create them.

You can easily render a tab conditionally by appending your condition to the end of the ‘create’ block as such …

<% tab.create('profile_tab', 'Your Profile') do %>
	# ... insert tab contents
<% end unless @current_user.nil? %>

You can pass HTML options to either the parent DIV or any individual tab’s DIV as you like …

<% tabs_for(:class => 'zippy') do |tab| %>
	<% tab.create('tab_one', 'Tab 1', :style => 'background: #FFF') do %>
		# ... insert tab contents
	<% end %>
<% end %>

The default DOM ID for the parent div is … id=“tabs” … unless you pass in an HTML option with a different value.

AccordionsHelper

This helper simplifies the code required to use JQuery UIs Accordion plugin.

Usage is identical to the Tabs helper.

<% accordions_for do |accordion| %>
	<% accordion.create("dom_id", "accordion_title") do %>
		# ... insert accordion contents
	<% end %>
<% end %>