|
JavaXT
|
|
TabPanel Class
if(!javaxt) var javaxt={};
if(!javaxt.dhtml) javaxt.dhtml={};
//******************************************************************************
//** TabPanel
//******************************************************************************
/**
* Standard tab control used to show/hide individual panels.
*
******************************************************************************/
javaxt.dhtml.TabPanel = function(parent, config) {
this.className = "javaxt.dhtml.TabPanel";
var me = this;
var tabList;
var tabContent;
var defaultConfig = {
/** If true, will insert a "close" icon into the tab that will allow
* users to close/remove the tab from the tab panel.
*/
closable: false,
/** Style for individual elements within the component. Note that you can
* provide CSS class names instead of individual style definitions.
*/
style : {
tabBar: {
border: "1px solid #ccc",
backgroundColor: "#eaeaea",
height: "30px",
borderBottom: "0px"
},
activeTab: {
lineHeight: "30px",
padding: "0 7px",
backgroundColor: "#fafafa",
cursor: "default",
borderRight: "1px solid #ccc",
borderBottom: "1px solid #fafafa"
},
inactiveTab: {
lineHeight: "30px",
padding: "0 7px",
cursor: "pointer",
borderRight: "1px solid #ccc",
borderBottom: "0px"
},
tabBody: {
border: "1px solid #ccc",
verticalAlign: "top"
},
closeIcon: {
}
}
};
//**************************************************************************
//** Constructor
//**************************************************************************
var init = function(){
if (typeof parent === "string"){
parent = document.getElementById(parent);
}
if (!parent) return;
//Clone the config so we don't modify the original config object
var clone = {};
merge(clone, config);
//Merge clone with default config
merge(clone, defaultConfig);
config = clone;
//Create main table
var table = createTable(parent);
table.setAttribute("desc", me.className);
//Row 1
var td = table.addRow().addColumn();
setStyle(td, "tabBar");
td.style.width = "100%";
tabList = createElement("ul", td, {
listStyle: "none outside none",
height: "100%",
padding: 0,
margin: 0
});
//Row 2
var td = table.addRow().addColumn();
setStyle(td, "tabBody");
td.style.width = "100%";
td.style.height = "100%";
tabContent = createElement("div", td, {
width: "100%",
height: "100%",
position: "relative"
});
me.el = table;
};
//**************************************************************************
//** addTab
//**************************************************************************
/** Used to add a new tab to the panel.
* @param label Tab title.
* @param el Tab contents. Rendered when the tab is active. Accepts strings,
* DOM elements, and nulls
*/
this.addTab = function(label, el){
var div = createElement("div", tabContent, {
width: "100%",
height: "100%",
position: "absolute"
});
if (el==null) div.innerHTML = "";
else{
if (isElement(el)){
var p = el.parentNode;
if (p) p.removeChild(el);
div.appendChild(el);
}
else{
if (typeof el === "string"){
div.innerHTML = el;
}
}
}
var tab = createElement("li", tabList);
setStyle(tab, "inactiveTab");
tab.style.position = "relative";
tab.style.float = "left";
tab.style.height = "100%";
tab.innerHTML = label;
tab.el = div;
tab.onclick = function(){
raiseTab(this);
};
tab.onselectstart = function () {return false;};
tab.onmousedown = function () {return false;};
for (var i=0; i<tabList.childNodes.length; i++){
var t = tabList.childNodes[i];
if (t!==tab){
setStyle(t, "inactiveTab");
t.style.position = "relative";
t.style.float = "left";
t.style.height = "100%";
hideTabContent(t);
}
}
div.style.display='none'; //<-- style used to test whether the tab is visible (see raiseTab)
raiseTab(tab);
};
//**************************************************************************
//** getTabs
//**************************************************************************
/** Returns an of tabs in the tab panel. Each entry in the array will
* include the following:
* <ul>
* <li>name: Name of the tab and tab label</li>
* <li>header: DOM element for the tab header</li>
* <li>body: DOM element for the tab content</li>
* <li>hidden: Boolean</li>
* <li>active: Boolean</li>
* </ul>
*/
this.getTabs = function(){
var tabs = [];
for (var i=0; i<tabList.childNodes.length; i++){
var tab = tabList.childNodes[i];
tabs.push(getTabInfo(tab));
}
return tabs;
};
//**************************************************************************
//** raiseTab
//**************************************************************************
/** Used to raise a tab
* @param id Accepts a tab index (stating at 0) or a tab name
*/
this.raiseTab = function(id){
var tab = findTab(id);
if (tab) raiseTab(tab);
};
var raiseTab = function(tab){
if (tab.style.display === 'none') return; //tab is hidden
if (tab.el.style.display === 'none'){
//Find current tab
var currTab = null;
for (var i=0; i<tabList.childNodes.length; i++){
var t = tabList.childNodes[i];
if (t.el.style.display === 'block'){
currTab = t;
break;
}
}
//Make tab active
setStyle(tab, "activeTab");
tab.style.position = "relative";
tab.style.float = "left";
tab.style.height = "100%";
tab.el.style.display = '';
//Make other tabs inactive
for (var i=0; i<tabList.childNodes.length; i++){
var t = tabList.childNodes[i];
if (t!==tab){
if (t.style.display !== 'none'){
setInactive(t);
}
}
}
//Display tab content
tab.el.style.display = 'block';
tab.el.style.zIndex = 1; //this was added so groupboxes in forms would render correctly
//Call onTabChange
me.onTabChange(getTabInfo(tab), getTabInfo(currTab));
}
};
//**************************************************************************
//** getTabInfo
//**************************************************************************
var getTabInfo = function(tab){
if (tab==null) return null;
var hidden = (tab.style.display === 'none');
var active = (tab.el.style.display !== 'none');
return {
name: tab.innerText,
el: tab.el, //should be renamed to body or content
header: tab,
body: tab.el,
hidden: hidden,
active: active
};
};
//**************************************************************************
//** setActiveTab
//**************************************************************************
/** Same as raiseTab()
* @param id Accepts a tab index (stating at 0) or a tab name
*/
this.setActiveTab = this.raiseTab;
//**************************************************************************
//** onTabChange
//**************************************************************************
/** Called whenever a tab is raised.
*/
this.onTabChange = function(currTab, prevTab){};
//**************************************************************************
//** removeTab
//**************************************************************************
/** Used to remove a tab from the tab panel.
* @param id Accepts a tab index (stating at 0) or a tab name
*/
this.removeTab = function(id){
var tab = findTab(id);
if (tab){
var nextTab = tab.nextSibling;
if (!nextTab) nextTab = tab.previousSibling;
tabContent.removeChild(tab.el);
tabList.removeChild(tab);
if (nextTab) raiseTab(nextTab);
}
};
//**************************************************************************
//** hideTab
//**************************************************************************
/** Used to hide a tab in the tab panel. Unlike the removeTab() method, the
* tab will remain in the tab panel, but in a hidden state.
* @param id Accepts a tab index (stating at 0) or a tab name
*/
this.hideTab = function(id){
var tab = findTab(id);
if (tab){
if (tab.style.display === 'none') return;
var nextTab = tab.nextSibling;
if (!nextTab) nextTab = tab.previousSibling;
setInactive(tab);
tab.style.display = 'none';
hideTabContent(tab);
if (nextTab) raiseTab(nextTab);
}
};
//**************************************************************************
//** showTab
//**************************************************************************
/** Used to make a hidden tab visible. See hideTab()
* @param id Accepts a tab index (stating at 0) or a tab name
*/
this.showTab = function(id){
var tab = findTab(id);
if (tab) tab.style.display = '';
};
//**************************************************************************
//** findTab
//**************************************************************************
var findTab = function(id){
if (isNaN(id)){
if (typeof id === "string"){
for (var i=0; i<tabList.childNodes.length; i++){
var t = tabList.childNodes[i];
if (t.innerHTML === id ){
return t;
}
}
}
}
else{
if (id<tabList.childNodes.length){
return tabList.childNodes[id];
}
}
return null;
};
//**************************************************************************
//** setInactive
//**************************************************************************
/** Updated the style of a given tab and hides its contents.
*/
var setInactive = function(tab){
setStyle(tab, "inactiveTab");
tab.style.position = "relative";
tab.style.float = "left";
tab.style.height = "100%";
hideTabContent(tab);
};
//**************************************************************************
//** hideTabContent
//**************************************************************************
/** Used to hide the element/panel associated with a tab
*/
var hideTabContent = function(tab){
tab.el.style.display = 'none';
tab.el.style.zIndex = '';
};
//**************************************************************************
//** Utils
//**************************************************************************
var merge = javaxt.dhtml.utils.merge;
var createTable = javaxt.dhtml.utils.createTable;
var createElement = javaxt.dhtml.utils.createElement;
var isElement = javaxt.dhtml.utils.isElement;
var setStyle = function(el, style){
javaxt.dhtml.utils.setStyle(el, config.style[style]);
};
init();
};
|
|