Dojo:自定义组件
2012-06-14 15:58
162 查看
上一篇Dojo:主题(theme)切换以及Div蒙板覆盖中使用到了一个组合的功能块。
由一个div作为容器,一个img作为图片展示,以及一个div作为蒙板的组合效果。
其中,蒙板div的动作是由Dojo实现的。
由于具备可重用性,所以计划将这个组合提取成一个Dojo的widget。
步骤如下:
1、创建该widget,目录在js/widget/image/imageWitchCover.js,内容如下:
imageWitchCover.js
控件名为"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>
由一个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>
相关文章推荐
- Dojo:自定义组件
- dojo自定义表格组件
- dojo自定义组件错误 : id is already register
- DeviceOne 平台下iOS创建自定义组件
- yii 自定义组件的调用
- [置顶] MMShareSheet介绍(自定义的分享弹出框组件)
- Vue中自定义全局组件的实现方法
- Android 自定义组件成JAR包的实现方法
- C# WinForm 封装自定义组件(控件)Dll
- C#(winform) 工具箱中添加自定义的组件
- 自定义 React Native 二维码扫描组件
- react---自定义audio组件
- Android 自定义组件之如何实现自定义组件
- swift UIView实现可视化自定义组件
- Flex4组件教程:自定义两级导航菜单组件
- [Android]自定义组件示例:使用attrs.xml文件定制RadioButton
- Vaadin学习笔记——自定义vaadin组件的样式
- 【原】基础篇:第十二篇,Ext组件系列之--如何获取后台返回的自定义错误信息和系统异常信息
- 【Android 应用开发】 自定义组件 宽高适配方法, 手势监听器操作组件, 回调接口维护策略, 绘制方法分析 -- 基于 WheelView 组件分析自定义组件
- 无刷新省市三级联动自定义组件代码