如何在asp.net webform中生成一个类tabcontrol控件

VS工具箱中并没有类似tabbar或tabcontrol控件,如果要实现类似的效果,可以选择tabscript或商业控件之类。当然如果比较简单的实现,也可以用menu和multiview的方法。具体实际在calc.xycost.com中可查看。代码如下:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="pipepaint.aspx.cs" Inherits="工程建设其他费用计算.Engineering.pipepaint" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        .auto-style1 {
            text-align: left;
        }
        .auto-style2 {
            font-size: x-large;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">


</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">    
    <div class="auto-style1">
        <strong>    <asp:Menu ID="Menu2" runat="server" OnMenuItemClick="Menu2_MenuItemClick" Orientation="Horizontal" StaticSubMenuIndent="16px" CssClass="auto-style2" Height="30px">
        <DynamicItemTemplate>
            <%# Eval("Text") %>
        </DynamicItemTemplate>
         <Items>
        <asp:MenuItem ImageUrl="~/images/heroAccent.png" 
                      Text="管道刷油绝热                             " Value="0"></asp:MenuItem>
        <asp:MenuItem ImageUrl="~/images/accent.png" 
                      Text="暖通刷油绝热                " Value="1"></asp:MenuItem>
     
    </Items>
    </asp:Menu>
        </strong>
    </div>
    <asp:MultiView     ID="MultiView1"    runat="server"    ActiveViewIndex="0"  >
   <asp:View ID="Tab1" runat="server"  >
        <table width="600" height="400" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                    <br />
                    <br />
                    TAB VIEW 1
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
     </asp:View>
    <asp:View ID="Tab2" runat="server">
        <table width="600px" height="400px" cellpadding=0 cellspacing=0>
            <tr valign="top">
                <td class="TabArea" style="width: 600px">
                <br />
                <br />
                    TAB VIEW 2
                    INSERT YOUR CONENT IN HERE
                    CHANGE SELECTED IMAGE URL AS NECESSARY
                </td>
            </tr>
        </table>
    </asp:View>

</asp:MultiView>
</asp:Content>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace 工程建设其他费用计算.Engineering
{
    public partial class pipepaint : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Menu2_MenuItemClick(object sender, MenuEventArgs e)
        {
            MultiView1.ActiveViewIndex = Int32.Parse(e.Item.Value);
           for (int i = 0; i <= Menu2.Items.Count-1; i++)
            {
                if (i == Int32.Parse(e.Item.Value) )
                    Menu2.Items[i].ImageUrl = "~/images/heroAccent.png";
                else
                    Menu2.Items[i].ImageUrl = "~/images/accent.png";
            }
        }
    }
}
0

评论0

请先

没有账号? 注册  忘记密码?

社交账号快速登录

微信扫一扫关注
扫码关注后会自动登录网站
普人特福的博客cnzz&51la for wordpress,cnzz for wordpress,51la for wordpress