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>