ASP.AJAX TabContainer/TabPanel 定制

Question

是否可以使用 AjaxToolkit 将选项卡的位置设置为选项卡容器的底部？ 你确实对CSS有一定的控制权，但我对CSS还不够了解，无法确定它是否可行？

谢谢

Answer 1

您无法使用此控件的现成版本，但您可以轻松修改源代码以创建您自己的版本。 查看 AjaxControlToolkit\Tabs\TabContainer.cs（如下）。 您需要颠倒顺序，以便 RenderHeader() 部分位于 RenderChildren() 部分下方。 或者，您可以向控件添加一个名为“RenderHeaderFirst”的属性或类似的属性来实现相同的功能：

    protected override void RenderContents(HtmlTextWriter writer)
    {
        Page.VerifyRenderingInServerForm(this);

        // rendering the tabs (header)
        writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_header");
        writer.RenderBeginTag(HtmlTextWriterTag.Div);
        {
            RenderHeader(writer);
        }
        writer.RenderEndTag();

        // rendering the contents of the tabs (children)
        if (!Height.IsEmpty)
            writer.AddStyleAttribute(HtmlTextWriterStyle.Height, Height.ToString());

        writer.AddAttribute(HtmlTextWriterAttribute.Id, ClientID + "_body");
        writer.RenderBeginTag(HtmlTextWriterTag.Div);
        {
            RenderChildren(writer);
        }
        writer.RenderEndTag();
    }

PS 我自己还没有尝试过这个，但它看起来是正确的方向。

Answer 2

或者您可以只使用 TabContainer 的 TabStripPlacement 属性...

TabContainer Properties

• ActiveTabChanged (Event) - 当选项卡打开时在服务器端触发回发后更改
• OnClientActiveTabChanged - 附加到客户端 tabChanged 事件的 javascript 函数的名称
• CssClass - 用于定义自定义外观的 css 类覆盖对于选项卡。 有关更多详细信息，请参阅选项卡主题部分。
• ActiveTabIndex - 显示的第一个选项卡
• 高度 - 设置选项卡主体的高度（不包括 TabPanel 标题）
• 宽度 - 设置选项卡主体的宽度
• ScrollBars - 是否在 TabContainer 主体中显示滚动条（无、水平、垂直、双向、自动）
• TabStripPlacement - 是否渲染容器顶部或底部的选项卡（顶部、底部）