asp.net Coolite TablePanel使用

其中content.html的代碼如下代碼片段,下圖為運(yùn)行效果截圖:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title></title>
<style type="text/css">
body{font-size:12px;}
</style>
</head>
<body>
TabPanel控件學(xué)習(xí)
</body>
</html>

TabPanel最靈活的是動(dòng)態(tài)的創(chuàng)建子標(biāo)簽選項(xiàng),想了解這個(gè)創(chuàng)建過(guò)程的實(shí)現(xiàn)原理請(qǐng)查閱我之前寫(xiě)的兩篇文章(本文前面有文章連接),需要注意的是不能通過(guò)同步的事件驅(qū)動(dòng)去創(chuàng)建,一但頁(yè)面PostBack新創(chuàng)建的所有標(biāo)簽選項(xiàng)將被全部清除。如果一定要通過(guò)服務(wù)端后臺(tái)代碼去動(dòng)態(tài)創(chuàng)建,可使用Coolite Toolkit所提供的AjaxEvent機(jī)制。
protected void CreataTab_Click(object sender, AjaxEventArgs e)
{
var tab = new Tab("通過(guò)AjaxEvent新增Tab");
tab.TabIndex = short.Parse("11");
tab.ID = "tabID";
tab.AutoLoad.Url = "http://www.dbjr.com.cn";
tab.AutoLoad.NoCache = true;
tab.AutoLoad.Mode = LoadMode.IFrame;
this.tabPanel.Tabs.Add(tab);
this.tabPanel.ActiveTab = tab;
}
<ext:Button ID="btnCreateTab" runat="server" Text="動(dòng)態(tài)添加子標(biāo)簽選項(xiàng)">
<AjaxEvents>
<Click OnEvent="CreataTab_Click">
<EventMask ShowMask="true" Msg="正在加載"/>
</Click>
</AjaxEvents>
</ext:Button>
個(gè)人覺(jué)得通過(guò)同步方式創(chuàng)建頁(yè)面總是會(huì)晃動(dòng)一下,閃著讓人很不爽。推薦通過(guò)客戶端動(dòng)態(tài)添加子標(biāo)簽選項(xiàng)的方式創(chuàng)建,TabPanel提供了相應(yīng)的客戶端API來(lái)完成這些操作。
<ext:Button ID="btnClient" runat="server" Text="添加Tab(Client)">
<Listeners>
<Click Handler="addTab(#{tabPanel}, 'tabCnblogs', 'http://www.dbjr.com.cn');" />
</Listeners>
</ext:Button>
通過(guò)JavaScript方法addTab()方法動(dòng)態(tài)創(chuàng)建,三個(gè)參數(shù)分別為:TabPanel控件ID,新創(chuàng)建的Tab的ID,西創(chuàng)建的Tab所呈現(xiàn)的內(nèi)容路徑。
<script type="text/javascript">
function addTab(tabPanel, id, url) {
var tab = tabPanel.getComponent(id);
if (!tab) {
tab = tabPanel.add({
id: id,
title: url,
closable: true,
autoLoad: {
showMask: true,
url: url,
mode:'iframe',
maskMsg: '正在加載 '
}
});
}
tabPanel.setActiveTab(tab);
}
</script>
客戶端創(chuàng)建的方式是純Ext的操作方式,TabPanel提供了API可直接獲取指定id的子Tab是否存在,使用這一功能就可以完美的處理互斥,以創(chuàng)建出唯一的Tab子標(biāo)簽選項(xiàng)。

TabPanel使用得多的就是用來(lái)處理多標(biāo)簽選項(xiàng)卡,另外多數(shù)時(shí)候是用作容器,其容器功能和Panel、Window等基本相同。就拿上一篇文章中創(chuàng)建的樹(shù)做示例吧,現(xiàn)在需要將樹(shù)顯示在TabPanel的一個(gè)子標(biāo)簽選項(xiàng)里,可以直接調(diào)用TabPanel的客戶端API方法addTab將一個(gè)存在的容器類(lèi)型控件添加到TabPanel,使其成為T(mén)abPanel的子Tab。

相關(guān)文章
VS2012下QT creator登錄對(duì)話框設(shè)計(jì)
這篇文章主要為大家詳細(xì)介紹了VS2012下QT creator登錄對(duì)話框的設(shè)計(jì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-06-06詳解ASP.NET Core 網(wǎng)站發(fā)布到Linux服務(wù)器
本篇文章主要介紹了ASP.NET Core 網(wǎng)站發(fā)布到Linux服務(wù)器 。具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04.NET中利用js讓子窗體向父頁(yè)面?zhèn)髦档膶?shí)現(xiàn)方法
.NET中利用js讓子窗體向父頁(yè)面?zhèn)髦档膶?shí)現(xiàn)方法,需要的朋友可以參考一下2013-02-02asp.net(C#)實(shí)現(xiàn)功能強(qiáng)大的時(shí)間日期處理類(lèi)完整實(shí)例
這篇文章主要介紹了asp.net(C#)實(shí)現(xiàn)功能強(qiáng)大的時(shí)間日期處理類(lèi),封裝了針對(duì)日期與時(shí)間的各種常用的判斷與計(jì)算功能,非常方便實(shí)用,需要的朋友可以參考下2016-06-06Asp.Net?Core?使用Monaco?Editor?實(shí)現(xiàn)代碼編輯器功能
在項(xiàng)目中經(jīng)常有代碼在線編輯的需求,比如修改基于Xml的配置文件,編輯Json格式的測(cè)試數(shù)據(jù)等。這篇文章主要介紹了Asp.Net?Core?使用Monaco?Editor?實(shí)現(xiàn)代碼編輯器功能,需要的朋友可以參考下2022-01-01ASP.NET Core 過(guò)濾器中使用依賴注入知識(shí)點(diǎn)總結(jié)
在本篇文章里小編給大家分享的是關(guān)于ASP.NET Core 過(guò)濾器中使用依賴注入的相關(guān)知識(shí)點(diǎn)內(nèi)容,需要的朋友們學(xué)習(xí)下。2019-10-10- 就是有時(shí)候窗口不能夠成功置頂,這時(shí)需要重新切換下標(biāo)簽,就可以置頂了,本文介紹C# SetWindowPos實(shí)現(xiàn)窗口置頂?shù)姆椒?/div> 2012-12-12
ASP.NET自定義Web服務(wù)器控件之Button控件
這篇文章主要介紹了ASP.NET自定義Web服務(wù)器控件之Button控件,詳細(xì)講述了Button控件的實(shí)現(xiàn)代碼、前臺(tái)頁(yè)面的調(diào)用以及對(duì)應(yīng)的事件響應(yīng)代碼,具有很好的參考借鑒價(jià)值,需要的朋友可以參考下2014-11-11最新評(píng)論