Source Code Helpers: Multiview Control To create Tabbed looks

Code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title>Tabbed pages</title>
<style type="text/css">
.style1
{
height: 31px;
}
</style>
<style type="text/css">
.Initial
{
display: block;
padding: 4px 18px 4px 18px;
float: left;
background: url("Images/InitialImage.png") no-repeat right top;
color: Black;
font-weight: bold;
}
.Initial:hover
{
color: White;
background: url("Images/SelectedButton.png") no-repeat right top;
}
.Clicked
{
float: left;
display: block;
background: url("Images/SelectedButton.png") no-repeat right top;
padding: 4px 18px 4px 18px;
color: Black;
font-weight: bold;
color: White;
}
</style>

</head>
<body>
<form id="form" runat="server">
<table cellspacing="10">
<tr>
<td class="style1"><asp:LinkButton ID="Link1" runat="server" CssClass="Initial">Package</asp:LinkButton></td>
<td class="style1"><asp:LinkButton ID="Link2" runat="server" CssClass="Initial">Itenary</asp:LinkButton></td>
<td class="style1"><asp:LinkButton ID="Link3" runat="server" CssClass="Initial">Link 3</asp:LinkButton></td>
</tr>
</table>
<asp:MultiView ID="MyMultiView" runat="server">
<asp:View ID="View1" runat="server">
Tab 1 - insert your content here

</asp:View>
<asp:View ID="View2" runat="server">
Tab 2 - insert your content here

</asp:View>
<asp:View ID="View3" runat="server">
Tab 3 - insert your content here

</asp:View>
</asp:MultiView>
</form>
</body>
</html>

Output :

Source Code Helpers

Tuesday, 26 February 2013

Multiview Control To create Tabbed looks

No comments:

Post a Comment