Dojo：自定义组件

 

上一篇Dojo：主题（theme）切换以及Div蒙板覆盖中使用到了一个组合的功能块。

由一个div作为容器，一个img作为图片展示，以及一个div作为蒙板的组合效果。

其中，蒙板div的动作是由Dojo实现的。

由于具备可重用性，所以计划将这个组合提取成一个Dojo的widget。

步骤如下：

1、创建该widget，目录在js/widget/image/imageWitchCover.js，内容如下：

imageWitchCover.js

//声明自己输出的类名 dojo.provide("image.imageWithCover"); //声明自己依赖的类名dojo.require("dijit._Widget"); dojo.require("dijit._TemplatedMixin"); dojo.require("dojo.fx");                  //dojo.declare定义控件类，第一个参数：类名，第二个参数：父类数组，第三个参数：类的prototype dojo.declare("image.imageWithCover",[dijit._TemplatedMixin,dijit._Widget], {     image:'',    width:'200px',    height:'160px',    margin_left:'10px',    label:'',    onclick:'',    constructor:function(params,node) {        image=params.image;        if(params.width!=undefined){            this.width=params.width;        }        if(params.height!=undefined){            this.height=params.height;        }        if(params.margin!=undefined){            this.margin_left=params.marginLeft;        }        if(params.label!=undefined){            this.label=params.label;            }        if(params.action!=undefined){            this.onclick=params.action;        }    },    postCreate:function(){        var innerHTML="";        innerHTML+="<div style=\"position:relative;width:"+this.width+";height:"+this.height+";float:left;margin-left:"+this.margin_left+";\">";        innerHTML+="<img src=\""+this.image+"\" style=\"position:absolute;left:0;top:0;width:"+this.width+";height:"+this.height+";\"/>";        innerHTML+="<div style=\"position:absolute;left:0;top:0;width:"+this.width+";height:"+this.height+";background-color:#333;opacity:0.0;\"onClick=\""+this.onclick+"\">";        innerHTML+="<b style=\"position:absolute;left:38%;top:40%;font-size:15px;color:#FFF;\">"+this.label+"</b></div>";        innerHTML+="</div>";        this.domNode.innerHTML=innerHTML;                var d=this.domNode.children[0].children[1];        console.log(d);        d.onmouseover=function(){            dojo.animateProperty({                  node: this,                  duration:1000,                     properties: {                          opacity: 0.5                      }             }).play();            };        d.onmouseout=function(){            dojo.animateProperty({              node: this,              duration:1000,                 properties: {                      opacity: 0                 }             }).play();            };    } } ); 

控件名为"image.imageWithCover"，有6个参数，分别为：

image:'',
width:'200px',
height:'160px',
margin_left:'10px',
label:'',
onclick:''

构造函数结构如下：

constructor:function(params,node) {}

params是记录的属性集合

既是如果在tag里添加了一个属性：image="1.jpg"

则参数params.image就会有值"1.jpg"

 

postCreate:function(){}

这是创建后执行的方法。初始化内容即可写在这里。用于定义本widget的内部结构。

 

2、使用该widget，需要注意三处：

1）Dojo的引用位置，需要声明modulePaths，来指定寻址位置（类似于java的CLASSPATH）：

<script src="/lib/dojo/dojo/dojo.js" djConfig="isDebug:true,parseOnLoad:true,modulePaths:{image:'/dojo/js/widget/image'}"></script>

2）加载"image.imageWithCover"控件：

dojo.require("image.imageWithCover"); 

3）使用控件div：

<div dojoType="image.imageWithCover" width="200px" height="160px" action="alert('1')" image="/dojo/resource/image/firstTheme/preview.jpg" label="红色"> </div>