JQuery UI helpers you can use in your Rails apps
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


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.


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">
		<li><a href="#tab_one"><span>Tab 1</span></a></li>
		<li><a href="#tab_two"><span>Tab 2</span></a></li>
	<div id="tab_one">
		# ... insert tab contents
	<div id="tab_two">
		# ... insert tab contents

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.


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 %>