使用dijit的堆叠容器StackContainer

最新推荐文章于 2024-07-01 16:49:01 发布

转载最新推荐文章于 2024-07-01 16:49:01 发布 · 811 阅读

文章标签：

#dojo #dijit

dojo学习专栏收录该内容

29 篇文章

订阅专栏

本文介绍如何使用Dijit库创建堆叠容器，实现分步向导式的界面布局。通过HTML与JavaScript结合的方式，展示了堆叠容器及其控制器的基本用法。

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

堆叠容器

堆叠容器就是允许使用包含多个不同的子容器的容器，但每次仅有一个子容器可见（有时称之为卡片式布局）。如果您正在创建分步向导，那么这种布局组件尤为有用。让我们来看看如何创建 Dijit 堆叠容器，并通过一个堆叠控制器在堆叠的控制器之间进行导航。

<!doctype html>
<html lang="en" dir="ltr">
	<head>
	    <title>Dijit Template</title>
		<link rel="stylesheet" href="dijit/themes/claro/claro.css" />
		<style type="text/css">
			body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
		</style>
	</head>
	<body class="claro">
		<div dojoType="dijit.layout.StackContainer" id="stackContainer">
			<div dojoType="dijit.layout.ContentPane" title="Stack 1">
				This is the content in stack 1.
			</div>
			<div dojoType="dijit.layout.ContentPane" title="Stack 2">
				This is the content in stack 2.
			</div>
		</div>
		<div dojoType="dijit.layout.StackController" containerId="stackContainer"></div>
		<script src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
		<script>
		dojo.require("dijit.dijit");
		dojo.require("dijit.layout.StackContainer");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.StackController");
	
		dojo.addOnLoad(function() {		

		});
		</script>
	</body>
</html>