1+ JQuery UI Rails Helpers Readme
2+ ----------------------------------------------------------------
3+
4+ * Web: http://www.codeofficer.com/
5+ * Email: spam*@*codeofficer*dot*com
6+ * JQuery: http://www.jquery.com/
7+ * JQuery UI: http://ui.jquery.com/
8+
9+ These are some view helpers I use in Rails to better integrate JQuery UI in my sites.
10+
11+ Maybe you will find them useful as well.
12+
13+ These include ...
14+
15+
16+ TabsRenderer
17+ ----------------------------------------------------------------
18+
19+ This helper simplifies the code required to use JQuery UIs Tabs plugin.
20+
21+ There are 3 steps to rendering a tab ... initialize, create and render.
22+
23+ <% tabs = TabsRenderer.new(self) %>
24+ <% tabs.create('tab_one', 'Tab 1') do %>
25+ # ... insert tab contents
26+ <% end %>
27+ <% tabs.create('tab_two', 'Tab 2') do %>
28+ # ... insert tab contents
29+ <% end %>
30+ <%= tabs.render %>
31+
32+ The above will generate this HTML in your view:
33+
34+ <div id="tabs">
35+ <ul>
36+ <li><a href="#tab_one"><span>Tab 1</span></a></li>
37+ <li><a href="#tab_two"><span>Tab 2</span></a></li>
38+ </ul>
39+ <div id="tab_one">
40+ # ... insert tab contents
41+ </div>
42+ <div id="tab_two">
43+ # ... insert tab contents
44+ </div>
45+ </div>
46+
47+ Tabs will be rendered in the order you create them.
48+
49+ You can easily render a tab conditionally by appending your condition to the end of
50+ the 'create' block as such ...
51+
52+ <% tabs.create('profile_tab', 'Your Profile') do %>
53+ # ... insert tab contents
54+ <% end unless @current_user.nil? %>
55+
56+ You can pass HTML options to either the parent DIV or any individual tab's
57+ DIV as you like ...
58+
59+ <% tabs = TabsRenderer.new(self, :class = 'flora') %>
60+ <% tabs.create('tab_one', 'Tab 1', :style => 'background: #FFF') do %>
61+ # ... insert tab contents
62+ <% end %>
63+ <%= tabs.render %>
64+
65+ The default DOM ID for the parent div is ... id="tabs" ... unless you pass in an HTML
66+ option with a different value.
0 commit comments