asp.net - ASP.AJAX TabContainer/TabPanel のカスタマイズ

Question

AjaxToolkit を使用して、タブの位置をタブコンテナの下部に設定することは可能ですか? あなたは CSS をある程度制御できますが、私はそれが実現可能かどうかを確認するのに十分な CSS ではありませんか?

ありがとう

Answer 1

または、TabContainerのTabStripPlacementプロパティを使用することもできます...

TabContainer プロパティ

• ActiveTabChanged (イベント) - ポストバック後にタブが変更されたときにサーバー側で発生します
• OnClientActiveTabChanged - クライアント側の tabChanged イベントにアタッチする JavaScript 関数の名前
• CssClass - タブのカスタム ルック アンド フィールを定義するために使用される css クラス オーバーライド。詳細については、タブのテーマのセクションを参照してください。
• ActiveTabIndex - 表示する最初のタブ
• 高さ- タブの本体の高さを設定します (TabPanel ヘッダーは含まれません)。
• 幅- タブの本体の幅を設定します
• ScrollBars - TabContainer の本体にスクロールバー (None、Horizo​​ntal、Vertical、Both、Auto) を表示するかどうか
• TabStripPlacement - タブをコンテナーの上または下 (Top、Bottom) にレンダリングするかどうか

Answer 2

このコントロールの市販バージョンではできませんが、ソース コードを簡単に変更して独自のバージョンを作成できます。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私はこれを自分で試したことはありませんが、正しい方向のようです。