JQuery Tab in APEX

Creating a JQuery Tab in APEX is quite simple and it also gives a very good look and feel to the APEX application.
Here is an EXAMPLE of APEX Application with JQuery Tab.

As you can see in the Application, it has 2 tabs – Employee and Chart. Well let me tell you in advance, these two tabs are actually normal report region and chart region. Got Confused !!!. Let me explain how can we represent different regions in APEX as JQuery Tab.

Edit the Employee Region which contain a simple SQL report.
Go to Header and Footer tab.
In the Region Header enter

 <div id = "tabs-1"> 

In the Region Footer enter

</div>

Edit the 2nd region, in my Example Chart Region which contain a simple chart.
Go to Header and Footer tab.
In the Region Header enter

<div id = "tabs-2">

In the Region Footer enter

</div>

For each region you have in your page you need to repeat the above step and make sure the DIV id is different .

Now, create a HTML Region with Region Template as No Template and add the below code in the Region Source.

<div id="tabs">
<ul>
 <li><a href="#tabs-1">Employee</a></li>
 <li><a href="#tabs-2">Chart</a></li>
</ul>
</div>

Notice the 2 li tag in the above code , first one is for 1st tab (Employee) and second one is for second tab (Chart)

Finally add the below code to the HTML Page Header.

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"> </script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"> </script>
<script type="text/javascript">
$(function() {
$("#tabs").tabs();
$x("tabs").appendChild( $x("tabs-1"));
$x("tabs").appendChild( $x("tabs-2"));
});
</script>

In the above code, line 6 creates the tab , line# 7 adds the first Region with id tabs-1 (Employee Region) to the firsts tab container and line# 7 adds the Region with id tabs-2 (Chart Region) to tab container.

Thats it !!!