http://dojotoolkit.org/documentation/tutorials/1.8/recipes/custom_widget/

目录结构：

最终效果：

关键代码：

index.htm

AuthorWidget.html

    
    
     
${name}
    
         
     
${!bio}
    

AuthorWidget.js

//custom/AuthorWidget.jsdefine(["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, ..."    }]