I have something simmilar
Bellow you can find a code for code for a Tab control.
You can take it as is and dump into some .cs file
Use:
<%@ Register Namespace="George.Controls" TagPrefix="cc1" %>
<cc1:GTabsView ID="tbTabs" runat="server" Visible=false>
<cc1:GTabPage ID="t1" TabName="Info">
TAB 1 here
</cc1:GTabPage>
<cc1:GTabPage ID="t2" TabName="Info 2">
TAB 2 here
</cc1:GTabPage>
</cc1:GTabsView>
You can look how it's done.
George.
---------------------------START OF CODE--------------
using System;
using System.Text;
using System.ComponentModel;
using System.Web;
using System.Web.UI;
using System.Drawing;
using System.Web.UI.WebControls;
using System.Collections;
namespace George.Controls
{
[
ToolboxData(@"<{0}:TabsView runat=""server""></{0}:GTabsView>"),
ParseChildren(true, "Tabs")
//ParseChildren(false)
// Designer(typeof(TabsViewDesigner))
]
public class GTabsView : Control, IPostBackDataHandler, INamingContainer
{
private TabPageCollection _tabs;
private int _iSelectedTab = 0;
TextBox bx1;
string _sScriptToCall = null;
public GTabsView()
{
}
public string ScriptToCall
{
get { return _sScriptToCall; }
set { _sScriptToCall = value; }
}
public int CurrentTabIndex
{
get
{
return 1;
}
set
{
}
}
[
PersistenceMode(PersistenceMode.InnerDefaultProperty),
DefaultValue(null),
Browsable(false)
]
public int SelectedTab
{
get
{
return _iSelectedTab;
}
set
{
_iSelectedTab = value;
}
}
[
PersistenceMode(PersistenceMode.InnerDefaultProperty),
DefaultValue(null),
Browsable(false)
]
public virtual TabPageCollection Tabs
{
get
{
if (_tabs == null)
_tabs = new TabPageCollection(this);
return _tabs;
}
}
protected override void OnLoad(EventArgs e)
{
this.Page.RegisterHiddenField(this.UniqueID,
_iSelectedTab.ToString());
string sScript = "<script>\r\n" +
" function MakeActiveTab(iIndex)\r\n" +
"{\r\n" +
" document.getElementById(\"" + this.UniqueID +
"\").value = iIndex;\r\n" +
" for(i = 0; i <= 10; i++)\r\n" +
" {\r\n" +
" var objTab = document.getElementById(\"tab\" +
i);\r\n" +
" if( objTab == null )\r\n" +
" break;\r\n" +
" var objTabPanel =
document.getElementById(\"tb\" + i);\r\n" +
" if( i == iIndex )\r\n" +
" {\r\n" +
" objTab.className='selectedtab';\r\n" +
" objTabPanel.style.display='block';\r\n" +
" }\r\n" +
" else\r\n" +
" {\r\n" +
" objTab.className='tabheader';\r\n" +
" objTabPanel.style.display='none';\r\n" +
" }\r\n" +
" \r\n" +
" }\r\n";
if (_sScriptToCall != null)
sScript += _sScriptToCall;
sScript += "}\r\n" +
"</script>";
this.Page.RegisterClientScriptBlock("tabscript", sScript);
base.OnLoad(e);
}
protected override void Render(HtmlTextWriter writer)
{
// bx1.RenderControl(writer);
writer.Write("<div class=tabheader>");
writer.Write("<ul class=tabheader>");
int iIndex = 0;
foreach (GTabPage pg in _tabs)
{
if (!pg.Visible)
continue;
writer.Write("<li ");
if (iIndex == _iSelectedTab)
writer.Write("class=selectedtab");
else
writer.Write("class=tabheader");
writer.Write(" id=\"tab");
writer.Write(iIndex);
writer.Write("\" onClick=\"MakeActiveTab(");
writer.Write(iIndex);
writer.Write(");\"><a href=\"#\" onclick=\"javascript:return
false\">");
writer.Write(pg.TabName);
writer.Write("</a></li>");
iIndex++;
}
writer.Write("</ul></div>");
iIndex = 0;
foreach (GTabPage pg in _tabs)
{
if (!pg.Visible)
continue;
writer.Write("<div class=\"tabcontent\" ");
if (iIndex != _iSelectedTab)
writer.Write(" style=\"display:none\" ");
writer.Write("id=tb");
writer.Write(iIndex);
writer.Write(">");
pg.RenderControl(writer);
writer.Write("</div>");
iIndex++;
}
}
#region IPostBackDataHandler Members
public bool LoadPostData(string postDataKey,
System.Collections.Specialized.NameValueCollection postCollection)
{
_iSelectedTab = Int32.Parse(postCollection[this.UniqueID]);
return false;
}
public void RaisePostDataChangedEvent()
{
}
#endregion
}
public class TabPageCollection : IList, ICollection, IEnumerable
{
GTabsView _owner;
public TabPageCollection(GTabsView owner)
{
_owner = owner;
}
#region IList Members
public int Add(object value)
{
_owner.Controls.Add((Control)value);
return _owner.Controls.Count - 1;
}
public void Clear()
{
if (_owner.HasControls())
_owner.Controls.Clear();
}
public bool Contains(object value)
{
return _owner.Controls.Contains((Control)value);
}
public int IndexOf(object value)
{
return _owner.Controls.IndexOf((Control)value);
}
public void Insert(int index, object value)
{
_owner.Controls.AddAt(index, (Control)value);
}
public bool IsFixedSize
{
get { return false; }
}
public bool IsReadOnly
{
get { return false; }
}
public void Remove(object value)
{
_owner.Controls.Remove((Control)value);
}
public void RemoveAt(int index)
{
_owner.Controls.RemoveAt(index);
}
public object this[int index]
{
get
{
return _owner.Controls[index];
}
set
{
_owner.Controls.RemoveAt(index);
_owner.Controls.AddAt(index, (Control)value);
}
}
#endregion
#region ICollection Members
public void CopyTo(Array array, int index)
{
IEnumerator iEn = this.GetEnumerator();
while (iEn.MoveNext())
{
array.SetValue(iEn.Current, index);
index++;
}
}
public int Count
{
get { return _owner.Controls.Count; }
}
public bool IsSynchronized
{
get { return false; }
}
public object SyncRoot
{
get { return this; }
}
#endregion
#region IEnumerable Members
public IEnumerator GetEnumerator()
{
return _owner.Controls.GetEnumerator();
}
#endregion
}
[
ToolboxData(@"<{0}:TabPage runat=""server""></{0}:TabPage>"),
ToolboxItem(false),
ParseChildren(false)
]
public class GTabPage : Panel, INamingContainer
{
protected string _sTabName;
public string TabName
{
get
{
return _sTabName;
}
set
{
_sTabName = value;
}
}
}
}
---------------------------END OF CODE--------------
---------------- STYLES-------------
..tabheader ul{
list-style: none;
padding: 0;
margin: 0;
}
..tabheader li{
float: left;
border: 1px solid #bbb;
border-bottom-width: 0;
margin: 0;
}
..tabheader a {
text-decoration: none;
display: block;
background: #eee;
padding: 0.24em 1em;
color: #00c;
text-align: center;
}
..tabheader a:hover {
background: #ddf;
}
li.selectedtab {
border-color: black;
}
..selectedtab a{
position: relative;
top: 1px;
background:#F3F3E2;
color: black;
font-weight: bold;
}
..selectedtab a:hover{
position: relative;
top: 1px;
background:#ddf;
color: black;
font-weight: bold;
}
div.content {
border: 1px solid black;
clear: both;
padding: 0 1em;
}
-------------------- END OF STYLES
ivedOutput id="MyMessage" intNumPerPage="7" runat="server"/>