ASP.Net/Components/Tab

Содержание

1 Creating a Basic TabStrip Control (VB.net)
2 Setting the Orientation of a TabStrip Control (VB.net)
3 Tab control Demo (C#)
4 tab control (VB.net)
5 TabStrip Control: tab clicked event (VB.net)
6 Use asp:Menu and asp:MultiView to create tab control (C#)
7 Using a TabStrip Control with a MultiPage Control (VB.net)
8 Using Images on a TabStrip Control (VB.net)
9 Using TabSeparator Controls with a TabStrip Control (VB.net)

Creating a Basic TabStrip Control (VB.net)

   <source lang="csharp">

<%@ Page Language=VB Debug=true %> <%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IEControls"

   Namespace="Microsoft.Web.UI.WebControls" 
   Assembly ="Microsoft.Web.UI.WebControls"

%> <HTML> <HEAD> <TITLE>Creating a Basic TabStrip Control</TITLE> </HEAD> <BODY LEFTMARGIN="40"> <form runat="server"> <IEControls:TabStrip

   id="MyTabStrip"
   runat="server"
   forecolor="DarkBlue"
   backcolor="DarkBlue"
   width="20%"
   >

</IEControls:TabStrip> </form> </BODY> </HTML>

      </source>

Setting the Orientation of a TabStrip Control (VB.net)

   <source lang="csharp">

<%@ Page Language=VB Debug=true %> <%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IEControls"

   Namespace="Microsoft.Web.UI.WebControls" 
   Assembly ="Microsoft.Web.UI.WebControls"

%> </SCRIPT> <HTML> <HEAD> <TITLE>Setting the Orientation of a TabStrip Control</TITLE> </HEAD> <BODY LEFTMARGIN="40"> <form runat="server"> <IEControls:TabStrip

   id="MyTabStrip"
   runat="server"
   orientation="Horizontal"
   >

</IEControls:TabStrip> </form> </BODY> </HTML>

      </source>

Tab control Demo (C#)

   <source lang="csharp">

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <script runat="server">

   protected void menuTabs_MenuItemClick(object sender, MenuEventArgs e)
   {
       multiTabs.ActiveViewIndex = Int32.Parse(menuTabs.SelectedValue);
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <style type="text/css">
       html
       {
           background-color:silver;
       }
       .menuTabs
       {
           position:relative;
           top:1px;
           left:10px;
       }
       .tab
       {
           border:Solid 1px black;
           border-bottom:none;
           padding:0px 10px;
           background-color:#eeeeee;
       }
       .selectedTab
       {
           border:Solid 1px black;
           border-bottom:Solid 1px white;
           padding:0px 10px;
           background-color:white;
       }
       .tabBody
       {
           border:Solid 1px black;
           padding:20px;
           background-color:white;
       }
   </style>
   <title>Menu Tab Strip</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:Menu
       id="menuTabs"
       CssClass="menuTabs"
       StaticMenuItemStyle-CssClass="tab"
       StaticSelectedStyle-CssClass="selectedTab"
       Orientation="Horizontal"
       OnMenuItemClick="menuTabs_MenuItemClick"
       Runat="server">
       <Items>
       <asp:MenuItem
           Text="Tab 1"
           Value="0" 
           Selected="true" />
       <asp:MenuItem
           Text="Tab 2" 
           Value="1"/>
       <asp:MenuItem
           Text="Tab 3"
           Value="2" />
           
       </Items>
   </asp:Menu>

   <asp:MultiView
       id="multiTabs"
       ActiveViewIndex="0"
       Runat="server">
       <asp:View ID="view1" runat="server">
       
       Contents of first tab
       
       </asp:View>
       <asp:View ID="view2" runat="server">
       
       Contents of second tab
       
       </asp:View>
       <asp:View ID="view3" runat="server">
       
       Contents of third tab
       
       </asp:View>
   </asp:MultiView>

   </form>

</body> </html>

      </source>

tab control (VB.net)

   <source lang="csharp">

<%@ Page Language=VB Debug=true %> <%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IEControls"

   Namespace="Microsoft.Web.UI.WebControls" 
   Assembly ="Microsoft.Web.UI.WebControls"

%> <script runat=server> </SCRIPT> <HTML> <HEAD> <TITLE>TabStrip and MultiPage Controls Sample Page</TITLE> </HEAD> <BODY> <form runat="server"> <IEControls:TabStrip

   id="MyTabStrip"
   runat="server"
   TargetID="MyMultiPage"
   Orientation="Horizontal"
   ForeColor="DarkBlue"
   BackColor="DarkBlue"
   >
   <IEControls:Tab 
       id="Tab1"
       runat="server"
       Text="Wizard Step 1" 
   />
   <IEControls:TabSeparator/>
   <IEControls:Tab 
       id="Tab2"
       runat="server"
       Text="Wizard Step 2" 
   />
   <IEControls:TabSeparator />
   <IEControls:Tab 
       id="Tab3"
       runat="server"
       Text="Wizard Step 3" 
   />
   <IEControls:TabSeparator/>

</IEControls:TabStrip> <IEControls:MultiPage

   id="MyMultiPage"
   runat="server"
   BorderStyle=9
   BorderWidth=3
   BorderColor="DarkBlue"
   >
   <IEControls:PageView>
       
Wizard Step 1: 
&nbsp
   </IEControls:PageView>
   <IEControls:PageView>
       
Wizard Step 2: 
&nbsp
   </IEControls:PageView>
   <IEControls:PageView>
       
Wizard Step 3: 
&nbsp
   </IEControls:PageView>

</IEControls:MultiPage> </Form> </BODY> </HTML>

      </source>

TabStrip Control: tab clicked event (VB.net)

   <source lang="csharp">

<%@ Page Language=VB Debug=true %> <%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IEControls"

   Namespace="Microsoft.Web.UI.WebControls" 
   Assembly ="Microsoft.Web.UI.WebControls"

%> <script runat=server> Sub TabStrip_Clicked(Sender As Object, E As EventArgs)

   lblMessage.Text = "You clicked tab number " _
       & MyTabStrip.SelectedIndex & "."

End Sub </SCRIPT> <HTML> <HEAD> <TITLE>Creating a Basic TabStrip Control</TITLE> </HEAD> <BODY LEFTMARGIN="40"> <form runat="server"> <IEControls:tabstrip

   id="MyTabStrip"
   runat="server"
   forecolor="DarkBlue"
   backcolor="DarkBlue"
   onselectedindexchange="TabStrip_Clicked"
   autopostback="True"
   >
   <IEControls:tab 
       id="Tab1"
       runat="server"
       text="&nbspThe first button&nbsp"
       tooltip="Click Me!!!"
   />
   <IEControls:tab 
       id="Tab2"
       runat="server"
       Text="&nbspThe second button&nbsp" 
   />
   <IEControls:tab 
       id="Tab3"
       runat="server"
       Text="&nbspThe third button&nbsp" 
   />

</IEControls:tabstrip>

<asp:label

   id="lblMessage"
   runat=server

/> </form> </BODY> </HTML>

      </source>

Use asp:Menu and asp:MultiView to create tab control (C#)

   <source lang="csharp">

/* ASP.NET 2.0 Unleashed (Unleashed) (Hardcover) by Stephen Walther

Publisher: Sams; Bk&CD-Rom edition (June 6, 2006)
Language: English
ISBN: 0672328232

/

<%@ Page Language="C#" %> <script runat="server">

   protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
   {
       int index = Int32.Parse(e.Item.Value);
       MultiView1.ActiveViewIndex = index;
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <style type="text/css">
       html
       {
           background-color:silver;
       }
       .tabs
       {
           position:relative;
           top:1px;
           left:10px;
       }
       .tab
       {
           border:solid 1px black;
           background-color:#eeeeee;
           padding:2px 10px;
       }
       .selectedTab
       {
           background-color:white;
           border-bottom:solid 1px white;
       }
       .tabContents
       {
           border:solid 1px black;
           padding:10px;
           background-color:white;
       }
   </style>
   <title>MultiView Tabs</title>

</head> <body>

   <form id="form1" runat="server">

   <asp:Menu
       id="Menu1"
       Orientation="Horizontal"
       StaticMenuItemStyle-CssClass="tab"
       StaticSelectedStyle-CssClass="selectedTab"
       CssClass="tabs"
       OnMenuItemClick="Menu1_MenuItemClick"
       Runat="server">
       <Items>
       <asp:MenuItem Text="Tab 1" Value="0" Selected="true" />
       <asp:MenuItem Text="Tab 2" Value="1" />
       <asp:MenuItem Text="Tab 3" Value="2" />
       </Items>    
   </asp:Menu>

   <asp:MultiView
       id="MultiView1"
       ActiveViewIndex="0"
       Runat="server">
       <asp:View ID="View1" runat="server">
           
This is the first view
           
This is the first view
           
This is the first view
           
This is the first view
       </asp:View>        
       <asp:View ID="View2" runat="server">
           
This is the second view
           
This is the second view
           
This is the second view
           
This is the second view
       </asp:View>        
       <asp:View ID="View3" runat="server">
           
This is the third view
           
This is the third view
           
This is the third view
           
This is the third view
       </asp:View>        
   </asp:MultiView>

   </form>

</body> </html>

      </source>

Using a TabStrip Control with a MultiPage Control (VB.net)

   <source lang="csharp">

<%@ Page Language=VB Debug=true %> <%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IEControls"

   Namespace="Microsoft.Web.UI.WebControls" 
   Assembly ="Microsoft.Web.UI.WebControls"

%> <HTML> <HEAD> <TITLE>Using a TabStrip Control with a MultiPage Control</TITLE> </HEAD> <BODY LEFTMARGIN="40"> <form runat="server"> <IEControls:tabstrip

   id="MyTabStrip"
   runat="server"
   targetid="MyMultiPage"
   >
   <IEControls:tab 
       id="Tab1"
       runat="server"
       text="&nbspName&nbsp"
       tooltip="Click Me!!!"
   />
   <IEControls:TabSeparator />
   <IEControls:tab 
       id="Tab2"
       runat="server"
       Text="&nbspEmail Address&nbsp" 
   />
   <IEControls:TabSeparator />
   <IEControls:tab 
       id="Tab3"
       runat="server"
       Text="&nbspPassword&nbsp" 
   />

</IEControls:tabstrip> <IEControls:multipage

   id="MyMultiPage"
   runat="server"
   selectedindex=0
   >
   <IEControls:PageView
       id="pv1"
       runat=server
       font-name="Arial"
       font-bold=True
       forecolor="yellow"
       backcolor="darkred"
   >
       Enter your name:

       <asp:textbox 
       id="txtName" 
       runat=server 
       />    
       

   </IEControls:PageView>    
   <IEControls:PageView
       id="pv2"
       runat=server
       font-name="Arial"
       font-bold=True
       forecolor="darkred"
       backcolor="yellow"
   >
       Enter your email address:

       <asp:textbox 
       id="txtEmail" 
       runat=server 
       />    
   </IEControls:PageView>    
   <IEControls:PageView
       id="pv3"
       runat=server
       font-name="Arial"
       font-bold=True
       forecolor="darkblue"
       backcolor="green"
   >
       Enter your password:

       <asp:textbox 
       id="txtPassword" 
       runat=server 
       />    
   </IEControls:PageView>

</IEControls:multipage> </form> </BODY> </HTML>

      </source>

Using Images on a TabStrip Control (VB.net)

   <source lang="csharp">

<%@ Page Language=VB Debug=true %> <%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IEControls"

   Namespace="Microsoft.Web.UI.WebControls" 
   Assembly ="Microsoft.Web.UI.WebControls"

%> <script runat=server> Sub Page_Load(ByVal Sender as Object, ByVal E as EventArgs) End Sub </SCRIPT> <HTML> <HEAD> <TITLE>Using Images on a TabStrip Control</TITLE> </HEAD> <BODY LEFTMARGIN="40"> <form runat="server"> <IEControls:tabstrip

   id="MyTabStrip"
   runat="server"
   >
   <IEControls:tab 
       id="Tab1"
       runat="server"
       text="&nbspThe first button&nbsp"
       defaultimageurl="3.ico"
       selectedimageurl="smile.ico"
       hoverimageurl="4.ico"
   />
   <IEControls:TabSeparator />
   <IEControls:tab 
       id="Tab2"
       runat="server"
       Text="&nbspThe second button&nbsp" 
       defaultimageurl="3.ico"
       selectedimageurl="smile.ico"
       hoverimageurl="4.ico"
   />
   <IEControls:TabSeparator />
   <IEControls:tab 
       id="Tab3"
       runat="server"
       Text="&nbspThe third button&nbsp" 
       defaultimageurl="3.ico"
       selectedimageurl="smile.ico"
       hoverimageurl="4.ico"
   />

</IEControls:tabstrip>

<asp:label

   id="lblMessage"
   runat=server

/> </form> </BODY> </HTML>

      </source>

Using TabSeparator Controls with a TabStrip Control (VB.net)

   <source lang="csharp">

<%@ Page Language=VB Debug=true %> <%@ Import Namespace="Microsoft.Web.UI.WebControls" %> <%@ Register TagPrefix="IEControls"

   Namespace="Microsoft.Web.UI.WebControls" 
   Assembly ="Microsoft.Web.UI.WebControls"

%> <HTML> <HEAD> <TITLE>Using TabSeparator Controls with a TabStrip Control</TITLE> </HEAD> <BODY LEFTMARGIN="40"> <form runat="server"> <IEControls:tabstrip

   id="MyTabStrip"
   runat="server"
   forecolor="DarkBlue"
   backcolor="DarkBlue"
   >
   <IEControls:tab 
       id="Tab1"
       runat="server"
       text="&nbspThe first button&nbsp"
       tooltip="Click Me!!!"
   />
   <IEControls:TabSeparator />
   <IEControls:tab 
       id="Tab2"
       runat="server"
       Text="&nbspThe second button&nbsp" 
   />
   <IEControls:TabSeparator />
   <IEControls:tab 
       id="Tab3"
       runat="server"
       Text="&nbspThe third button&nbsp" 
   />

</IEControls:tabstrip>

<asp:label

   id="lblMessage"
   runat=server

/> </form> </BODY> </HTML>

      </source>

ASP.Net/Components/Tab

Содержание

Creating a Basic TabStrip Control (VB.net)

Setting the Orientation of a TabStrip Control (VB.net)

Tab control Demo (C#)

tab control (VB.net)

TabStrip Control: tab clicked event (VB.net)

Use asp:Menu and asp:MultiView to create tab control (C#)

Using a TabStrip Control with a MultiPage Control (VB.net)

Using Images on a TabStrip Control (VB.net)

Using TabSeparator Controls with a TabStrip Control (VB.net)

Навигация

Персональные инструменты

Пространства имён

Варианты

Просмотры

Ещё

Поиск

Разделы

Инструменты

Навигация