Posted by: shijesh | April 4, 2010

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 !!!

Advertisements

Responses

  1. Hi. I have apex 3.2 and tried to setup tabs like this. It works exept the region titles appear outside the tabs in the sequence specified. All other region content is inside the tabs. Is there any way to suppress those region titles from displaying?

    • Choose Region Template as “No Template.

      BR,
      SK


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Categories

%d bloggers like this: