APEX form tabs
(APEX 4.2.x)
I have used APEX since 3.2 release and always had a need to implement pages that include tab sub-regions. Since it is quite common user request that is why I posted this to possible offer you one more way of how you can create tabs on your APEX pages.
Both solutions are equally good but I wanted something even more simple so this is what I have used.
Cookbook:
1. Download these two scripts:
JavaSript code:
function
stringToPrepend(tabID, class_title){
//return prepand String based on tabID provided
//
tabID must match corresponding DIVs
var
htmlText = "<ul>";
//LOOP
through all tab divs where id like SubTabs
//and
create <UL> element
$("div[id^="+tabID+"]").each(function(i)
{
var position = i+1;
var tabTitle = $('div[class$=' + class_title + ']:first', this).text(); //
template class used here as Title if subregion then use only parent title
htmlText = htmlText
+ "<li><a href=#"
+ tabID
+ position
+ "><span id=span"
+ position
+ ">"
+ tabTitle
+ "</span></a></li>";
});
//end loop
htmlText
= htmlText + "</ul>";
return
htmlText;
} //end
stringToPrepend
function
appendTabChild(tabID, base){
//LOOP
through all tab divs where id like SubTabs
//and
append element to tab
$("div[id^="+tabID+"]").each(function(i)
{
var position = i+1;
var tabs = tabID + position;
$("div[id^="+tabs+"]").css('display', 'none');
}
base.appendChild(
$x(tabs));
});
//end loop
} //end
appendTabChild
// end JS
CSS code:
#base {
padding: 0px;
background: none;
border-width: 0px;
}
#base
.ui-tabs-nav {
padding-left: 0px;
margin-bottom: 2px;
background: transparent;
border-width: 0px 0px 0px 0px;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#base
.ui-tabs-panel {
background: #f5f3e5
url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png)
repeat-x scroll 50% top;
border-width: 0px 1px 1px 1px;
}
#base
.ui-tabs-nav li.ui-tabs-active {
background: #CCCCCC !important;
}
.ui-state-active
a, .ui-state-active a:link, .ui-state-active a:visited {
color: #296EB3;
}
.nr-title,
.rc-title{
font-size:10px;
}
2. Save them as .js and .css files
3. Upload them into your APEX environment
4. Add this to your APEX page header
<link
rel="stylesheet"
href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script
src="//code.jquery.com/jquery-1.10.2.js"></script>
<script
src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script
src="#WORKSPACE_IMAGES#Form_tab.js"></script>
<link
rel="stylesheet"
href="#WORKSPACE_IMAGES#Form_tab.css">
<script
type="text/javascript">
$(function() {
/****************
KEY PARAMETERS
1. create 3 html
regions
- first to be id=base or change the variables
in javascript with no template
- other two id = SubTabs1, 2 or change the variables in javascript
2. paste this
code into page header or include it as java script
WARNING:
'-title' class selector used and this might cause Tab title
to be empty if
Application template doesn't contain this
**************************************/
//html region
ID=base that holds all tabs
var container =
$("#base");
var base =
$x("base");
var tabs_id =
'SubTabs';
var v_class =
'-title'; //// template class used here as Title
//populate
container div with extended html
container.prepend(stringToPrepend(tabs_id,
v_class));
//append tabs
container.tabs();
appendTabChild(tabs_id,
base);
});
// end JQuery
function
</script>
5. Create one HTML region as
6. Create the rest of the regions with IDs: SubTabsx i.e 1,2,3,...... (or change JavaScript)
And that is it.
To summarize: Container region is where HTML will be generated.
I have tested this in 4.2.3 and 4.2.5 Theme 22, but I am sure it should work in other themes too.
The only thing to note is current scripts do not work if parent script does not contain a title. Sub-regions and nested regions should be supported plus nested regions can be without a title.
For any other problem I am sure you should be able to adjust these scripts to your needs.
CSS file is where you might want to change the appearance of your tabs.
Hope this helps.
SL
........
I have been playing with theme25. The only changes are
in header:
var v_class =
'Heading'; //// template class used here as Title
in javascript code:
function
stringToPrepend(tabID, class_title){
//return prepand String based on tabID
provided
// tabID must match corresponding DIVs
var htmlText = "<ul>";
//LOOP through all tab divs where id like
SubTabs
//and create <UL> element
$("section[id^="+tabID+"]").each(function(i)
{
var position = i+1;
//alert($("div[class$='-title']:first", this).text());
var tabTitle = $('div[class$=' + class_title
+ ']:first', this).text(); // template class used here as Title if subregion
then use only parent title
//alert('Here: ' + position /*+
$(this).text()*/ + tabTitle );
htmlText = htmlText
+ "<li><a href=#"
+ tabID
+ position
+ "><span id=span"
+ position
+ ">"
+ tabTitle
+
"</span></a></li>";
}); //end loop
htmlText = htmlText + "</ul>";
return htmlText;
} //end
stringToPrepend
function
appendTabChild(tabID, base){
//LOOP through all tab divs where id like
SubTabs
//and append element to tab
$("section[id^="+tabID+"]").each(function(i)
{
var position = i+1;
var tabs = tabID + position;
if(position > 1){
$("section[id^="+tabs+"]").css('display',
'none');
}
base.appendChild( $x(tabs));
}); //end loop
} //end
appendTabChild
