Tabs to choose which region to display

It's possible to reduce the space required by regions on a page. How? Use tabs to dynamically choose which region to display. jQuery UI Tabs makes it easy for us to do so.

You can try a working example of my jQuery UI Tabs in APEX demo.

1.
For this example, I need 4 regions.

The first region called "TABS" is an HTML Region with template "No Template".




The Region Source is:

<ul>
<li><a href="#my_form"><span>My Form</span></a></li>
<li><a href="#my_report"><span>My Report</span></a></li>
<li><a href="#my_calendar"><span>My Calendar</span></a></li>
</ul>

This list holds 3 tabs. One tab for each of the region I want to display. Notice the "ahref" values. Each value correspond to a region static ID.

2.
Now, I create the 3 regions I want to display using the tabs.
First, create "My Form" Region and set his static ID to "my_form".
Second, create "My Report" Region and set his static ID to "my_report".
Third, create "My Calendar" Region and set his static ID to "my_calendar".

3.
Add the jQuery code to my page HTML header.

<script src="http://www.google.com/jsapi"></script>
<script>
    // Load jQuery
    google.load("jquery", "1.2.6");
</script>
<link rel="stylesheet" href="&WORKSPACE_IMAGES.my_tabs_01.css" type="text/css" media="screen" title="Flora (Default)">
<script src="&WORKSPACE_IMAGES.jquery.ui.all.js"></script>
<script src="&WORKSPACE_IMAGES.jquery.cookie.js"></script>
<script>
    $().ready(function() {
        $(document).ready(function(){            
            //set ID value for column containing "My Form", "My Report" and "My Calendar"
            $("#my_form").parent().attr("id","my_tabs");
            
            //create the Tabs
            $("#my_tabs > ul").tabs(
                {cookie: {expires: 1}
                }
            );
            
            //set the Tabs width
            $("ul.ui-tabs-nav").css({width:"420px"});
        });
    });
</script>

N.B.
1) I had to set manually the Tabs width because displaying "My Report" had the effect of displaying the tabs on 2 lines.
2) I need to use the jQuery Cookie Plugin to remember the last selected tabs. This is useful when displaying "My Calendar" and switching mode (or any action causing the page to submit).
3) A CSS file is required to display the tabs. I modified the CSS file used by the official demo for jQuery UI Tabs.


I'll be working on a similar demo. The tabs content will be requested using AJAX.