JQuery Tab in APEX

 

1)   Goto  Shared Components

2)   Select  template

3)   Create a new template of type "Region" (create one from scratch)

4)   Name: jQuery Tabs

5)   Template Class: Custom 1

6)   Place the below code in the “Definition” section:

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

7)    Header Template

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

8)    Header Entry Template

<li><a href="##REGION_STATIC_ID#-tab-#SUB_REGION_ID#">#SUB_REGION_TITLE#</a></li>

9)    Template

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

10)After this, goto page and create a html region.

10)            Select  Template of html region as jQuery Tabs.

11)              Place the below code in region footer.

<script type="text/javascript">

 apex.jQuery(function() {

 apex.jQuery("##REGION_STATIC_ID#").tabs();

 });

</script>

12)              Now select the regions that should be transferred into a tab and change the parent region as html region created above.