multiple regions under a single tab

Last week, I write about using jQuery UI Tabs to show each region of my page under a tab. Denes Kubicek send me a message asking if it was possible to display more than one region under a single tab. The answer is yes. But how? I tried 3 different ways to do it. I'll first explain the better/simpliest solution.

First, I made a page copy of my last demo (page 30). Don't forget to add the static ID for the regions on the copied page (page copy removes regions static ID)... this is probably a bug in APEX.

1) First solution (working)

A.
I modified the source of the first region called "TABS".





The Region Source is:

<div id="my_tabs">
<ul>
<li><a href="#form_report"><span>My Form & Report</span></a></li>
<li><a href="#my_calendar"><span>My Calendar</span></a></li>
</ul>
</div>

B.
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", {uncompressed:false});
  google.load("jqueryui", "1.5.2", {uncompressed:false});
</script>
<link rel="stylesheet" href="&WORKSPACE_IMAGES.my_tabs_01.css" type="text/css" media="screen" title="Flora (Default)">
<script src="&WORKSPACE_IMAGES.jquery.cookie.js"></script>
<script>
  $().ready(function() {
      //create a DIV element around 2 regions ("my form" and "my report")
      $("#my_form, #my_report").wrapAll('<div id="form_report"></div>');
   
      //create the Tabs
      $("#my_tabs > ul").tabs(
          {cookie: {expires: 1}
          }
      );
   
      //set the Tabs width
      $("ul.ui-tabs-nav").css({width:"350px"});
  });
</script>

The solution was to use jQuery wrapAll function to put a DIV aroung 2 regions. In this example, my 2 regions were following each other (see regions sequence). If your regions are not following each other, read the jQuery Manipulation documentation to find how to move those regions inside a DIV. The DIV can be created using jQuery (or see Part2 for an alternate solution).

You can try a working example of my Multiple Regions inside a single Tab demo.


2) Second solution (working)

This solution is less elegant because it requires the developer to add 2 HTML Regions on the page.
The first region goes before the region "My Form".
The source code is the opening tag of the DIV: <div id="form_report">
The second region goes after the region "My Report".
The source code is the closing tag of the DIV: </div>

I didn't like the idea of creating HTML Regions for this purpose so I decided not to continue with this solution.

3) Third solution (not working)

I change the display point of my regions "My Form" and "My Report" from "Page Template Body" to "REGION_POSITION_04". I had to find a way to select this "display point" so it can be the content of a tab. I had display problems so I decided not to continue with this solution.



This should helps creating more advanced UI!
Have fun :)