1、主题
Dijit有四个主题可供选择： Claro, Tundra, Soria和Nihilo。
使用dijit主题，还需要两件事：引入主题的CSS文件，在你的页面上对body元素加入CSS样式名。
|
1
2
3
4
5
6
7
8
9
10
11
|
<!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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!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：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<!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标签值。
--样例：图标改变
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!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>
|
输出结果：
3、dijit/form/ToggleButton
继承自 dijit/form/Button, dijit/form/_ToggleButtonMixin，并未按钮添加了开/关功能，就像RadioButton和CheckBox一样，通过checked属性来实现。
事实上，工具栏上用于格式化文本的按钮，如斜体、粗体等，都使用ToggleButton。
--声明方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!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>
|
--编程方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!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">元素的替代部件。
--声明方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!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>
|
--编程方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
<!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属性值决定），每次只能选择其中一个。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!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>
|
输出结果：
--事件绑定：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
|
<!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。
--声明方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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>
|
输出结果：
--编程方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!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>
|
输出结果：
--典型应用：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!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>
|
输出：
7、dijit/form/ComboButton
Extends: dijit/form/DropDownButton。
像dijit/form/Button和 dijit/form/DropDownButton的混合体，在按钮上提供了专门的区域，单击该区域才能出现下拉菜单；如果单机按钮上的“其他”区域，那么会执行默认操作。
--声明方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<!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>
|
--编程方式：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!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>
|
--特定应用：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
<!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>
|
本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1567393，如需转载请自行联系原作者
