Asp.net tabcontrol

下面介绍实现方法：

一、拖拉一个Menu控件

这个控件是负责控件各个选项卡的，也就是最终呈现在用户面前的界面，并且我们指定每个选项卡的图片。

代码：

<asp:Menu ID="Menu1" runat="server" onmenuitemclick="Menu1_MenuItemClick"
            Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
            <Items>
                <asp:MenuItem Text="1" Value="0" ImageUrl="~/bb.gif"></asp:MenuItem>
                <asp:MenuItem Text="2" Value="1" ImageUrl="~/bb.gif"></asp:MenuItem>
                <asp:MenuItem Text="3" Value="2" ImageUrl="~/bb.gif"></asp:MenuItem>
            </Items>
       </asp:Menu>

 

二、拖拉一个Multiview控件

在Multiview控件中，分成多个view选项卡，这里我设置3个选项卡

代码：

 

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
            <asp:View ID="View1" runat="server">
            <table>
                <tr>
                    <td>tab view 1</td>
                </tr>
            </table>
            </asp:View>
            <asp:View ID="View2" runat="server">
            <table>
                <tr>
                    <td>tab view2</td>
                </tr>
            </table>
            </asp:View>
            <asp:View ID="View3" runat="server">
            <table>
                <tr>
                    <td>tab view 3</td>
                </tr>
            </table>
            </asp:View>           
            
        </asp:MultiView>

 

三、实现Menu的ItemClick事件

代码：

 

 protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
        for (int i = 0; i <= Menu1.Items.Count - 1; i++ )
        {
            if (i.ToString() == e.Item.Value)
            {
                Menu1.Items[i].ImageUrl = "aa.gif";
                MultiView1.ActiveViewIndex = i;
            }
            else
            {
                Menu1.Items[i].ImageUrl = "bb.gif";
            }
        }
    }

完成了。

 

这篇文章的Trackback链接