JQuery UI Tabs For APEX

Template.html

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

<script type="text/javascript">

	// Run on page load
	apex.jQuery(function() {

	// Before we invoce the tab() method to initialise the tabs, 
	// we will need to create a tab entry as first item which will be "Show All"
	// Its not mandatory but will often be required to show everthing.

	// Create the <li> element
	var elm_li_showAll = document.createElement("li");

	// Create the <a> element
	var elm_a_showAll = document.createElement("a");

	// Add "Show All" text to the <a> Element
	$(elm_a_showAll).html("Show All");

	// For IE, which doesn't work with concatenated hrefs
	$(elm_a_showAll).attr("id", "tabs-a-show-all");
	
	// Add a href attribute with a dummy "#" value, it will be overwritten below
	// with concatenated hrefs (comma separated).
	$(elm_a_showAll).attr("href", "#");

	// For IE which is unreliable with onclick events, using bind instead
	$(elm_a_showAll).bind( "click", function() {
		apex.jQuery("div.ui-tabs-hide").removeClass("ui-tabs-hide");
		return false;
	});
	

	// Append the <a> element to <li>
	$(elm_li_showAll).prepend($(elm_a_showAll));
	
	// Append the <li> to the subregion tablist <ul> element
	$("ul#tablist").prepend($(elm_li_showAll));

	// Join all href targets into 1 href target and append
	// this value to href of "Show All" tab
	var hrefs = "";  
	$("ul#tablist > li > a").each(function(k,v){
		if(k>0)
		{
			hrefs = hrefs.concat(v.getAttribute("href"));
			if(k != $("ul#tablist > li > a").size()-1)
				hrefs = hrefs.concat(",");
		}
	});

	$(elm_a_showAll).attr("href", hrefs);

	// Initialise the tab
	apex.jQuery("##REGION_STATIC_ID#").tabs();

	// To show all tabs, remove the ui-tabs-hide class from each child regions div
	$("div.ui-tabs-hide").removeClass("ui-tabs-hide");

 
});
</script>


<table class="t13FormRegion" cellpadding="0" cellspacing="0" border="0" summary="" id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
<thead class="t13RegionHeader">
<tr>
<th class="t13RegionTitle">#TITLE#</th>
<th class="t13RegionButtons">#CLOSE#&nbsp;&nbsp;#PREVIOUS##NEXT#&nbsp;#DELETE##EDIT##CHANGE##CREATE##CREATE2##EXPAND##COPY##HELP#</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2" class="t13RegionBody">
	<img src="#IMAGE_PREFIX#themes/theme_13/1px_trans.gif" height="1" width="500" alt="" />
<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
#BODY##SUB_REGION_HEADERS##SUB_REGIONS#
</div>
</td>
</tr>
</tbody>
</table>