1、主题 Dijit有四个主题可供选择： Claro, Tundra, Soria和Nihilo。 使用dijit主题，还需要两件事：引入主题的CSS文件，在你的页面上对body元素加入CSS样式名。 !DOCTYPEhtmlhtmlheadmetacharset="utf-8"
1、主题
Dijit有四个主题可供选择： Claro, Tundra, Soria和Nihilo。
使用dijit主题，还需要两件事：引入主题的CSS文件，在你的页面上对body元素加入CSS样式名。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello Dijit!</title> <!-- load Dojo --> <link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css"> </head> <!-- set the claro class on our body element --> <body class="claro"><h1 id="greeting">Hello</h1></body> </html>
备注：您可以使用div块级元素限制dijit主题只对一个页面的一小部分有效;如果没有在body上设置css，那么任何弹出的部件（如使用弹出dijit/form/ComboButton dijit/form/DropDownButton ， dijit/form/Select Dijit dijit/form/Select ）创建和放置弹出的DOM结构直接子元素，将不会应用到你的主题。
2、dijit/form/Button
一个按钮可能在是任何页面中都是最基本的部件，作用于用户输入，允许用户触发的动作，如提交表单或表单上的重置值等。
--申明方式创建Button：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title></title>
<script type="text/javascript">
require(["dijit/form/Button", "dojo/parser", "dojo/domReady!"]);
</script>
</head>
<body class="claro">
<button id="btn" data-dojo-type="dijit/form/Button"
data-dojo-props="onClick: function(){ console.log('First button was clicked!'); }"> Click Me!
</button>
</body>
</html>
--编程方式创建Button：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title></title>
<script type="text/javascript">
require(["dijit/form/Button", "dojo/domReady!"], function (Button) {
var button = new Button({
label: "Click Me!",
onClick: function () {
console.log("First button was clicked!");
}
}, "btn");
button.startup();
});
</script>
</head>
<body class="claro">
<button id="btn">
Click Me!
</button>
</body>
</html>
备注：如果您使用dojo的部件，确保data-dojo-config属性页上的dojo.js上添加"parseOnLoad: true"的脚本标记 。 此外，如果你打算在代码中进行解析时，则要明确require(["dojo/parser"])。
2.1 label属性：String
用于在标记中或通过编程方式为按钮指定标签。
2.2 showLabel属性：Boolean
表示是否在Button部件中显示文本标签的值，默认值为true
2.3 iconClass属性：String
用于为Button指定一个关联图像的CSS类，并不是使用一个图标来代替整个按钮，而是将图标嵌入到按钮中。如果同时阿牛指定了label属性且showLabel为true的话，图标和标签会同时显示。
2.4 onClick(event)事件
在用户单机按钮时调用。
2.5 setLabel(content)方法
改变Button标签值。
--样例：图标改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
.btn_iconClass {
background-image: url("image/sign_in.png");
background-repeat: no-repeat;
width: 30px;
height: 30px;
}
.btn_iconClassClicked{
background-image: url("image/sign_out.png");
background-repeat: no-repeat;
width: 30px;
height: 30px;
}
</style>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title></title>
<script type="text/javascript">
require(["dijit/form/Button", "dojo/parser","dojo/domReady!"], function (Button) {
var button = new Button({
label: "Click Me!",
iconClass: "btn_iconClass",
onClick: function () {
console.log("First button was clicked!");
}
}, "btn");
button.startup();
});
var toggled = false;
function toggle(){
myToggleButton.set("iconClass", toggled ? "btn_iconClass" : "btn_iconClassClicked");
toggled = !toggled;
}
</script>
</head>
<body class="claro">
<button id="btn">
Click Me!
</button>
<button type="reset" data-dojo-type="dijit/form/Button" data-dojo-id="myToggleButton" data-dojo-props="iconClass:'btn_iconClass',showLabel:false" onclick="toggle();" >重置</button>
</body>
</html>
输出结果：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/19540I649-3.png" title="快照7.jpg" alt="wKiom1RPcsOwBNJwAABLoc91070725.jpg" d="3714151" s="b5e_902" t="jpg">
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/19540I649-3.png" title="快照8.jpg" alt="wKioL1RPcxrS2PFUAABLzMWg5qU897.jpg" d="3714152" s="356_252" t="jpg">
3、dijit/form/ToggleButton
继承自 dijit/form/Button, dijit/form/_ToggleButtonMixin，并未按钮添加了开/关功能，就像RadioButton和CheckBox一样，通过checked属性来实现。
事实上，工具栏上用于格式化文本的按钮，如斜体、粗体等，都使用ToggleButton。
--声明方式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script> <title>ToogleButton</title> <script type="application/javascript"> require(["dojo/parser", "dijit/form/ToggleButton", "dojo/domReady!"]); </script> </head> <body class="claro"> <button data-dojo-type="dijit/form/ToggleButton" data-dojo-props="iconClass:'dijitCheckBoxIcon', checked: true"> Toggle me </button> </body> </html>
--编程方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title>ToogleButton</title>
<script type="application/javascript">
require(["dijit/form/ToggleButton", "dojo/domReady!"], function (ToggleButton) {
new ToggleButton({
showLabel: true,
checked: false,
onChange: function (val) {
this.set('label', val);
},
label: "按钮标签"
}, "programmatic");
});
</script>
</head>
<body class="claro">
<button id="programmatic"></button>
</body>
</html>
4、dijit/form/CheckBox
Extends: dijit/form/ToggleButton, dijit/form/_CheckBoxMixin，直接扩展了ToggleButton，是普通<input type="checkbox">元素的替代部件。
--声明方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title>CheckBox</title>
<script type="application/javascript">
require(["dojo/parser", "dijit/form/CheckBox"]);
</script>
</head>
<body class="claro">
<input id="checkBox" name="MyCheckBox" data-dojo-type="dijit/form/CheckBox" value="agreed" checked="false" onChange="alert('onChange called with checked = ' + this.checked + ', and widget getValue() = ' + this.getValue())" />I agree
</body>
</html>
--编程方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title>CheckBox</title>
<script type="application/javascript">
require(["dijit/form/CheckBox", "dojo/domReady!"], function (CheckBox) {
var checkBox = new CheckBox({
name: "MyCheckBox",
value: "agreed",
checked: false,
onChange: function (b) {
alert('onChange called with checked = ' + this.checked + ', and widget getValue() = ' + this.getValue());
}
}, "checkBox");
});
</script>
</head>
<body class="claro">
<input id="checkBox"/>I agree
</body>
</html>
5、dijit/form/RadioButton
Extends: dijit/form/CheckBox, dijit/form/_RadioButtonMixin，组织成一组（name属性值决定），每次只能选择其中一个。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script> <title>RadioButton</title> </head> <body class="claro"> <form id="myform"> <input type="radio" name="drink" data-dojo-type="dijit/form/RadioButton" id="radioOne" value="tea"/>Tea<br/> <input type="radio" name="drink" data-dojo-type="dijit/form/RadioButton" id="radioTwo" value="coffee"/>Coffee<br/> <input type="radio" name="drink" data-dojo-type="dijit/form/RadioButton" id="radioThree" value="milk"/>milk<br/> </form> </body> </html>
输出结果：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/19540I649-3.png" title="快照9.jpg" alt="wKiom1RRy2-yEYr0AAAVDRWLkbc184.jpg" d="3714153" s="572_15e" t="jpg">
--事件绑定：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script>
<script src='dojo/dojo.js'></script>
<script>
require(["dijit/form/RadioButton", "dojo/on", "dijit/registry", "dojo/parser", "dojo/domReady!"], function (RadioButton, on, registry, parser) {
parser.parse();
on(document.getElementById("summaryBtn"), "click", function (evt) {
var toppings = [];
if (registry.byId("topping1").get("checked")) {
toppings.push(registry.byId("topping1").get("value"));
}
if (registry.byId("topping2").get("checked")) {
toppings.push(registry.byId("topping2").get("value"));
}
if (registry.byId("topping3").get("checked")) {
toppings.push(registry.byId("topping3").get("value"));
}
alert("Topping: " + toppings.join(", "));
});
});
</script>
<title>RadioButton</title>
</head>
<body class="claro">
<h2>dijit/form/RadioButton value setters</h2>
<h3>Pizza Toppings</h3>
<ul style="list-style-type: none">
<li>
<input id="topping1" type="radio" name="topping" value="anchovies" checked
data-dojo-type="dijit.form.RadioButton">
<label for="topping1">Anchovies</label>
</li>
<li>
<input id="topping2" type="radio" name="topping" value="olives"
data-dojo-type="dijit.form.RadioButton">
<label for="topping2">Olives</label>
</li>
<li>
<input id="topping3" type="radio" name="topping" value="pineapple"
data-dojo-type="dijit.form.RadioButton">
<label for="topping3">Pineapple</label>
</li>
</ul>
<button id="summaryBtn">Which Toppings?</button>
</body>
</html>
6、dijit/form/DropDownButton
Extends: dijit/form/Button, dijit/_Container, dijit/_HasDropDown。
--声明方式：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="dijit/themes/claro/claro.css"> <script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script> <title>DropDownButton</title> <script type="application/javascript"> require(["dojo/parser", "dijit/form/DropDownButton", "dijit/form/TextBox", "dijit/TooltipDialog", "dijit/form/Button"]); </script> </head> <body class="claro"> <div data-dojo-type="dijit/form/DropDownButton"> <span>Register</span> <div data-dojo-type="dijit/TooltipDialog"> <label for="name">Name:</label> <input data-dojo-type="dijit/form/TextBox" id="name" name="name"><br> <label for="hobby">Hobby:</label> <input data-dojo-type="dijit/form/TextBox" id="hobby" name="hobby"><br> <button data-dojo-type="dijit/form/Button" type="submit">Save</button> </div> </div> </body> </html>
输出结果：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/19540I649-3.png" title="快照1.jpg" alt="wKioL1RR-HSz8bx9AABG7cm0UAg371.jpg" d="3714154" s="b92_3c8" t="jpg">
--编程方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title>DropDownButton</title>
<script type="application/javascript">
require(["dijit/form/DropDownButton", "dijit/DropDownMenu", "dijit/MenuItem", "dojo/dom", "dojo/domReady!"],
function(DropDownButton, DropDownMenu, MenuItem, dom){
var menu = new DropDownMenu({ style: "display: none;"});
var menuItem1 = new MenuItem({
label: "Save",
iconClass:"dijitEditorIcon dijitEditorIconSave",
onClick: function(){ alert('save'); }
});
menu.addChild(menuItem1);
var menuItem2 = new MenuItem({
label: "Cut",
iconClass:"dijitEditorIcon dijitEditorIconCut",
onClick: function(){ alert('cut'); }
});
menu.addChild(menuItem2);
var button = new DropDownButton({
label: "hello!",
name: "programmatic2",
dropDown: menu,
id: "progButton"
});
dom.byId("dropDownButtonContainer").appendChild(button.domNode);
});
</script>
</head>
<body class="claro">
<div id="dropDownButtonContainer"></div>
</body>
</html>
输出结果：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/19540I649-3.png" title="快照.jpg" alt="wKioL1RR-KCTEtdJAAAeq9j9YY4952.jpg" d="3714155" s="2a3_596" t="jpg">
--典型应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title>DropDownButton</title>
<script type="application/javascript">
require(["dojo/parser", "dijit/form/DropDownButton", "dijit/form/TextBox", "dijit/TooltipDialog", "dijit/form/Button"]);
</script>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/DropDownButton">
<span>Save...</span>
<div data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem" label="Save">
<script type="dojo/method" event="onClick" args="evt">
console.log("you clicked", this.label);
</script>
</div>
<div data-dojo-type="dijit/MenuItem" label="Save as...">
<script type="dojo/method" event="onClick" args="evt">
console.log("you clicked", this.label);
</script>
</div>
<div data-dojo-type="dijit/MenuItem" label="Save to FTP...">
<script type="dojo/method" event="onClick" args="evt">
console.log("you clicked", this.label);
</script>
</div>
</div>
</button>
</body>
</html>
输出：
650) this.width=650;" src="http://img.558idc.com/uploadfile/allimg/210615/19540I649-3.png" title="快照5.jpg" alt="wKiom1RSJ_Xz7wgrAAAwu8hO_WM363.jpg" d="3714156" s="acd_16d" t="jpg">
7、dijit/form/ComboButton
Extends: dijit/form/DropDownButton。
像dijit/form/Button和 dijit/form/DropDownButton的混合体，在按钮上提供了专门的区域，单击该区域才能出现下拉菜单；如果单机按钮上的“其他”区域，那么会执行默认操作。
--声明方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title>ComboButton</title>
<script type="application/javascript">
require(["dojo/parser", "dijit/form/ComboButton", "dijit/DropDownMenu", "dijit/MenuItem"]);
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/form/ComboButton" data-dojo-props="onClick:function(){console.log('Hi,Save!')}">
<span>Save</span>
<div data-dojo-type="dijit/DropDownMenu">
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){console.log('Save!')}">Save</div>
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){console.log('Save as..')}">Save as..</div>
</div>
</div>
</body>
</html>
--编程方式：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title>ComboButton</title>
<script type="application/javascript">
require(["dijit/Menu", "dijit/MenuItem", "dijit/form/ComboButton", "dojo/domReady!"],
function (Menu, MenuItem, ComboButton) {
var menu = new Menu({style: "display: none;"});
var menuItem1 = new MenuItem({
label: "Save",
onClick: function () {
alert('hi，Save');
}
});
menu.addChild(menuItem1);
var menuItem2 = new MenuItem({
label: "Save as..",
onClick: function () {
alert('hi,Save as..');
}
});
menu.addChild(menuItem2);
var button = new ComboButton({
label: "Save",
dropDown: menu,
onClick:function(){
alert('Save!');
}
});
button.placeAt(dojo.body());
});
</script>
</head>
<body class="claro">
</body>
</html>
--特定应用：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
<script type="text/javascript" src="dojo/dojo.js" djConfig="parseOnLoad:true"></script>
<title>ComboButton</title>
<script type="application/javascript">
require(["dijit/Menu", "dijit/MenuItem", "dijit/form/ComboButton", "dojo/domReady!"]);
</script>
</head>
<body class="claro">
<button data-dojo-type="dijit/form/ComboButton">
<span>Save</span>
<script type="dojo/method" event="onClick" args="evt">
console.log("you clicked the button itself");
</script>
<div name="foo" data-dojo-type="dijit/Menu">
<div data-dojo-type="dijit/MenuItem" label="Save">
<script type="dojo/method" event="onClick" args="evt">
console.log("you clicked", this.label);
</script>
</div>
<div data-dojo-type="dijit/MenuItem" label="Save As...">
<script type="dojo/method" event="onClick" args="evt">
console.log("you clicked", this.label);
</script>
</div>
<div data-dojo-type="dijit/MenuItem" label="Save to FTP...">
<script type="dojo/method" event="onClick" args="evt">
console.log("you clicked", this.label);
</script>
</div>
</div>
</button>
</body>
</html>