dojo自定义widget

~~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,{
        "name": "sb","avatar": "includes/authors/sb.gif","bio": "sb is b,..."
    }
]

相关推荐