Dojo自定义小部件样例

样例一：

<html>
<head>
<Metacharset="UTF-8">
<linkrel="stylesheet"href="dijit/themes/soria/soria.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<title>CustomWidget</title>
<scripttype="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>"+"<buttondojoAttachEvent='onclick:increment'>增加计数</button>"+"&nbsp;当前计数:<spandojoAttachPoint='counter'>0</span>"+"</div>",increment:function(){
this.counter.innerHTML=++this._i;
}
});
});
</script>
</head>
<bodyclass="soria">
<spandojoType="Counter"></span>
<br>
<spandojoType="CounterText"></span>
</body>
</html>

输出结果：

--采用attributeMap将小部件的属性映射为DOM节点的属性、innerHTML或类：

<html>
<head>
<title>BusinessCard</title>
<styletype="text/css">
body,html{margin:0;height:100%;width:100%;}
.businessCard{border:3pxinsetgray;margin:1em;}
.employeeName{color:blue;}
.specialEmployeeName{color:red;}
</style>
<linkrel="stylesheet"href="dijit/themes/tundra/tundra.css">
<scripttype="text/javascript"src="dojo/dojo.js"djConfig="parSEOnLoad:true"></script>
<scripttype="text/javascript">
require([
"dojo/_base/declare",_TemplatedMixin){
declare("BusinessCard",{
//初始化参数，设置默认属性值
name:"unknown",nameClass:"employeeName",phone:"unknown",//模板文件
templateString:"<divclass='businessCard'>"+"<div>姓名:<spandojoAttachPoint='nameNode'></span></div>"+"<div>电话#:<spandojoAttachPoint='phoneNode'></span></div>"+"</div>",//将小部件的属性映射为DOM节点的属性、innerHTML或类
attributeMap:{
name:{
node:"nameNode",type:"innerHTML"
},nameClass:{
node:"nameNode",type:"class"
},phone:{
node:"phoneNode",type:"innerHTML"
}
}
});
});
</script>
</head>
<bodyclass="tundra">
<spandojoType="BusinessCard"name="陈德选"phone="(010)63981212">
</span>
<spandojoType="BusinessCard"name="刘泊芸"nameClass="specialEmployeeName"phone="(010)63967113">
</span>
</body>
</html>

输出：

Dojo自定义小部件样例

猜你在找的Dojo相关文章