首页 > 代码库 > dojo新建widget步骤----主要针对widget路径

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

2024-08-09 00:04:45   217人阅读

一，新建目录

二，新建文件

三，写urtil widget代码

四，写RedTextDialog代码

五，写HTML代码

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

具体如下

一，二：新建文件，新建目录，导入dojo包

技术分享

三，写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="http://www.mamicode.com/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>

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


联系
我们