BB猫!
返回

使用ajaxToolkit:TabContainer 控件

2023-05-20 自定义Header样式,并在顶部排列 687 0

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ViewState["ActiveTabIndex"] = 0;
            }

        }
        #region 标签控制        
        protected int GetActiveTabIndex()
        {// 获取选定的标签索引
            if (ViewState["ActiveTabIndex"] != null)
            {
                return Convert.ToInt32(ViewState["ActiveTabIndex"]);
            }
            else
            {
                return 0;
            }
        }
        protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e)
        {        // 更改选定的标签时更新ViewState
            ViewState["ActiveTabIndex"] = TabContainer1.ActiveTabIndex;
        }
        #endregion
    <style>
        .ajax__tab_header {
            display: flex;
            flex-direction: row;
            justify-content: left;
            margin-bottom: 0px;
        }

        .ajax__tab_tab {
            margin-right: 2px;
        }
    </style>
        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex='<%# GetActiveTabIndex() %>' OnActiveTabChanged="TabContainer1_ActiveTabChanged" CssTheme="None">
           <ajaxToolkit:TabPanel runat="server" ID="TabPanel1">
                <HeaderTemplate>
                    <button class="btn btn-info">
                        <span class="glyphicon glyphicon-user" style="font: x-large"></span>&nbsp;此处放置标签内容
                    </button>
                </HeaderTemplate>
                <ContentTemplate>
                   --->此处放置内容<---
                </ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>


点赞 收藏

顶部