AjaxControlToolKit--TabContainer コントロールの紹介コレクション
1. はじめに:
Tab 自体は、整理された Web ページのコンテンツをタブの形式で表示するコントロールである必要があります。 AJAX コントロール ツール キットのコントロールの中には、一部の TabPanel コントロールのキャリアである TabContainer コントロールがあり、各 TabPanel は、標準のPanel コントロールと同様に、他の ASP.NET コントロールのコンテナーになることができます。 TabPanel は、3 部構成の HeaderText、HeaderTemplate、ContentTemplate プロパティを通じてコンテンツを指定します。
TabContainer コントロールには、現在のページの状態を維持する機能があります。ページを更新すると、最後に選択したタブが選択されたままになり、各タブの操作可能なプロパティ ページも維持されます。
2. プロパティ:
TabContainer プロパティ:
a. ActiveTabChanged(Event): 選択されたタブが変更されたときにトリガーされるイベント (サーバー側イベント)。
b. OnClientActiveTabChanged: 選択したタブが変更されたときにトリガーされるクライアント側のスクリプト イベント。
c. CssClass - クライアントのパフォーマンスを定義するために使用される Css クラス スタイル。デフォルトのタブ テーマ スタイルを持ちますが、実際のニーズに応じて変更することもできます。
d. ActiveTabIndex - 選択したタブを初期化します。高さ - タブの高さ (タイトル バーを除く)
f. 幅 - タブの幅
g. スクロール バーを表示するかどうか (なし、水平、垂直、両方、または自動に設定可能)
TabPanelプロパティ:
a. タブ ページを表示するかどうか、このプロパティはクライアント スクリプトで変更できます
b. OnClientClick - クリックされたときにトリガーされるクライアント スクリプト イベントの名前
c. HeaderText - タブのタイトル
d. - タイトルの定義に使用される TemplateInstance.Single ITemplate
e.ContentTemplate - コンテンツの定義に使用される TemplateInstance.Single ITemplate
CssClass が Customer の場合、CssClass を CSS に設定できるという事実に特別な注意を払う必要があります。 、カスタマイズされた CSS が必要です。 属性は次のとおりです:
タブ CSS クラス
· .ajax__tab_header: A container element that wraps all of the tabs at the top of the TabContainer. Child CSS classes:.ajax__tab_outer. · .ajax__tab_outer: An outer element of a tab, often used to set the left-side background image of the tab.Child CSS classes: .ajax__tab_inner. · .ajax__tab_inner: An inner element of a tab, often used to set the right-side image of the tab. Child CSS classes:.ajax__tab_tab. · .ajax__tab_tab: An element of the tab that contains the text content. Child CSS classes:none. · .ajax__tab_body: A container element that wraps the area where a TabPanel is displayed. Child CSS classes: none. · .ajax__tab_hover . This is applied to a tab when the mouse is hovering over. Child CSS classes:.ajax__tab_outer. · .ajax__tab_active: This is applied to a tab when it is the currently selected tab. Child CSS classes:.ajax__tab_outer.
次の例では、いくつかのカスタム CSS スタイルが導入されます。
3. 例:
前のすべてのコントロールと同様に、最初に ajaxtoolkit テンプレートを作成する必要があります:
ステップ 1: ajaxtoolkit テンプレートを作成します:
次に、さらにいくつかのタブパネルを追加します。以下の各タブパネルのコンテンツは、上記のコンテンツからコピーできます。
ここで CssClass 属性を設定しているため、コントロールはデフォルトの Css スタイルを使用する代わりにこの Css をオーバーロードします。
ステップ 3: カスタマイズしたタブ スタイルを保存する CSS ファイルを作成する必要があります。
プロジェクトを右クリックし、[新しい項目の追加] をクリックして、stylee.css というファイルを作成し、