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

一,新建目录

二,新建文件

三,写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>
posted @ 2014-12-19 23:42  上官瑾文  阅读(309)  评论(0编辑  收藏  举报