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