AjaxControlToolKit-TabContainerコントロールの紹介
5116 ワード
1. Introduction:
Tab自体は、組織のWebページの内容をページラベルで表示するコントロールであるべきです.AJAX Control Tool KitのコントロールにはTabContainerコントロールがあり、TabPanelコントロールの担体であり、各TabPanelは標準的なPanelコントロールのように他のASPになることができる.NETコントロールのコンテナ.TabPanelは、その3つの部分構造HeaderText、HeaderTemplate、ContentTemplate属性によってその内容を指定します.
TabContainerコントロールには、現在のページの状態を維持する機能があります.ページがリフレッシュされると、新しく選択されたTabは選択された状態を維持されます.また、各Tabの操作可能なプロパティページは保持できます.
2. Properties:
<ajaxToolkit:TabContainer runat="server" OnClientActiveTabChanged="ClientFunction" Height="150px"> <ajaxToolkit:TabPanel runat="server" HeaderText="Signature and Bio" <ContentTemplate> ... </ContentTemplate> /></ajaxToolkit:TabContainer>上はTabContainerの構造で、TabContainerの属性部分とTabPanelの属性部分の2つに分かれています.
TabContainerプロパティ:
a.ActiveTabChanged(Event):選択したTabが変更されたときにトリガーされるイベント(サーバ側イベント).
b.OnClientActiveTabChanged:選択したTabが変更されたときにトリガーされるクライアントスクリプトイベント.
c.CssClass-お客様のパフォーマンスを定義するために使用されるCss Classスタイルです.デフォルトのTabトピックスタイルがありますが、実際の必要に応じて変更することもできます.
d.ActiveTabIndex-選択したTabに初期化を設定
e.Height-Tabの高さ(タイトルバーを除く)
f.Width-Tabの幅
g.ScrollBars-スクロールバーを表示するか、None、Horizontal、Vertical、BothまたはAutoに設定できます
TabPanelプロパティ:
a.Enabled-Tabページを表示するかどうか、この属性はクライアントスクリプトで変更可能
b.OnClientClick-クリックされたときにトリガーされるクライアントスクリプトイベント名
c.HeaderText-Tabタイトル
d.HeaderTemplate-TemplateInstance.Single ITemplateは、タイトルを定義するために使用されます.
e.ContentTemplate-Template Instance.Single ITemplateコンテンツの定義に使用
特に注意しなければならないのは、CssClassがカスタムフォーマットのCSSに設定できることです.CssClassがCustomerの場合、カスタムCss属性は以下のとおりです.
Tabs Css classes
· .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. Example:
以前のコントロールと同様にajaxtoolkitテンプレートを作成する必要があります.
ステップ1:ajaxtoolkitテンプレートを作成するには:
プロジェクト名をAjaxControlToolKitと言いますTab.
ステップ2:defaultを編集します.aspxページ、
まず、formのscriptmanagerの下にTabContainerコントロールをドラッグし、そのプロパティを設定する必要があります.
各tabcontainerにはtabpanel Panelのプロパティにheadertext、つまりこのtabの名前を設定する必要があり、各panelにはContentTemplateが必要で、表示されている内容を勝手に記入する必要があることがわかります.
次にtabpanelをいくつか追加し、次のtabpanelの内容はここで上の内容をコピーすることができます.
ここでCssClassプロパティを設定したので、コントロールはデフォルトのCssスタイルではなく、このCssを再ロードします.
ステップ3:カスタムtabスタイルを保存するためにCssファイルを作成する必要があります.
プロジェクトを右クリックし、「Add New Item」をクリックしてstyleeという名前を作成します.cssファイル、default.aspxファイルのノード部分に
ここに使用するCssスタイルを添付します.
/* ajax__tab_ie-theme theme */
.ajax__tab_ie-theme .ajax__tab_header
{
padding-left:5px;
}
.ajax__tab_ie-theme .ajax__tab_header .ajax__tab_tab
{
margin-right:0px;
background:url(img/ie/tab_unselected.gif);
width:116px;
padding:9px 0px 3px 0px;
text-align:center;
color:#006699;
font-family:verdana;
font-size:13px;
display:block;
}
.ajax__tab_ie-theme .ajax__tab_active .ajax__tab_tab
{
padding:6px 0px 3px 0px;
background:url(img/ie/tab_selected.gif);
}
.ajax__tab_ie-theme .ajax__tab_body
{
background:url(img/ie/ie_tabbacker_720x296.jpg) no-repeat;
font-size:13px;
font-family:verdana;
height:296px;
width:716px;
}
.ajax__tab_ie-theme .ajax__tab_body div
{
padding:8px;
}
ステップ4:工事日に使用する画像を追加する:imgフォルダを作成し、画像を追加し、使用する画像は後で提供されるコードリンクでダウンロードすることができる.
4.コードのダウンロード:
http://dujingjing1230.download.csdn.net/