dijit控件入门（一）
dijit是dojo的一套UI控件，可以显示一些控件，下面是form简单的控件入门
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dijit ui</title>
<style type="text/css">
@import "../dojo/dojo/resources/dojo.css";
@import "../dojo/dijit/themes/tundra/tundra.css";
</style>
<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.Menu");
dojo.require("dijit.form.ToggleButton");
dojo.require("dijit.form.NumberTextBox");
dojo.require("dijit.form.TimeTextBox");
dojo.require("dijit.form.DateTextBox");
//dojo.require("dijit.form.NumberTextBoxMixin");
/**
* 搞清楚怎么使用byNode()方法的使用
*/
function test_button(){
alert(dijit.byId("hb").value);//根据dijit.byId()获取dijit对象
alert(dojo.byId("hb2").value);//根据dojo.byId()得到的是DOM节点对象
}
function test_function(){
//dijit.byNode()方法是将DOM对象（必须是dijit对象，可能使用query查询的没有ID这个属性）转换为dijit对象，
alert(dijit.byNode(dojo.query(".hb111111111")[0]).get("value"));
}
//dojo.addOnLoad(test_button);
//dojo.ready() registers a function to run when the Dom is ready and all outstanding require() and dojo.require() calls have resolved
dojo.ready(function(){
//alert("dojo.ready(function(){})");
});
</script>
</head>
<!-- 使用了主题，按钮等一些控件才会有样式 -->
<body class="claro">
<div>
注意onclick事件的JSON属性值是——onClick，注意大小写 <br>
<input data-dojo-type="dijit.form.Button" data-dojo-props="label:'测试按钮',id:'hb',value:'abc',onClick:test_function "/>
<input id ="hb2" value="12" type="text">
<button onclick="test_button()" style="display:none">测试display</button>
</div>
<p>
<div>
dijit.form.TextBox对象学习了<br>
<br>让TextBox对象显示出值，并且让他不可用<br>
<input data-dojo-type="dijit.form.TextBox" data-dojo-props="label:'用户名',disabled:'disabled',value:'values'"/>
<br>
设置允许输入的最大长度10,显示title属性<br>
<input data-dojo-type="dijit.form.TextBox" data-dojo-props="maxLength:10,title:'title'" />
<br>
设置只读属性10<br>
<!-- class属性一定要用单引号包括起来，否则会出问的 -->
<input data-dojo-type="dijit.form.TextBox" data-dojo-props="value:'read-only','class':'hb111111111',readOnly:'readOnly'" />
</div>
<p>
<div>
dijit.form.NumberTextBox<br>
<input data-dojo-type="dijit.form.NumberTextBox" data-dojo-props="label:'label'">
</div>
<div>
dijit.form.TimeTextBox<br>
<input data-dojo-type="dijit.form.TimeTextBox" data-dojo-props="label:'label'">
</div>
<div>
dijit.form.DateTextBox<br>
<input data-dojo-type="dijit.form.DateTextBox" data-dojo-props="label:'label'">
</div>
</body>
</html>
控件dijit.form.DropDownButton
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.form.Button");
dojo.require("dijit.Menu");
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.addOnLoad(function() {
var menu = new dijit.Menu({
style: "display: none;"
});
var menuItem1 = new dijit.MenuItem({
label: "Save",
iconClass: "dijitEditorIcon dijitEditorIconSave",
onClick: function() {
alert('save');
}
});
menu.addChild(menuItem1);
var menuItem2 = new dijit.MenuItem({
label: "Cut",
iconClass: "dijitEditorIcon dijitEditorIconCut",
onClick: function() {
alert('cut');
}
});
menu.addChild(menuItem2);
var button = new dijit.form.DropDownButton({
label: "hello!",
name: "programmatic2",
dropDown: menu,
id: "progButton"
});
dojo.byId("dropdownButtonContainer").appendChild(button.domNode);
});
</script>
</head>
<body class="claro">
<div id="dropdownButtonContainer">
</div>
<div dojoType="dijit.form.DropDownButton">
<span>
Register
</span>
<div dojoType="dijit.TooltipDialog">
<label for="name">
Name:
</label>
<input dojoType="dijit.form.TextBox" id="name" name="name">
<br>
<label for="hobby">
Hobby:
</label>
<input dojoType="dijit.form.TextBox" id="hobby" name="hobby">
<br>
<button dojoType="dijit.form.Button" type="submit">
Save
</button>
</div>
</div>
</body>
</html>