asp.net AjaxControlToolKit -- TabContainer コントロールの概要

AjaxControlToolKit--TabContainer コントロールの紹介コレクション

1. はじめに:
Tab 自体は、整理された Web ページのコンテンツをタブの形式で表示するコントロールである必要があります。 AJAX コントロール ツール キットのコントロールの中には、一部の TabPanel コントロールのキャリアである TabContainer コントロールがあり、各 TabPanel は、標準のPanel コントロールと同様に、他の ASP.NET コントロールのコンテナーになることができます。 TabPanel は、3 部構成の HeaderText、HeaderTemplate、ContentTemplate プロパティを通じてコン​​テンツを指定します。
TabContainer コントロールには、現在のページの状態を維持する機能があります。ページを更新すると、最後に選択したタブが選択されたままになり、各タブの操作可能なプロパティ ページも維持されます。
2. プロパティ:
.. />上記は TabContainer の構造で、TabContainer の属性部分と TabPanel の属性部分の 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 が呼び出されます; Customer.ajax_tab_header{…}/

次の例では、いくつかのカスタム CSS スタイルが導入されます。
3. 例:
前のすべてのコントロールと同様に、最初に ajaxtoolkit テンプレートを作成する必要があります:
ステップ 1: ajaxtoolkit テンプレートを作成します:

プロジェクト名 AjaxControlToolKit_Tab を作成します。

2 番目のステップ:default.aspx ページを編集します。

まず、フォームのスクリプトマネージャーの下に TabContainer コントロールをドラッグし、次にそのプロパティを設定する必要があります:

各タブコンテナにはタブパネルが必要であることがわかります。パネル タブの名前である属性にヘッダーテキストを設定すると、各パネルに表示されるコンテンツを表示するための ContentTemplate が必要になります。

次に、さらにいくつかのタブパネルを追加します。以下の各タブパネルのコンテンツは、上記のコンテンツからコピーできます。
ここで CssClass 属性を設定しているため、コントロールはデフォルトの Css スタイルを使用する代わりにこの Css をオーバーロードします。
ステップ 3: カスタマイズしたタブ スタイルを保存する CSS ファイルを作成する必要があります。
プロジェクトを右クリックし、[新しい項目の追加] をクリックして、stylee.css というファイルを作成し、

のノード部分に
使用する CSS スタイルを以下に示します。
/* ajax__tab_ie-theme .ajax__tab_header
{
padding-left:5px;
.ajax__tab_ie -theme .ajax__tab_header .ajax__tab_tab
{
margin-right:0px;
width:116px;
padding:9px 0px 3px 0px;
テキスト整列:center;
カラー:#006699;
フォントサイズ:13px;
.ajax__tab_active .ajax__tab_tab
{
padding:6px 0px 3ピクセル 0ピクセル
背景:url(img/ie/tab_selected.gif);
}
.ajax__tab_ie-theme .ajax__tab_body
background:url(img/ie/ie_tabbacker_720x296.jpg)
font-size:13px; -family:verdana ;
width:716px;
}
.ajax__tab_ie-theme .ajax__tab_body div
{
padding:8px;

ステップ 4: 画像フォルダーを作成します。そして写真を追加してください

asp.net AjaxControlToolKit--TabContainer コントロール導入関連記事の詳細については、PHP 中国語 Web サイトに注目してください。