Wednesday, November 19, 2008

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.

8 comments:

Denes Kubicek said...

Louis-Guillaume,

This sounds interesting. I did something similar using yahoo plugins but never managed to display two regions in one tab. Is that possible using this solution? If yes, how?

Thanks,

Denes Kubicek

Louis-Guillaume Carrier-Bédard said...

Denes,

Yes, it's possible to display two regions in one tab.
I just did a little demo for you: http://apex.oracle.com/pls/otn/f?p=987654321:34:0

What did I change from the Tabs(1) example:
1) Change 1 line of JS code: $("#my_calendar").parent().attr("id","my_tabs");
2) Create 2 HTML regions before and after my regions Form and Report. The first HTML region source is: <div id="form_report">
The second HTML region source is: </div">
3) Change the tabs HTML code:
<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>

I'll Blog about it tonight (with more details).

Louis-Guillaume

Denes Kubicek said...

Louis-Guillaume,

Thanks a lot for your efforts. That looks promising. I will try that out myself and see what I get.

Regards,

Denes Kubicek

Scott said...

Louis,
I'm having issues reproducing your example. I just keep getting a bulleted list but no tabs. I worked backward and started with the jquery example and that worked so I know its possible. I just think it has something do with the divs not being correct.

Any way you can provide an export of this one tab page so I can see what I'm doing wrong?

Louis-Guillaume Carrier-Bédard said...

Scott,


Thanks for your interest in my demos.

Make sure the TD or DIV surrounding your UL has an ID (in my example it's "my_tabs").

I create the tabs with this command
# //create the Tabs
# $("#my_tabs > ul").tabs(
# {cookie: {expires: 1}
# }
# );

If you put your example on apex.oracle.com, I can take a look.

L-G

degzhaus said...

This is great Louis!! I'm trying to reproduce this, but am unable to link the tabs to the regions. What is the magic to default a certain region visible based on a selected tab and the rest of the regions invisible?

Very nice work!!

tony miller said...

Louis,
I have tried replicating your sample and can not get the tabs to show..

Could I ask you to take a look at my sample up on Oracle's hosted site and see what I might be doing wrong?

Workspace name is homeworld, login is test/test.

Application is: 58170 - Button help, page in question is page 5.

Thank you,

Tony Miller
Webster, TX

Louis-Guillaume Carrier-Bédard said...

Tony Miller,

Everything is working. :D

I suggest you to modify the password for the account 'test' of your workspace.

Have a nice day,
Louis-Guillaume