Dojo學習4 讓頁面更有條理：dijit.layout.TabContainer

時間 2019-11-20

標籤 dojo 學習頁面有條理 dijit.layout.tabcontainer dijit layout tabcontainer 欄目 Dojo 简体版

原文原文鏈接

4. 讓頁面更有條理：dijit.layout.TabContainer
當一個頁面內容比較多，比較複雜的時候，能夠用標籤頁，將功能相似的一些表格或者信息放在同一個標籤頁內，用戶能夠方便的在不一樣的標籤頁之間切換，關閉某個標籤頁，或者刪除某個標籤頁。
一個最簡單的例子：
<html>
<head>
<title>Button Widget Dojo Tests</title>
<style type="text/css">
@import "../js/dojo/resources/dojo.css";
@import "../js/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="../js/dojo/dojo.js"></script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
</script>
</head>
<body class="tundra">
<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;" selectedChild="tab1">
<div id="tab1" dojoType="dijit.layout.ContentPane" title="Tab 1" closable="true">hi</div>
<div id="tab2" dojoType="dijit.layout.ContentPane" title="Tab 2">hi2</div>
</div>
</body>
</html>
若是不一樣的標籤也是單獨不通的文件，咱們能夠在dijit.layout.ContentPane組件上設置href屬性，指定到一個外部文件。須要注意的是，那個頁面必須是utf-8的字符集，不然的話中文會出現亂碼。例如：<div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2"></div>
若是要動態添加一個標籤頁的話能夠嘗試下面的例子：
<script>
function fff(){
var rrr=document.createElement("DIV");
var tmp = new dijit.layout.ContentPane({title:"tab3",closable:true},rrr);
tmp.setContent(" <iframe style='width:100%;height:100%;border:1px' border=1 src='http://www.baidu.com/'></iframe>");
dijit.byId("mainTabContainer").addChild(tmp);
dijit.byId("mainTabContainer").selectChild(tmp);
//dijit.byId("mainTabContainer").removeChild(dijit.byId("tab2"));
}
</script>
這個例子中使用了iframe，主要緣由：若是多個頁面的話，頗有可能有多個form，form之間若是有嵌套就會比較亂，因此分紅了獨立的iframe，固然徹底能夠在新建一個ContentPane的時候設置一下href屬性，直接加載一個頁面。javascript