本文介绍了一种名为折叠容器的UI组件，它采用垂直展开/折叠布局，并通过示例展示了如何使用Dojo Toolkit创建一个简单的折叠容器，每个部分都可以展开以填充整个容器空间。
折叠容器
另外一种允许您每次显示一个部分的容器就是折叠容器。这种容器通常采用垂直展开/折叠的布局形式，每次仅可打开一个部分，该部分展开时将填充折叠容器的整个空间。要了解这种容器，最好的方法就是观察示例，因此下面我们将给出一个示例。
<!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 style="width: 535px; height: 290px;">
<div dojoType="dijit.layout.AccordionContainer" style="width: 100%; height: 100%">
<div dojoType="dijit.layout.ContentPane" title="Blade 1">
This is the content in blade 1.
</div>
<div dojoType="dijit.layout.ContentPane" title="Blade 2">
This is the content in blade 2.
</div>
<div dojoType="dijit.layout.ContentPane" title="Blade 3">
This is the content in blade 3.
</div>
</div>
</div>
<script src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script>
dojo.require("dijit.dijit");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.layout.ContentPane");
dojo.addOnLoad(function() {
});
</script>
</body>
</html>
扫一扫
149
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
