dojo_第二章创办强大的Web表单 _Web前端

dojo_第二章创建强大的Web表单

<html>
	<head>
		<title>Chapter2</title>
		<style type="text/css" media="screen">
            @import "../dojo_src/dijit/themes/tundra/tundra.css";
            @import "../dojo_src/dojo/resources/dojo.css";
		</style>
		<style type="text/css">
            .formContainer {
                width: 400px;
                height: 300px;
            }
            label {
				width: 100px;
				float: left;
            }
		</style>
		<script type="text/javascript" charset="utf-8" src="../dojo_src/dojo/dojo.js" djConfig="parseOnLoad:true"></script>
		<script type="text/javascript" charset="utf-8">
            dojo.require("dojo.parser");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.layout.TabContainer");

		</script>
	</head>
	<body class="tundra">
		<h1>Student Info</h1>
		<div class="formContainer" dojoType="dijit.layout.TabContainer">
			<div dojoType="dijit.layout.ContentPane" title="Tab1" style="width:300px; height: 200px; background-color: #D3E7F4;">
				<label for="first_name">first name</label>
				name:
				<input type="text" name="name" />
				<br/>
				age:
				<input type="text" name="age" />
				<br/>
				address:
				<input type="text" name="address" />
				<br/>
				birthday:
				<input type="text" name="birthday" />
			</div>
			<div dojoType="dijit.layout.ContentPane" title="Tab2" style="width:300px; height: 200px; background-color: #A2A2A2;">
				<label for="address_line">address_ line</label>
				name:
				<input type="text" name="name" />
				<br/>
				age:
				<input type="text" name="age" />
				<br/>
				address:
				<input type="text" name="address" />
				<br/>
				birthday:
				<input type="text" name="birthday" />
			</div>
		</div>
	</body>
</html>

1. 把Dojo和Dijit添中到网页
1> 在<head>部分添加标准Dojo首部
2> 将<body>标签的class属性值设置为一种Dijit主题

3> 根据你需要的组件添加dojo.require语句。

dojo_第二章 创办强大的Web表单

dojo_第二章创办强大的Web表单