app/helpers/application.rb:
def tabbed_panel(base_id, &block) panels = []concat("<div class='tabbed_panel' id='" + base_id + "'>\n", block.binding); concat("<ul class='tabselector' id='" + base_id + "_tabs'>\n", block.binding);
yield panels panels.each do |panel| concat("<li class='pane_tab tab_unselected' id='" + panel[2] + "_tab'>" + link_to_function(panel[0], "select_panel('" + base_id + "', '" + panel[2] + "')") + "</li>", block.binding) end
concat("</ul>\n", block.binding); concat("<ul class='tabpanes' id='" + base_id + "_panels'>\n", block.binding); panels.each do |panel| concat("<li class='panel_panel panel_unselected' id='" + panel[2] + "_panel'>" + panel[1] + "</li>\n", block.binding) end concat("</ul>\n", block.binding); concat("</div>\n", block.binding); end
public/javascripts/panel.js:
function select_panel(baseid, panel_id_base) { var tabs = $(baseid + "_tabs").childNodes; var tab_id = panel_id_base + "_tab"; var panel_id = panel_id_base + "_panel"; $A(tabs).each( function(the_tab) { if(the_tab.nodeName == "LI") { the_tab.removeClassName("tab_unselected"); the_tab.removeClassName("tab_selected"); if(the_tab.id == tab_id) { the_tab.addClassName("tab_selected"); } else { the_tab.addClassName("tab_unselected"); } } } ); var panels = $(baseid + "_panels").childNodes; $A(panels).each( function(the_panel) { if(the_panel.nodeName == "LI") { the_panel.removeClassName("panel_unselected"); the_panel.removeClassName("panel_selected"); if(the_panel.id == panel_id) { the_panel.addClassName("panel_selected"); } else { the_panel.addClassName("panel_unselected"); } } } ); }
public/stylesheets/panel.css:
/* Clearly you need better CSS, but this is a decent start */ .panel_selected { display: block; } .panel_unselected { display: none; } .tab_selected { background-color: gray; } .tab_unselected { background-color: white; }
Then, to use it in your rails app, just put this in the view:
<% #3-panels to choose from in the following example: tabbed_panel 'all_props' do |panels| panels << ["Form Properties", render(:partial => "basic_info"), "fprops"] panels << ["Toolbox", render(:partial => "toolbox"), "tbox"] panels << ["Element Properties", render(:partial => "properties"), "eprops"] end %>