I can't get this tabbed panel to work. I followed the instructions, but something is wrong. Could someone please let me know what I did wrong... and if you can get it to work? Thanks!
This part in the quotes (shown below in the code) I actually had it in a seperate script (called panel.js, but have since commented out and stuck it in the TabbedPanel.js as it did not work) but that didn't work either. I didn't know if I could create an instance all within the same script or not.
Quote:
//create the TabbedPanel object
var tabController = new TabbedPanel('tabControllerId',
document.getElementById('mainTabArea'), document.getElementById('mainPanelArea'));
//create a tab named 'Example'
var newTabPanel = tabController.CreateTab('Example');
//fill the contents of the new tab's panel
newTabPanel.innerHTML = "The example tab's contents";
//close the currently selected tab
tabController.CloseTabEl(tabController.currentHigh Tab);
|
http://www.switchonthecode.com/tutor...-tabbed-panels
Code:
<link rel="stylesheet" type="text/css" href="panel.css">
<div id="col_right">
<h1 id="title_header">Financials and News</h1>
<!--script type="text/javascript" src="Panel.js"></script-->
<script type="text/javascript" src="TabbedPanel.js"></script>
<div class="tabControl">
<table class="tabHolder" cellspacing="0" cellpadding="0"
onselectstart="return false;">
<tr id="mainTabArea">
<td style="font-size:1px;"> </td>
</tr>
</table>
<div id="mainPanelArea" class="tabPanel"></div>
</div>
</div>
Code:
//create the TabbedPanel object
var tabController = new TabbedPanel('tabControllerId',
document.getElementById('mainTabArea'), document.getElementById('mainPanelArea'));
//create a tab named 'Example'
var newTabPanel = tabController.CreateTab('Example');
//fill the contents of the new tab's panel
newTabPanel.innerHTML = "The example tab's contents";
//close the currently selected tab
tabController.CloseTabEl(tabController.currentHighTab);
function TabbedPanel(controllerName, tabElement, panelElement)
{
this.Name = controllerName;
this.tabNumber = 0;
this.currentHighPanel = null;
this.currentHighTab = null;
this.panelContainer = panelElement;
this.tabContainer = tabElement;
this.lowTabStyle = 'lowTab';
this.highTabStyle = 'highTab';
this.CreateTab = function(tabName)
{
var tabID = this.Name + 'Tab' + this.tabNumber;
var panelID = this.Name + 'Panel' + this.tabNumber;
var panel = document.createElement('div');
panel.style.left = '0px';
panel.style.top = '0px';
panel.style.width = '100%';
panel.style.height = '100%';
panel.style.display = 'none';
panel.tabNum = this.tabNumber;
panel.id = panelID;
if(this.panelContainer.insertAdjacentElement == null)
this.panelContainer.appendChild(panel)
else
this.panelContainer.insertAdjacentElement("beforeEnd",panel); //Internet Explorer
var cell = this.tabContainer.insertCell(this.tabContainer.cells.length);
cell.id = tabID;
cell.className = this.lowTabStyle;
cell.tabNum = this.tabNumber;
cell.onclick = this.OnTabClicked;
cell.innerHTML = tabName;
cell.panelObj = this;
this.TabClickEl(cell);
this.tabNumber++;
return panel;
}
this.OnTabClicked = function(event)
{
// Internet Explorer : Other
var el = (event.target == null) ? window.event.srcElement : event.target;
el.panelObj.TabClickEl(el);
}
this.TabClickEl = function (element)
{
if(this.currentHighTab == element)
return;
if(this.currentHighTab != null)
this.currentHighTab.className = this.lowTabStyle;
if(this.currentHighPanel != null)
this.currentHighPanel.style.display = 'none';
this.currentHighPanel = null;
this.currentHighTab = null;
if(element == null)
return;
this.currentHighPanel = document.getElementById(this.Name
+ 'Panel' + element.tabNum);
if(this.currentHighPanel == null)
return;
this.currentHighTab = element;
this.currentHighTab.className = this.highTabStyle;
this.currentHighPanel.style.display = '';
}
this.TabCloseEl = function(element)
{
if(element == null)
return;
if(element == this.currentHighTab)
{
var i = -1;
if(this.tabContainer.cells.length > 2)
{
i = element.cellIndex;
if(i == this.tabContainer.cells.length-2)
i = this.tabContainer.cells.length-3;
else
i++;
}
if(i >= 0)
this.TabClickEl(this.tabContainer.cells[i]);
else
this.TabClickEl(null);
}
var panel = document.getElementById(this.Name + 'Panel' + element.tabNum);
if(panel != null)
this.panelContainer.removeChild(panel);
this.tabContainer.deleteCell(element.cellIndex);
}
}
Code:
@charset "utf-8";
/* local CSS Document */
/*tabbed panel CSS */
.tabControl
{
width:500px; /* tab control width */
}
.lowTab, .highTab
{
background-repeat:no-repeat;
cursor:pointer;
width:75px; /* tab width */
}
.lowTab
{
background-image:url(images/tab_inactive_75x20.gif);
}
.highTab
{
background-image:url(images/tab_active_75x20.gif);
}
.tabHolder
{
width:100%;
height:20px; /* tab height */
border-collapse:collapse;
border-spacing:0px;
-moz-user-select:none; /* removes text selection */
}
.tabPanel
{
top:20px; /* should equal tab height */
left:0px;
width:100%;
height:50px; /* tab panel height */
background-color:#cad7e3;
border:1px solid #3c597b;
}
__________________
"Skin in behalf of skin. A man will give up everything he owns in exchange for his life. But stretch out Your hand and strike his flesh and bones, and he will surely curse You to Your face."
Last edited by pityocamptes; 12-17-2009 at 07:07 PM..
|
