dojo layout.TabContainer 显示问题

最新推荐文章于 2021-12-20 16:51:59 发布

zhousheng193

最新推荐文章于 2021-12-20 16:51:59 发布

阅读量166

点赞数

分类专栏： dojo 文章标签： dojo layout 布局 TabContainer 显示问题

本文链接：https://blog.csdn.net/zhousheng193/article/details/84248602

版权

dojo 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

在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>

zhousheng193

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dojo layout.TabContainer 显示问题

在tabContainer上，如果closable=“true”时，有如下的不同效果异常效果图这都是!DOCTYPE惹的祸，如果html是以类似&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;开头的，Dijit la...
复制链接

扫一扫