jQuery tabs within Oracle APEX

This tip was posted in Oracle Apex Knowledge Group by Richard Martens. Its my sincere pleasure in thanking the author for this simple tip.

The original blog is available here. I am posting the steps first, and a slight deviation which makes the setup one time only through this article.

The idea is to create a region first and all sub-regions as tabs. If this design suits your application then its simple as copy-paste.Create a template

1. Go to Shared Components 
2. Navigate to Templates
3. Press the Create Button
4. Choose Region
5. Choose From Scratch
6. Provide the name jQuery Tabs
7. Choose Custom 1 for template class
8. Press Create button
9. Once the template is created, find the jQuery tabs from the list and click to edit.
10. Paste both the following codes in Definition Section:

1. <div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
   #BODY##SUB_REGION_HEADERS##SUB_REGIONS#
   <div style="clear:both;"></div>
   </div>
   <link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.tabs.css" type="text/css" />
   <script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.tabs.min.js" type="text/javascript"></script>

2. <script type="text/javascript">
    apex.jQuery(function() {
    apex.jQuery("##REGION_STATIC_ID#").tabs();
    });
   </script>

11. Paste the following in Sub Regions > Header Template

1. <ul style="height: auto;">#ENTRIES#</ul>

12. Paste the following in Sub Regions > Header Entry Template

1. <li><a style="overflow:auto;" href="##REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION_TITLE#</a></li>

13. Paste the following in Sub Regions > Template

1. <div id="#REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION#</div>

The template is now ready. Now you are ready to create regions in your page. While creating the Parent region, choose the template as jQuery Tabs.

If you are wondering what is the improvisation I have done, its present in Step 10.2

In Richard Martens blog the step 10.2 is mentioned to be done for every page. I have modified it to be included in the page template itself. A very small and negligible improvisation.