Sunday, July 12, 2009

jQuery Tabs - Get'em while they're hot!

So, you've mastered the art of j-quer-fu and now you're looking to take on its UI partner in crime - excellent! Tabs are a great place to start... They can help with real estate issues, reduce clutter, and create a better overall end user experience . Like all tools, however, tabs should not be used just because they're "cool" (even though they are). There are some general best practices that should be followed with their implementation. For a great primer on tabs, check out this article from Smashing Magazine:

To lean about jQuery tabs in general have a look here:

Tabs look easy enough to implement but getting things just right in Apex can be a bit tricky the first time. In this post I'm going to explain how to take a busy Apex page with 5 regions and clean it up a bit with tabs. The page contains the following region types:  1 report, 1 calendar, 2 charts, and 1 help.

Here are the before and after demo links:

  1. Before
  2. After


Still interested??? Then let's get started!

  1. Download jQuery UI and include it in your application or page. This is obviously a prerequisite. I posted about Installing jQuery a while back. The concept here is the same but a bit more involved as you need to include jQuery, jQuery UI, and the UI theme. If enough people ask, I'll update that old doc and include some more details ;)
  2. Create a new region template. Many region templates display the region title in them. When we use tabs this may be unwanted as the tab text should suffice. At the same time, however, we will need the region attributes. The following can be used to create a generic region template that gives us what we need; I named it "Basic Div". You can modify the template as needed.
    <div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES# class="basic_div">
  3. Prep the regions that you would like to be tabbed:
    1. Change the templates to the template you created in step 2.
    2. Make sure that all of your regions are in column 1.
    3. Give each region a unique ID via the Static ID attribute.
    4. Make sure they are sequential - regions that will not be tabbed should come before or after.
  4. Enclose regions you want to group together under one tab with two new regions. By "enclose", I simply mean that you'll put one region before the set of regions that should be tabbed and then one after as well. Most of the time you'll want a one to one ratio of tabs to regions. However, sometimes you'll want to put more than one region under a tab. To do this you need to make sure that the regions are sequential and enclosed with some HTML that will group them. In my example, I grouped two chart regions under one tab by putting this HTML in the source of an HTML region (no template) right before the first chart:
    <div id="charts_reg">

    And this in another HTML region (no template) right after the second:

  5. Enclose the regions you want to turn into tabbed regions with two new regions. This step is similar to the last but here the code we are adding will enclose all of our regions to be tabbed. Both of these regions should be HTML regions with no template assigned to them. The first of the two regions includes the mark up that jQuery UI will use to create the tabs. If you have regions that are conditionally displayed, you'll want to make this a PL/SQL region and generate you're HTML dynamically:
    <div id="tabs_start_reg" style="display:none;">
          <li><a href="#employees_reg">Employees</a></li>
          <li><a href="#anniversaries_reg">Anniversaries</a></li>
          <li><a href="#charts_reg">Charts</a></li>
          <li><a href="#help_reg">Help</a></li>

    And the second:
  6. Add the following JavaScript to the HTML header of the page to bring everything to life:
    <script type="text/javascript">
          $tabs = $("#tabs_start_reg");


  1. Very nice and very applicable to things that I need to do for a current project. This really does look so much cleaner. Well done and thanks for sharing your efforts.

  2. This is way cool. How about report breaks that turn into tabs? That would be awesome!


  3. Very Cool indeed !

    Thanks for sharing :)


  4. This was really nice.. Thanks..

  5. Dan,
    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: 44410 - Dynamic Breadcrumbs, page in question is page 4.

    Thank you,

    Tony Miller
    Webster, TX

  6. Tony,

    I added some code to make sure that jQuery was coming in correctly but that didn't do it.

    The JavaScript you had on the page had some typos.


  7. Dan,
    Thanks for the help.. Sorry for the typos.. Just a question, there are associated buttons for a couple of regions that don't seem to be staying within their "tab" is there a way to keep they together?

    Otherwise, this is VERY nice..

  8. Hi Dan,

    jQuery Tabs is very nice and really appreciate sharing this with the APEX community.

    When I use jQuery Tabs with the sidebar, which is placed in the right hand side, the sidebar will move along with tabs, which means the sidebar is not stay at the fixed position at the edge of right hand side.

    Could you please advise how to fix it?


    David Ren

  9. Tony,

    Sorry, those credentials are not working for me. Feel free to email me credentials.


  10. David,

    Sorry, I'm not following... Can you put an example up on


  11. Dan,
    Sorry I didn't get back with you sooner, I was off on a small vacation..

    I have change the password on that account to DanMcGhan..

    If you could look at the page in question again, that would be great!

    Thank you,

    Tony Miller
    Webster, TX

  12. Dan,
    Problem resolved!! I needed to change the static id portion of each region and it now works!!

    Now question, if I split a page into 3 tabs, and put a different form on each tab.. I can in theory just have one save button, since I am just breaking a page up, right?

    Thank you,

    Tony Miller
    Webster, TX

  13. Tony,

    Correct. One button would work just fine.


  14. Hi Its very Helpful for me But I dint get the tabs i followed the same. Can i Get any help regarding this example

  15. We did a webinar on this recently. If you didn't see it, you can check it out here:

    There's a download link for the application. Just make sure to read the notes about the download.

  16. Hi Dan

    Just took the webinar - great stuff. I implemented the tabs in a appl. of mine and it works.

    I have one question though. I have a reports on teh tabs with links to other pages - when I follow the link, and then click "page back", I dont return to the actual tab from which I was called - but to the first tab.

    Is there a way round this?

    Best regards
    Mette, DK

  17. Mette,

    That's a good question! There's a jQuery cookie plugin that you'll need to download and include with your project.

    See the details related to its usage at Select the "options" tab and then click "cookie".