样例一：
<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或类：
<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>
输出：
时间： 2024-12-29 07:46:08