http://dojotoolkit.org/documentation/tutorials/1.8/recipes/custom_widget/ 目录结构： 最终效果： 关键代码： index.htm !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"htmlhead
http://dojotoolkit.org/documentation/tutorials/1.8/recipes/custom_widget/
目录结构：
最终效果：
关键代码：
index.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/dojo/dojo.js"> </script>
<link href="js/custom/AuthorWidget/css/AuthorWidget.css" rel="stylesheet"/>
<script type="text/javascript">
require(["dojo/request", "dojo/dom", "dojo/_base/array", "custom/AuthorWidget", "dojo/domReady!"],
function(request, dom, arrayUtil, AuthorWidget){
// Load up our authors
var def = request("authors.json", {
handleAs: "json"
});
// Once ready, process the authors
def.then(function(authors){
// Get a reference to our container
var authorContainer = dom.byId("authorContainer");
arrayUtil.forEach(authors, function(author){
// Create our widget and place it
var widget = new AuthorWidget(author).placeAt(authorContainer);
});
});
});
</script>
</head>
<body>
<div id="authorContainer"></div>
</body>
</html>
AuthorWidget.html
<div>
<h3 data-dojo-attach-point="nameNode">${name}</h3>
<img class="${baseClass}Avatar" src="" data-dojo-attach-point="avatarNode">
<p data-dojo-attach-point="bioNode">${!bio}</p>
</div>
AuthorWidget.js
//custom/AuthorWidget.js
define(["dojo/_base/declare","dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./AuthorWidget/templates/AuthorWidget.html", "dojo/dom-style", "dojo/_base/fx", "dojo/_base/lang","dojo/on"],
function(declare, WidgetBase, TemplatedMixin, template, domStyle, baseFx, lang, on){
return declare([WidgetBase, TemplatedMixin], {
name: "No Name",
avatar: require.toUrl("custom/AuthorWidget/images/defaultAvatar.gif"),
bio: "",
templateString: template,
baseClass: "authorWidget",
mouseAnim: null,
baseBackgroundColor: "#fff",
mouseBackgroundColor: "#def",
postCreate: function(){
// Get a DOM node reference for the root of our widget
try{
var domNode = this.domNode;
// Run any parent postCreate processes - can be done at any point
this.inherited(arguments);
domStyle.set(domNode, "backgroundColor", this.baseBackgroundColor);
//way #1
var that = this;
on(domNode, "mouseenter", function (e) {
//console.log(this===domNode); //true
//console.log(that); //widget
that._changeBackground(that.mouseBackgroundColor);
});
//way#2
on(domNode, "mouseleave", lang.hitch(this, function (e) {
//console.log(this===domNode); //false
this._changeBackground(this.baseBackgroundColor);
}));
}catch(e){
console.log("error:",e);
}
},
_changeBackground: function(toCol) {
// If we have an animation, stop it
if (this.mouseAnim) { this.mouseAnim.stop(); }
// Set up the new animation
this.mouseAnim = baseFx.animateProperty({
node: this.domNode,
properties: {
backgroundColor: toCol
},
onEnd: lang.hitch(this, function() {
// Clean up our mouseAnim property
this.mouseAnim = null;
})
}).play();
},
_setAvatarAttr: function(av){
if(av != ""){
this._set("avatar",av);
this.avatarNode.src = av;
}
}
});
}
);
authors.json
[
{
"name": "Kitten",
"avatar": "includes/authors/kitten.jpg",
"bio": "Brian Arnold is a software engineer at SitePen, Inc., ..."
},
{
"name": "Cyper",
"avatar": "includes/authors/cyper.jpg",
"bio": "Cyper is a software engineer at SitePen, Inc., ..."
},
{
"name": "sb",
"avatar": "includes/authors/sb.gif",
"bio": "sb is b, ..."
}
]