Tabs in HTA
Like_Wise
example? I just want to be able to have multiple input pages and I figure
tabs would be the best way to go. Thanks in advance.
McKirahan
news:91E4B24C-2FD9-4CBD...@microsoft.com...
Will this help? Watch for word-wrap.
<html>
<head>
<title>Tabs.hta</title>
<HTA:Application
ID = "HTA"
ApplicationName = "Tabs"
Border = "thin"
BorderStyle = "normal"
Caption = "yes"
ContextMenu="yes"
Icon = ""
InnerBorder="no"
MaximizeButton = "yes"
MinimizeButton = "yes"
Navigable="yes"
Scroll="yes"
SrollFlat="no"
Selection="yes"
ShowInTaskBar = "yes"
SingleInstance = "yes"
SysMenu = "yes"
Version = "1.0"
WindowState = "maximize"
>
<script type="text/javascript">
self.moveTo(0,0);
self.resizeTo(800,600);
var panels = new Array("","panel1","panel2","panel3","panel4","panel5");
function panel(tab) {
for (i=1; i<panels.length; i++) {
if (i == tab) {
document.getElementById("tab"+i).className = "tabs tabs1";
document.getElementById("panel"+i).style.display = "block";
} else {
document.getElementById("tab"+i).className = "tabs tabs0";
document.getElementById("panel"+i).style.display = "none";
}
}
}
</script>
<style type="text/css">
body,td,th { font-family:Arial }
.head { font-size:110%; font-weight:bold }
.panel {
background-color: white;
border: solid 1px black;
height: 410px;
padding: 5px;
position: relative;
width: 650px;
z-index: 0;
}
.tabs {
border-collapse: collapse;
color: black;
cursor: pointer;
cursor: hand;
font-family: arial;
font-size: 9pt;
font-weight: bold;
margin-top: 4px;
padding: 2px 4px 0px 4px;
position: relative;
text-align: center;
text-decoration: none;
z-index: 1;
}
.tabs0 {
background-color: wheat;
border: solid 1px black;
}
.tabs1 {
background-color: white;
border-color: black black white black;
border-style: solid solid solid solid;
border-width: 1px 1px 1px 1px;
}
</style>
</head>
<body>
<table align="center" border="0" cellpadding="0" cellspacing="0"
width="650">
<tr valign="top">
<td align="right" colspan="2">
<span class="head">Tabs in HTA!</span>
<br>
</td>
</tr>
<tr valign="top">
<td colspan="2">
<span class="tabs tabs1" id="tab1" onclick="panel(1)">Tab
1</span>
<span class="tabs tabs0" id="tab2" onclick="panel(2)">Tab
2</span>
<span class="tabs tabs0" id="tab3" onclick="panel(3)">Tab
3</span>
<span class="tabs tabs0" id="tab4" onclick="panel(4)">Tab
4</span>
<span class="tabs tabs0" id="tab5" onclick="panel(5)">Tab
5</span>
<div class="panel" id="panel1" style="display:block">
<hr color="black">
<table border="0" width="100%">
<tr valign="top">
<td>
<span class="head">This is Tab 1.</span>
<br><br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
</td>
</tr>
</table>
</div>
<div class="panel" id="panel2" style="display:none">
<hr color="black">
<table border="0" width="100%">
<tr valign="top">
<td>
<span class="head">This is Tab 2.</span>
<br><br>
Maecenas eget massa. Nam auctor. Proin blandit.
</td>
</tr>
</table>
</div>
<div class="panel" id="panel3" style="display:none">
<hr color="black">
<table border="0" width="100%">
<tr valign="top">
<td>
<span class="head">This is Tab 3.</span>
<br><br>
Phasellus mollis iaculis justo. Nullam arcu.
</td>
</tr>
</table>
</div>
<div class="panel" id="panel4" style="display:none">
<hr color="black">
<table border="0" width="100%">
<tr valign="top">
<td>
<span class="head">This is Tab 3.</span>
<br><br>
Phasellus lobortis elit a lacus.
</tr>
</table>
</div>
<div class="panel" id="panel5" style="display:none">
<hr color="black">
<table border="0" width="100%">
<tr valign="top">
<td>
<span class="head">This is Tab 5.</span>
<br><br>
Nunc commodo libero vitae magna.
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Like_Wise
Thanks so much.
"McKirahan" wrote:
> ..head { font-size:110%; font-weight:bold }
> ..panel {
> background-color: white;
> border: solid 1px black;
> height: 410px;
> padding: 5px;
> position: relative;
> width: 650px;
> z-index: 0;
> }
> ..tabs {
> border-collapse: collapse;
> color: black;
> cursor: pointer;
> cursor: hand;
> font-family: arial;
> font-size: 9pt;
> font-weight: bold;
> margin-top: 4px;
> padding: 2px 4px 0px 4px;
> position: relative;
> text-align: center;
> text-decoration: none;
> z-index: 1;
> }
> ..tabs0 {
> background-color: wheat;
> border: solid 1px black;
> }
> ..tabs1 {
> background-color: white;
> border-color: black black white black;
> border-style: solid solid solid solid;
> border-width: 1px 1px 1px 1px;
> }
> </style>
> </head>
> <body>
> <table align="center" border="0" cellpadding="0" cellspacing="0"
> width="650">
> <tr valign="top">
> <td align="right" colspan="2">
> <span class="head">Tabs in HTA!</span>
> <br>
> </td>
> </tr>
> <tr valign="top">
> <td colspan="2">
> <span class="tabs tabs1" id="tab1" onclick="panel(1)">Tab
> 1</span>
> <span class="tabs tabs0" id="tab2" onclick="panel(2)">Tab
> 2</span>
> <span class="tabs tabs0" id="tab3" onclick="panel(3)">Tab
> 3</span>
> <span class="tabs tabs0" id="tab4" onclick="panel(4)">Tab
> 4</span>
microsoftm...@gmail.com
tinoy...@gmail.com
Will it be alright if I can ask if you also have an example of HTA where there are tabs within tabs?
Thank you for your answer in advance.
Regards,
Tinoy Constantino
afn...@gmail.com
> "Like_Wise" <Like...@discussions.microsoft.com> wrote in message
> </html>
Wonderfull!
- Typing "hta tabs" on Google,
- finding your solution as the first result,
- copypasta your code in a test file,
- opening the test file with perfect result,
- reading easily the code.
McKirahan, you made my day even 11 years after answering. Many thanks!
