dojo布局BorderContainer

最新推荐文章于 2021-02-05 15:11:56 发布

qingqingzijinxin

最新推荐文章于 2021-02-05 15:11:56 发布

阅读量2.2k

点赞数

分类专栏： dojo学习文章标签： dojo

dojo学习专栏收录该内容

29 篇文章

订阅专栏

本文展示了一个使用Dojo Toolkit中的Dijit布局组件来构建网页布局的例子。该布局包括顶部区域显示标题信息，左侧边栏用于导航，而主要内容区域则展示了几个不同的内容组。通过这种方式，可以创建出响应式的、易于维护的网页布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html >
<head>
	<meta charset="utf-8">
        <title>Demo: Layout with Dijit</title>
	<link rel="stylesheet" href="style.css" media="screen">
	<link rel="stylesheet" href="dijit/themes/claro/claro.css">
	<script src="dojo/dojo.js"></script>
	<style type="text/css">
	</style>
	<script>
		require(["dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"], function(parser){
			parser.parse();
		});
	</script>
	
</head>
<body class="claro">
	<div id="appLayout" class="demoLayout"
		data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'headline'">
				<div class="centerPanel"
					data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'center'">
					<div>
						<h4>Group 1 Content</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
						sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
						Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
						ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit 
						in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
						Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
						mollit anim id est laborum.</p>
					</div>
					<div>
						<h4>Group 2 Content</h4>
					</div>
					<div>
						<h4>Group 3 Content</h4>
					</div>
				</div>

				<div class="edgePanel"
					data-dojo-type="dijit/layout/ContentPane"
					data-dojo-props="region: 'top'">Header content (top)</div>
				<div id="leftCol" class="edgePanel"
				data-dojo-type="dijit/layout/ContentPane"
				data-dojo-props="region: 'left', splitter: true">Sidebar content (left)</div>
	</div>
</body>
</html>