<%@ Page Language="C#" Title="Project Details" %>
<html>
<head>
<title>Tabbed UI</title>
<style>
.tab{
//color: navy;
color: white;
//background-color: #ddddff;
background-color: navy;
border: thin solid navy;
position: absolute;
top: 13px;
width: 140px;
text-align: center;
font: 9pt verdana,sans-serif;
z-index: 2;
padding: 3px;
cursor: pointer;
cursor: hand;
}
.panel{
visibility: hidden;
color: navy;
border: thin solid navy;
position: absolute;
top: 35px;
left: 10px;
height: 85%;
width: 95%;
font: 12pt verdana, sans-serif;
z-index: 1;
padding: 10px;
overflow: auto; //forces browser to draw scrollbars if tab width exceeds page width
}
</style>
<script language="JavaScript">
var currentPanel;
//var tabBGColor = '#ddddff';
var tabBGColor = 'navy';
var tabBGColorSelected = '#ffffff';
//var tabTextColor = 'navy';
var tabTextColor = 'white';
var tabTextColorSelected = 'red';
var tabBorderColor = 'navy';
var tabBorderColorSelected = '#ffffff';
function showPanel(panelNum){
if (currentPanel != null) {
//call method to hide panel
hidePanel();
}
//show selected panel
document.getElementById('panel'+panelNum).style.visibility = 'visible';
//remember new visible panel
currentPanel = panelNum;
//call method to set tab corresponding to new panel
setState(panelNum);
}
function hidePanel(){
//hide visible panel
document.getElementById('panel'+currentPanel).style.visibility = 'hidden';
//recolor tab to that of unselected tab
document.getElementById('tab'+currentPanel).style.backgroundColor = tabBGColor;
//reset text color to that of unselected tab
document.getElementById('tab'+currentPanel).style.color = tabTextColor;
//set bottom border color to that of unselected tab
document.getElementById('tab'+currentPanel).style.borderBottomColor = tabBorderColor;
}
function setState(tabNum){
if(tabNum==currentPanel){
//recolor tab to that of selected tab
document.getElementById('tab'+tabNum).style.backgroundColor = tabBGColorSelected;
//reset text color to that of selected tab
document.getElementById('tab'+tabNum).style.color = tabTextColorSelected;
//set bottom border color to that of selected tab
document.getElementById('tab'+tabNum).style.borderBottomColor = tabBorderColorSelected;
}else{
//reset text color to that of unselected tab
document.getElementById('tab'+tabNum).style.color = tabTextColor;
}
}
function hover(tab){
tab.style.color = tabTextColorSelected;
}
</script>
</head>
<body onLoad="showPanel(1)">
<div id="loading" class="panel" style="visibility: visible; font: 12pt verdena, sans-serif;
color: navy;">Loading...</div>
<div id="tab1" class="tab" style="position: absolute; left: 10;"
onClick = "showPanel(1);"
onMouseOver="hover(this);"
onMouseOut="setState(1)">Revenue</div>
<div id="tab2" class="tab" style="position: absolute; left: 152px;"
onClick = "showPanel(2);"
onMouseOver="hover(this);"
onMouseOut="setState(2)">Expenses</div>
<!--watch for line breaks in URL's, they should be one line in the browser.-->
<iframe id="panel1" class="panel"
src="budget.aspx?ProjectId=5&BudgetTypeId=1" style="top: 35px; height: 85%">
</iframe>
<iframe id="panel2" class="panel"
src="budget.aspx?ProjectId=5&BudgetTypeId=2" style="top: 35px; height: 85%;">
</iframe>
</body>
</html>