一：TabPanel組件簡介
二：簡單代碼示例
三：使用iframe作為tab的標簽頁內容
四：動態添加tabpanel的標簽頁
五：為tabpanel標簽頁添加右鍵菜單
方式一：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var mytable = new Ext.TabPanel({
renderTo: Ext.getBody(),
width: 200,
activeTab: 0,//激活的頁數
frame: true, //出現渲染的邊框
items: [
{
title:"tab1",
html:"tab1 content"
},
{
title:"tab2",
html:"tab2 content"
}
]
});
})
</script>
</head>
<body>
</body>
</html>
方式二：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var tabs = new Ext.TabPanel({
renderTo: 'my-tabs',
activeTab: 0,
width:200,
items: [
{ contentEl: 'tab1', title: 'aaa' },
{ contentEl: 'tab2', title: 'bbb' }
]
});
});
</script>
</head>
<body>
<div id="my-tabs">
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>
</div>
效果：
幾個相關參數
1.tabPosition:“bottom”//選項卡的位置,枚舉值bottom,top.默認為top(只有top的時候才能選項卡的滾動!)
2.tabTip:“提示”//必須先調用Ext.QuickTips.init();才有效果
1.tabPosition:“bottom”//選項卡的位置,枚舉值bottom,top.默認為top(只有top的時候才能選項卡的滾動!)
2.tabTip:“提示”//必須先調用Ext.QuickTips.init();才有效果
3、經常我們有這么個情況,一個選項卡加載一個頁面,這里我提供一種不是很好但是很穩定的簡單方法(已經在項目中驗證沒有出現問題).
就是:使用iframe作為tab的標簽頁內容.
就是:使用iframe作為tab的標簽頁內容.
代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var testTab = new Ext.TabPanel({
renderTo: Ext.getBody(),
width: "100%",
height:500,
activeTab: 0,
frame: true,
items: [
{
contentEl:"mainFrame",
tabTip:"fengjian",
title:"加載頁面的標簽頁",
closable: true
}
]
});
});
</script>
</head>
<body style="margin:10px;">
<div>
<a href="javascript:void(0)" onclick="parent.frames['mainFrame'].location='http://www.cnblogs.com'">換成博客園</a>
<iframe id="mainFrame" name="mainFrame" src="http://www.baidu.com" frameborder="0" height="500px" width="100%" ></iframe>
</div>
</body>
</html>
點擊添加新的頁面：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var index = 0;
var tabsDemo = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
height: 700,
frame: true,
items: [
{
title: "autoLoad為html簡單頁面演示",
autoLoad: { url: "Tab1.aspx", scripts: true }
}
]
});
Ext.get("AddNewTab").on("click", function() {
tabsDemo.add({
title: "newtab" + index,
id: "newtab" + index,
html: "new tab" + index,
closable: true
});
tabsDemo.setActiveTab("newtab" + index);
index++;
//alert(index);
});
});
</script>
</head>
<body>
<a href="javascript:void(0)" id="AddNewTab">添加新頁面</a>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
aaaaaaaaaaaaaa
</div>
</form>
</body>
</html>
為tabpanel標簽頁添加右鍵菜單
//幾個參數說明
1.enableTabScroll:true//前面已經說過了
2. listeners:{“contextmenu”:function(參數1,參數2,參數3){.}}
//右鍵菜單事件，三個參數分別為當前tabpanel，當前標簽頁panel，事件對象e
每個標簽頁都有激活和去激活事件
activate和deactivate，他們的執行函數有個參數，就是當前標簽頁。
例子：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script src="Ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="Ext/ext-all.js" type="text/javascript"></script>
<script src="Ext/ext-lang-zh_CN.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function() {
var index = 0;
function addTab() {
tabsDemo.add({
title: "tab" + index,
id: "newtab" + index,
html: "new tab " + index,
closable: true
});
tabsDemo.setActiveTab("newtab" + index);
index++;
}
var tabsDemo = new Ext.TabPanel({
renderTo: Ext.getBody(),
activeTab: 0,
height: 200,
enableTabScroll: true,
frame: true,//透明度
items: [{ //監聽右鍵菜單 傳遞的參數：1.TabPanel 2.每一項的值 3.事件
title: "首頁",
html: "first Page"
}],
listeners: {
"contextmenu": function(tdemo, myitem, e) {
menu = new Ext.menu.Menu([
{
text: "關閉當前頁",
handler: function() {
tdemo.remove(myitem);
}
},
{
text: "關閉其他所有頁",
handler: function() {
tdemo.items.each(function(item) {
if (item.closable && item != myitem) {
tdemo.remove(item);
}
});
}
},
{
text: "新建標簽頁",
handler: addTab
}
]);
menu.showAt(e.getPoint());
}
}
});
});
</script>
</head>
<body>
<a href="javascript:void(0)" id="AddNewTab">添加新頁面</a>
</body>
</html>
效果圖：