Dojo 学习笔记--TabContainer
发布时间：2020-12-16 21:37:24 所属栏目：百科 来源：网络整理
导读：Dojo 学习笔记--TabContainer 让页面更有条理：dijit.layout.TabContainer 当一个页面内容比较多，比较复杂的时候，可以用标签页，将功能类似的一些表 格或者信息放在同一个标签页内，用户可以方便的在不同的标签页之间切换，关 闭某个标签页，或者删除某个标
|
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 属性，直接加载一个页面。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |