Dojo 学习笔记--TabContainer

来源：互联网发布：百乐官方淘宝授权店编辑：程序博客网时间：2024/05/01 23:16

Dojo 学习笔记--TabContainer
让页面更有条理：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 属性，直接加载一个页面。