样例一：
|
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
50
51
52
|
<html>
<head>
<meta charset=
"UTF-8"
>
<link rel=
"stylesheet"
href=
"dijit/themes/soria/soria.css"
>
<script type=
"text/javascript"
src=
"dojo/dojo.js"
djConfig=
"parseOnLoad:true"
></script>
<title>Custom Widget</title>
<script type=
"text/javascript"
>
require([
"dojo/_base/declare"
,
"dijit/_WidgetBase"
,
"dijit/_TemplatedMixin"
,
"dojo/dom-construct"
,
"dojo/parser"
,
"dojo/domReady!"
],
function
(declare,_WidgetBase,_TemplatedMixin,domConstruct){
//创建DOM节点小部件
declare(
"Counter"
, [_WidgetBase], {
// 计数器
_i:
1
,
buildRendering:
function
() {
// 创建该小部件的DOM树
this
.domNode = domConstruct.create(
"button"
, {
innerHTML:
this
._i
});
},
//postCreate函数依赖进行事件连接this.connect或this.disconnect
postCreate:
function
() {
// 用户每点击一次按钮，计数器增加1
this
.connect(
this
.domNode,
"onclick"
,
"increment"
);
},
increment:
function
() {
this
.domNode.innerHTML = ++
this
._i;
}
});
//模板化小部件
declare(
"CounterText"
, [_WidgetBase, _TemplatedMixin], {
// 计数器
_i:
0
,
templateString:
"<div>"
+
"<button dojoAttachEvent='onclick: increment'>增加计数</button>"
+
" 当前计数: <span dojoAttachPoint='counter'>0</span>"
+
"</div>"
,
increment:
function
() {
this
.counter.innerHTML = ++
this
._i;
}
});
});
</script>
</head>
<body
class
=
"soria"
>
<span dojoType=
"Counter"
></span>
<br>
<span dojoType=
"CounterText"
></span>
</body>
</html>
|
输出结果：
--采用attributeMap将小部件的属性映射为DOM节点的属性、innerHTML或类：
|
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
50
51
52
|
<html>
<head>
<title>Business Card</title>
<style type=
"text/css"
>
body, html { margin:
0
; height:
100
%; width:
100
%; }
.businessCard { border: 3px inset gray; margin: 1em; }
.employeeName { color: blue; }
.specialEmployeeName { color: red; }
</style>
<link rel=
"stylesheet"
href=
"dijit/themes/tundra/tundra.css"
>
<script type=
"text/javascript"
src=
"dojo/dojo.js"
djConfig=
"parseOnLoad:true"
></script>
<script type=
"text/javascript"
>
require([
"dojo/_base/declare"
,
"dijit/_WidgetBase"
,
"dijit/_TemplatedMixin"
,
"dojo/parser"
,
"dojo/domReady!"
],
function
(declare,_WidgetBase,_TemplatedMixin){
declare(
"BusinessCard"
, [_WidgetBase, _TemplatedMixin], {
// 初始化参数，设置默认属性值
name:
"unknown"
,
nameClass:
"employeeName"
,
phone:
"unknown"
,
//模板文件
templateString:
"<div class='businessCard'>"
+
"<div>姓名: <span dojoAttachPoint='nameNode'></span></div>"
+
"<div>电话 #: <span dojoAttachPoint='phoneNode'></span></div>"
+
"</div>"
,
//将小部件的属性映射为DOM节点的属性、innerHTML或类
attributeMap: {
name: {
node:
"nameNode"
,
type:
"innerHTML"
},
nameClass: {
node:
"nameNode"
,
type:
"class"
},
phone: {
node:
"phoneNode"
,
type:
"innerHTML"
}
}
});
});
</script>
</head>
<body
class
=
"tundra"
>
<span dojoType=
"BusinessCard"
name=
"陈德选"
phone=
"(010) 63981212"
>
</span>
<span dojoType=
"BusinessCard"
name=
"刘泊芸"
nameClass=
"specialEmployeeName"
phone=
"(010) 63967113"
>
</span>
</body>
</html>
|
输出：
本文转自stock0991 51CTO博客，原文链接：http://blog.51cto.com/qing0991/1576642，如需转载请自行联系原作者
214
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
