dojo新建widget步骤----主要针对widget路径

简介: 一,新建目录 二,新建文件 三,写urtil widget代码 四,写RedTextDialog代码 五,写HTML代码 =====================如有不懂,结合http://blog.

一,新建目录

二,新建文件

三,写urtil widget代码

四,写RedTextDialog代码

五,写HTML代码

=====================如有不懂,结合http://blog.csdn.net/eengel/article/details/13021687查看,不喜勿喷,

具体如下

一,二:新建文件,新建目录,导入dojo包

image

三,写urtil widget代码

define(['dojo/dom'],function(dom){
    return{
        setRed:function(id){
            dom.byId(id).style.color='red';
        }
    };
});

--------------------》在html中测试

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
            var dojoConfig={
            idDebug:true,
            parseOnLoad:true,
            async:true,
            baseUrl:'js/',
            packages:[
                {name:'test', location:'test'},
                {name:'dojo',location:'dojo/dojo'},
                {name:'dijit',location:'dojo/dijit'}
            ]
        };
    </script>
<script>
        require(['test/util','dojo/domReady!'],
                function(util){
                    var id='xxx';
                    util.setRed(id);
                });
    </script>
</head>
<body>
<div style="width:100%;height:80%" id="xxx">变色</div>
</body>
</html>

四,写RedTextDialog代码

define([
    'dojo/_base/declare',
    'dijit/Dialog',
    'dijit/_WidgetBase',
    'dijit/_TemplatedMixin',
    'test/util'
    ],function(declare,Dialog,_WidgetBase,_TemplatedMixin,util){
    return declare([
        Dialog,_WidgetBase,_TemplatedMixin
    ],{
        title:"Dialog with Red Text",
        onDownLoadEnd:function(){
            var id="xxx";
            uril.setRed(id);
        },
        //需要重写show方法, ==理论不写也行,但是我的不写不行
        _onShow:function(){
            this.show();
        }
    });

});

 

五,写HTML代码

<body>
<div style="width:100%;height:80%" id="xxx">变色</div>
</body>
 

最后写上html完整代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
            var dojoConfig={
            idDebug:true,
            parseOnLoad:true,
            async:true,
            baseUrl:'js/',
            packages:[
                {name:'test', location:'test'},
                {name:'dojo',location:'dojo/dojo'},
                {name:'dijit',location:'dojo/dijit'}
            ]
        };
    </script>
    <script src="js/dojo/dojo/dojo.js"></script>
<!--    <script>
        require(['test/util','dojo/domReady!'],
                function(util){
                    var id='xxx';
                    util.setRed(id);
                });
    </script>-->

    <script>
        require([
                'test/RedTextDialog',
                'dojo/domReady!'
        ],function(RedTextDialog){
            var dialog=new RedTextDialog();
            dialog._onShow();
        });
    </script>
</head>
<body>
<div style="width:100%;height:80%" id="xxx">变色</div>
</body>
</html>
目录
相关文章
|
Android开发
Android 13 Qs面板的加载流程
Android 13 Qs面板的加载流程
1182 0
Android 13 Qs面板的加载流程
|
Android开发
一个activity显示另一个activity,Android studio将一个项目作为module导入另一个项目,字符串截取的几种基本方法
一个activity显示另一个activity,Android studio将一个项目作为module导入另一个项目,字符串截取的几种基本方法
348 1
一个activity显示另一个activity,Android studio将一个项目作为module导入另一个项目,字符串截取的几种基本方法
|
XML Android开发 数据格式
Android6.0 Settings源码解析、配置项动态添加和静态添加
Android6.0 Settings源码解析、配置项动态添加和静态添加
216 0
|
iOS开发
iOS开发 - touchBegan事件判断点击的位置在View上还是在View的子View上
iOS开发 - touchBegan事件判断点击的位置在View上还是在View的子View上
269 0
iOS开发 - touchBegan事件判断点击的位置在View上还是在View的子View上
|
XML Android开发 数据格式
Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)
Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)
382 0
Android Navigation + Fragment 制作APP主页面导航(步骤 + 源码)
|
XML Android开发 数据格式
Android 10.0 Settings 加载流程(一)
Android 10.0 Settings 加载流程(一)
|
XML Android开发 数据格式
Android 标签栏pagerslidingtabstrip用法实例(含Demo)
Android 标签栏pagerslidingtabstrip用法实例(含Demo)
Android 标签栏pagerslidingtabstrip用法实例(含Demo)
|
Android开发 数据格式 XML
|
Web App开发 存储 Android开发
|
Web App开发