使用dijit的内容窗格panes

最新推荐文章于 2018-06-04 11:37:17 发布

qingqingzijinxin

最新推荐文章于 2018-06-04 11:37:17 发布

阅读量387

点赞数

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

dojo学习专栏收录该内容

29 篇文章 1 订阅

订阅专栏

使用 Dijit 的布局特性

除了一些非常有用的组件和表单控件之外，Dijit 还提供了一个出色的布局框架，使您能够更加轻松地组织应用程序的界面。这一节将介绍如何使用 Dijit 的各种布局组件。为了简便起见，所有示例均使用 Dojo 的声明式语法提供，但是，如有必要，您应该可以能够很轻松地将其转为编程式方法。

内容窗格（panes）

内容窗格是最基本的 Dijit 布局组件。它们允许您定义一个内容部分，通过直接将 HTML 代码提供给内容属性来载入这一部分，或者通过 XmlHttpRequest 调用异步载入它。就后者而言，在从服务器载入内容时，内容窗格会显示一条正在加载的消息。

<!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">
		<button id="myButton" dojoType="dijit.form.Button">
			Load content using XHR
		</button>
		<div dojoType="dijit.layout.ContentPane" id="myContentPane">
			<h1>Static content here!</h1>
		</div>
		<script src="dojo/dojo.js" djConfig="parseOnLoad: true"></script>
		<script>
		dojo.require("dijit.dijit");
		dojo.require("dijit.form.Button");
		dojo.require("dijit.layout.ContentPane");
	
		dojo.addOnLoad(function() {		
			var button = dijit.byId("myButton");
			var contentPane = dijit.byId("myContentPane");
			dojo.connect(button, "onClick", null, function(evt) {
				contentPane.attr("href", "content.html");
			});
		});
		</script>
	</body>
</html>

content.html中代码