L
lisa
Okay... maybe this has been done. I hate the Microsoft Tab and
Multipage controls. So I'm building my own Tabstrip control.
The style and DHTML isn't a problem. In fact, I'll post it at the end
of this for those who'd like it. It's probably IE only, but that's the
environment I'm working in.
Anyway, my question is how I deal with controls that are placed on the
tabs. I've read that I can use ReadWriteControlDesigner to enable
users to drag controls onto my tab control. And that they can add them
in the HTML, like this:
<tm:TabStrip>
<tm:Tab>
<table><tr><td>Hi there</td></tr></table>
</tm:Tab>
<tm:Tab>
<asp:TextBox Text="Hello World"/>
</tm:Tab>
<tm:Tab>
<asp:Button Value="Do Something on the Server" />
</tm:Tab>
</tm:TabStrip>
That all sounds cool, but I'm working on the CreateChildControls part
of the TabStrip control, and as I understand it, I need to recreate my
control every time the page is refreshed. So how do I store the
controls that have been added to my control, in order to be able to
recreate those as well?
Thanks to anyone who can help,
Lisa
PS: Here's the code for that DHTML tabstrip:
<html>
<head>
<style>
..taboff {
overflow: hidden;
height: 25px;
text-align: center;
font-family: system;
font-size: 8pt;
background: silver;
border: 3px outset;
border-bottom: inset;
padding-top:3px;
display: inline;
}
..tabon {
overflow: hidden;
height: 25px;
text-align: center;
font-family: system;
font-size: 8pt;
background: silver;
border: 3px outset;
border-bottom: none;
padding-top:3px;
display: inline;
}
..panel {
overflow: auto;
background: silver;
border: 3px outset;
border-top: none;
display: inline;
}
</style>
</head>
<body bgColor="white">
<form name="myform" method="post" id="myform">
</form>
</body>
<table cellspacing=0 cellpadding=0 border=0 width=450px>
<tr>
<td nowrap valign=middle>
<div class="tabon" style="width:150;cursor:hand;"
onclick="showMe(this)" name="tab_3" id="tab_3">
Tab the Third (my favorite tab)
</div>
<div class="tabon" style="width:150;cursor:hand;"
onclick="showMe(this)" name="tab_4" id="tab_4">
Tab the Fourth
</div>
<div class="tabon" style="width:150;cursor:hand;"
onclick="showMe(this)" name="tab_5" id="tab_5">
Tab the Fifth
</div>
</td>
</tr>
<tr>
<td nowrap valign=middle>
<div class="tabon" style="width:225;cursor:hand;"
onclick="showMe(this)" name="tab_1" id="tab_1">
Tab the First
</div>
<div class="taboff" style="width:225;cursor:hand;"
onclick="showMe(this)" name="tab_2" id="tab_2">
Tab the Second
</div>
</td>
</tr>
<tr>
<td>
<div class="panel" style="height:300;width:450;" name=masterPanel
id=masterPanel>
<div
style=display:inline;height=270;width=420;text-align:center
name="panel_1" id="panel_1">
<span style="color:green;font-family:impact;font-size:24pt">
You selected Tab One<br>
<button>test</button>
</span>
</div>
<div style=display:none;height=370;width=420;text-align:center
name="panel_2" id="panel_2">
<span
style="color:darkgoldenrod;font-family:arial;font-size:24pt;font-weight:bold">
You selected Tab Two
</span>
</div>
<div style=display:none;height=370;width=570;text-align:center
name="panel_3" id="panel_3">
<span style="color:red;font-family:comic sans
ms;font-size:24pt;font-weight:bold;text-align:center">
<p> <p>You selected Tab Three
</span>
</div>
<div style=display:none;height=270;width=570;text-align:center
name="panel_4" id="panel_4">
<span
style="color:chocolate;font-family:verdana;font-size:24pt;font-weight:bold">
You selected Tab Four
</span>
</div>
<div style=display:none;height=270;width=270;text-align:center
name="panel_5" id="panel_5">
<span style="color:teal;font-family:courier
new;font-size:24pt;font-weight:bold">
You selected Tab Five
</span>
</div>
</div>
</td>
</tr>
</table>
<script language=vbscript>
function showMe(obj)
'//select the panel
selectedPanelName = "panel_" & _
right(obj.name, len(obj.name) - instrrev(obj.name,"_"))
for each i in document.all.masterPanel.children
if i.name = selectedPanelName then
i.style.display = "inline"
else
i.style.display = "none"
end if
next
'//format the tabs
set objRow = obj.parentElement.parentElement
set objTable = objRow.parentElement
'//move the row that contains the selected tab down to just
'//above the masterPanel
objTable.moveRow objRow.rowIndex, objTable.rows.length-2
'//make the selected tab "tabon" and the others in its
'//row "taboff"
for each myTab in objRow.cells(0).children
if myTab.name = obj.name then
myTab.className = "tabon"
else
myTab.className = "taboff"
end if
next
'//make all the tabs that aren't in the selected tab's
'//row "tabon"
if objTable.rows.length > 2 then
for rowIdx = 0 to objTable.rows.length-3
for each myTab in objTable.rows(rowIdx).cells(0).children
myTab.className = "tabon"
next
next
end if
end function
</script>
</html>
Multipage controls. So I'm building my own Tabstrip control.
The style and DHTML isn't a problem. In fact, I'll post it at the end
of this for those who'd like it. It's probably IE only, but that's the
environment I'm working in.
Anyway, my question is how I deal with controls that are placed on the
tabs. I've read that I can use ReadWriteControlDesigner to enable
users to drag controls onto my tab control. And that they can add them
in the HTML, like this:
<tm:TabStrip>
<tm:Tab>
<table><tr><td>Hi there</td></tr></table>
</tm:Tab>
<tm:Tab>
<asp:TextBox Text="Hello World"/>
</tm:Tab>
<tm:Tab>
<asp:Button Value="Do Something on the Server" />
</tm:Tab>
</tm:TabStrip>
That all sounds cool, but I'm working on the CreateChildControls part
of the TabStrip control, and as I understand it, I need to recreate my
control every time the page is refreshed. So how do I store the
controls that have been added to my control, in order to be able to
recreate those as well?
Thanks to anyone who can help,
Lisa
PS: Here's the code for that DHTML tabstrip:
<html>
<head>
<style>
..taboff {
overflow: hidden;
height: 25px;
text-align: center;
font-family: system;
font-size: 8pt;
background: silver;
border: 3px outset;
border-bottom: inset;
padding-top:3px;
display: inline;
}
..tabon {
overflow: hidden;
height: 25px;
text-align: center;
font-family: system;
font-size: 8pt;
background: silver;
border: 3px outset;
border-bottom: none;
padding-top:3px;
display: inline;
}
..panel {
overflow: auto;
background: silver;
border: 3px outset;
border-top: none;
display: inline;
}
</style>
</head>
<body bgColor="white">
<form name="myform" method="post" id="myform">
</form>
</body>
<table cellspacing=0 cellpadding=0 border=0 width=450px>
<tr>
<td nowrap valign=middle>
<div class="tabon" style="width:150;cursor:hand;"
onclick="showMe(this)" name="tab_3" id="tab_3">
Tab the Third (my favorite tab)
</div>
<div class="tabon" style="width:150;cursor:hand;"
onclick="showMe(this)" name="tab_4" id="tab_4">
Tab the Fourth
</div>
<div class="tabon" style="width:150;cursor:hand;"
onclick="showMe(this)" name="tab_5" id="tab_5">
Tab the Fifth
</div>
</td>
</tr>
<tr>
<td nowrap valign=middle>
<div class="tabon" style="width:225;cursor:hand;"
onclick="showMe(this)" name="tab_1" id="tab_1">
Tab the First
</div>
<div class="taboff" style="width:225;cursor:hand;"
onclick="showMe(this)" name="tab_2" id="tab_2">
Tab the Second
</div>
</td>
</tr>
<tr>
<td>
<div class="panel" style="height:300;width:450;" name=masterPanel
id=masterPanel>
<div
style=display:inline;height=270;width=420;text-align:center
name="panel_1" id="panel_1">
<span style="color:green;font-family:impact;font-size:24pt">
You selected Tab One<br>
<button>test</button>
</span>
</div>
<div style=display:none;height=370;width=420;text-align:center
name="panel_2" id="panel_2">
<span
style="color:darkgoldenrod;font-family:arial;font-size:24pt;font-weight:bold">
You selected Tab Two
</span>
</div>
<div style=display:none;height=370;width=570;text-align:center
name="panel_3" id="panel_3">
<span style="color:red;font-family:comic sans
ms;font-size:24pt;font-weight:bold;text-align:center">
<p> <p>You selected Tab Three
</span>
</div>
<div style=display:none;height=270;width=570;text-align:center
name="panel_4" id="panel_4">
<span
style="color:chocolate;font-family:verdana;font-size:24pt;font-weight:bold">
You selected Tab Four
</span>
</div>
<div style=display:none;height=270;width=270;text-align:center
name="panel_5" id="panel_5">
<span style="color:teal;font-family:courier
new;font-size:24pt;font-weight:bold">
You selected Tab Five
</span>
</div>
</div>
</td>
</tr>
</table>
<script language=vbscript>
function showMe(obj)
'//select the panel
selectedPanelName = "panel_" & _
right(obj.name, len(obj.name) - instrrev(obj.name,"_"))
for each i in document.all.masterPanel.children
if i.name = selectedPanelName then
i.style.display = "inline"
else
i.style.display = "none"
end if
next
'//format the tabs
set objRow = obj.parentElement.parentElement
set objTable = objRow.parentElement
'//move the row that contains the selected tab down to just
'//above the masterPanel
objTable.moveRow objRow.rowIndex, objTable.rows.length-2
'//make the selected tab "tabon" and the others in its
'//row "taboff"
for each myTab in objRow.cells(0).children
if myTab.name = obj.name then
myTab.className = "tabon"
else
myTab.className = "taboff"
end if
next
'//make all the tabs that aren't in the selected tab's
'//row "tabon"
if objTable.rows.length > 2 then
for rowIdx = 0 to objTable.rows.length-3
for each myTab in objTable.rows(rowIdx).cells(0).children
myTab.className = "tabon"
next
next
end if
end function
</script>
</html>