在tabContainer上,如果closable=“true”时,有如下的不同效果
异常效果图
这都是!DOCTYPE惹的祸,如果html是以类似<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">开头的,
Dijit layout.TabContainer的效果就会像上面一样。
现在把!DOCTYPE 改为 <!DOCTYPE html> 采用html5标签类型,效果图如下:
附上整个的代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>dijit.layout.BorderContainer DOH Test</title>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<style type="text/css">
html,body
{
width:100%;
height:100%;
padding:0px;
margin:0px;
}
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true"></script>
<script type="text/javascript">
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.AccordionContainer");
</script>
</head>
<body class="claro">
<div id="container" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="gutters:true,liveSplitters:false" style="width: 100%; height: 100%;">
<div id="top" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top',splitter:false">
<p> 欢迎光临</p>
</div>
<div id="left" data-dojo-type="dijit.layout.AccordionContainer" data-dojo-props="minSize:20,region:'left',splitter:true">
<div data-dojo-type="dijit.layout.AccordionPane" title="first menu">first menu</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="second menu">second menu</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="third menu" selected="true">third menu</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="fourth menu">fourth menu</div>
<div data-dojo-type="dijit.layout.AccordionPane" title="fifth menu">fifth menu</div>
</div>
<div id="center" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region:'center',tabStrip:true">
<div data-dojo-type="dijit.layout.ContentPane" title="first tab"></div>
<div data-dojo-type="dijit.layout.ContentPane" title="second tab" selected="true">second tab</div>
<div data-dojo-type="dijit.layout.ContentPane" title="third tab" closable="true"></div>
</div>
<div id="bottom" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom',splitter:false" style="height:30px; overflow:hidden; vertical-align:middle" align="center">
<span>Copyright by CCTV</span>
</div>
</div>
</body>
</html>