Thursday, 27 March 2014

Tabbed Look Using .Net Multiview Control

 

Tabbed Look Using .Net Multiview Control


Here is a trick to display tabbed menu using Multiview control and little bit CSS styling..


<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>

No comments:

Post a comment

Thank You for Your Comments. We will get back to you soon.

back to top