dojo自定义widget

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

目录结构：

最终效果：

关键代码：

index.htm

@H_403_16@<!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

@H_403_16@<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,..."
    }
]

dojo自定义widget

猜你在找的Dojo相关文章