asp.net AjaxControlToolKit--TabContainer控件的介紹

更新時間：2009年06月29日 00:03:35 作者：

ModalPopup控件允許一個asp頁面的部分內(nèi)容以對話框的模式顯示給用戶,同時會限制用戶于頁面的其他部分交互。對話框顯示的內(nèi)容可以是一個層級,這個層級的背景可以使用戶自定義的格式,簡單的理解好比是一個對話框彈出來后,主頁面會顯示灰色,且不可操作。

AjaxControlToolKit--TabContainer控件的介紹收藏

1. Introduction:
Tab本身就應該是個以頁簽形式顯示組織網(wǎng)頁內(nèi)容的一個控件。在AJAX Control Tool Kit的控件中有TabContainer控件,它是一些TabPanel控件的載體,而每個TabPanel可以像標準的Panel控件一樣,成為其它一些ASP.NET控件的容器。TabPanel通過它的三部分結構HeaderText, HeaderTemplate和ContentTemplate屬性來指定它的內(nèi)容。
TabContainer控件具有保持當前頁面狀態(tài)的能力。當頁面發(fā)生刷新后,最新被選中的Tab將被保持其選中的狀態(tài);此外每個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屬性部分。
TabContainer屬性:
a. ActiveTabChanged(Event): 當選中的Tab被改變的時候觸發(fā)的事件(服務器端事件)。
b. OnClientActiveTabChanged: 當選中的Tab改變時觸發(fā)的客戶端腳本事件。
c. CssClass - 被用于定義其客戶表現(xiàn)的 Css Class 樣式，它具有默認的 Tab 主題樣式，但是也可以根據(jù)實際需要進行修改
d. ActiveTabIndex - 初始化被設置為選中的 Tab
e. Height - 其中 Tab 的高度(不包括其標題欄)
f. Width - 其中 Tab 的寬度
g. ScrollBars - 是否顯示滾動條，可以設置為、None、Horizontal、Vertical、Both 或者 Auto
TabPanel屬性:
a. Enabled - 是否顯示該 Tab 頁，該屬性可以在客戶端腳本中改變
b. OnClientClick - 當被點擊時觸發(fā)的客戶端腳本事件名稱
c. HeaderText - Tab 標題
d. HeaderTemplate - 一個 TemplateInstance.Single ITemplate 用來其定義標題
e. ContentTemplate - 一個 TemplateInstance.Single ITemplate 用來其定義內(nèi)容
特別需要注意的是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. 

那么自定義的header的Css就叫做； Customer.ajax_tab_header{…}/
在下面的例子中將會介紹幾個自定義的Css樣式。
3. Example:
和以前每個控件一樣,我們需要先建立一個ajaxtoolkit模版:
第一步: 創(chuàng)建一個ajaxtoolkit模板:

起個項目名字叫做AjaxControlToolKit_Tab。

第二步: 編輯default.aspx頁面,

首先需要在form的scriptmanager下方拖入一個TabContainer控件,然后設置它的屬性:

可以看出來每個tabcontainer中需要有tabpanel Panel的屬性中設置headertext,也就是這個tab的名字,然后每個panel中需要ContentTemplate來顯示內(nèi)容,隨便填寫點顯示的內(nèi)容。

然后再添加幾個tabpanel, 下面的每個tabpanel的內(nèi)容這里可以拷貝上面的內(nèi)容。
因為我這里設置了CssClass屬性,所以控件會重載這個Css而不是用默認的那個Css樣式。
第三步:我們需要創(chuàng)建一個Css文件來存放自定義的tab樣式。
右鍵project,點擊'Add New Item',創(chuàng)建一個叫做stylee.css文件, 然后在default.aspx文件的<Head>節(jié)點部分加上
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
這里附上用到的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;
}
第四步:向工程天添加用到的圖片:創(chuàng)建一個img文件夾, 然后加入圖片,用到的圖片在后面提供的代碼鏈接里可以下載.
4. 代碼下載:
打包下載

您可能感興趣的文章:

ASP.NET Core 2.0中Razor頁面禁用防偽令牌驗證
在這篇短文中，我將向您介紹如何ASP.NET Core2.0 Razor頁面中禁用防偽令牌驗證，對此有興趣的朋友參考學習下吧。
2018-01-01
TreeNodeCheckChanged事件觸發(fā)方法代碼實例
這篇文章主要介紹了TreeNodeCheckChanged事件觸發(fā)方法代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2020-12-12
ASP.NET?MVC實現(xiàn)多選下拉框
這篇文章介紹了ASP.NET?MVC實現(xiàn)多選下拉框的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-07-07
asp.net性能優(yōu)化之使用Redis緩存（入門）
本文主要介紹了asp.net性能優(yōu)化之使用Redis緩存的相關知識。具有很好的參考價值，下面跟著小編一起來看下吧
2017-03-03
通過RadioButton對DataList控件進行單選實例說明
本例實現(xiàn)通過RadioButton對DataList控件進行單選,aspx拉一個DataList控件，把RadioButton置于DataList的ItemTemplate模版內(nèi);在.aspx.cs內(nèi)為DataList控件綁定數(shù)據(jù),很實用的功能，感興趣的朋友可以了解下啊
2013-01-01
asp.net水晶報表參數(shù)字段在代碼中賦值的方法
這篇文章主要介紹了asp.net水晶報表參數(shù)字段在代碼中賦值的方法,實例分析了asp.net中水晶報表的使用技巧,需要的朋友可以參考下
2015-05-05
Asp.Mvc 2.0用戶的編輯與刪除實例講解(5)
這篇文章主要介紹了Asp.Mvc 2.0用戶的編輯與刪除功能,需要的朋友可以參考下
2015-08-08
基于.NET?7?的?QUIC?實現(xiàn)?Echo?服務的詳細過程
這篇文章主要介紹了基于.NET?7?的?QUIC實現(xiàn)Echo服務,下面的內(nèi)容中，我會介紹如何在.NET?中使用?Quic，文中結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-11-11
linq中的元素操作符
這篇文章介紹了linq中的元素操作符，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-03-03
利用.net core實現(xiàn)反向代理中間件的方法
這篇文章主要給大家介紹了關于利用.net core實現(xiàn)反向代理中間件的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用.net core具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-09-09