dojo的基本方法介绍
一 dojo.moduleUrl(module,url)
在模块开发中,可能要引用外部的资源文件,如图片,css文件等。通过dojo.moduleUrl(module,url)可以把模块内一个相对于模块的路径转换为实际访问路径,参数module表示模块名称,url是相对于模块的路径,返回一个dojo._url对象,如dojo.moduleUrl("example","image/log.jpg")表示的路径是js/example/image/log.jpg.
二 混入(mixin)和dojo.extend
在有些时候,需要用一个 JavaScript 对象来扩展另外一个 JavaScript 对象的功能,即把一个 JavaScript 对象混入到另外一个对象中。dojo.mixin()方法提供了这样的能力。该方法接受多个 JavaScript 对象作为参数,并按照参数从右到左的顺序依次混入。第一个参数表示的对象将包含其它参数对象中的全部属性。对于名称相同的属性,右边参数对象的值将覆盖左边参数对象中对应的值。dojo.mixin()的一个常见用法是处理选项的默认值。应用一般来说会为选项提供默认值,用户则会提供自定义的值。实际使用的值应该是用户提供的值覆盖默认值之后的结果。代码清单 11中给出了 dojo.mixin()的一个示例。
清单 11. dojo.mixin() 示例
var defaultOptions = { lang : "zh_CN", maxLength : 100 }; function getOptions(userOptions) { return dojo.mixin({}, defaultOptions, userOptions); } getOptions({ lang : "en" });例一:<button id=”btn”>Click Me!</button><script type=”text/javascript”> dojo.connect(dojo.byId(‘btn’), ‘onclick’, null, handler);</script> 例二:<button id=”btn” dojoType=”dijit.form.Button” label=”Click Me!”></button><script type=”text/javascript”> dojo.connect(dijit.byId(‘btn’), ‘onClick’, null, handler);</script>
<html><head><title>Button Widget Dojo Tests</title><style type="text/css"> @import "../js/dojo/resources/dojo.css"; @import "../js/dijit/themes/tundra/tundra.css"; .tab1{ margin:0px; padding:0px; } </style> <script type="text/javascript" djConfig="parseOnLoad: true, isDebug: true" src="../js/dojo/dojo.js"></script><script language="javascript" src="../js/dijit/dijit.js"></script><script type="text/javascript"> dojo.require("dijit.Dialog");function bkifm(){ var d=dojo.byId("div1"); var pos=dojo.contentBox(d); var bg=new dijit.DialogUnderlay();//这里需要重写一下layout函数 bg.layout=function(){ var is = this.node.style, os = this.domNode.style; os.top = d.offsetTop + "px"; os.left = d.offsetLeft + "px"; is.width = 300 + "px"; is.height = d.offsetHeight + "px"; is.backgroundColor="#666666"; } bg.show();//自动隐藏遮罩 dojo.fadeOut({node:bg.domNode,duration:3000,onEnd:function(){bg.node.style.display="none";}}).play();}</script></head><body width="300px" border="0" cellspacing="0" cellpadding="0" style="margin:0px;padding:0px;display:inline;"> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>7</td> </tr></table></div><button onClick="bkifm()">ifrm</button></body></html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>dojo.place移动dom结点</title> <meta http-equiv='Content-Type' content='text/html;charset=utf-8' /> <script type='text/javascript' src='../dojo/dojo.js'></script> <script type='text/javascript'> var handle = function() { dojo.query('#btn').connect('onclick' , function(){ //参数1 - 需要被被动的结点 //参数2 - 移动到哪个结点的 //参数3 - 被移动的位置 dojo.place('n2' , 'n1' , 'after') ; }); dojo.query('#btn2').connect('onclick' , function(){ //参数1 - 需要被被动的结点 //参数2 - 移动到哪个结点的 //参数3 - 被移动的位置 dojo.place('n2' , 'hr' , 'after') ; }); }; dojo.addOnLoad(handle); </script> </head> <body> <button id='btn'>移动结点</button><br/><br/> <button id='btn2'>移动结点回原来位置</button> <div id='n1'>结点1</div> <div id='n3'>结点3</div> <hr id='hr'/> <div id='n2'>结点2</div> </body> </html> <thead dojoAttachPoint="head"> <tr dojoAttachPoint="headRow"></tr> </thead>
var tth = document.createElement("th"); this.headRow.appendChild(tth); var button = dijit.byId("addPlayerBtn");dojo.connect(button, "onClick", function(event){.... event.preventDefault(); event.stopPropagation(); var data = dojo.formToObject("addPlayerForm"); var team = teams[data.team]; data.team = team; data = dojo.toJson(data); var xhrArgs = { postData: data, handleAs: "json", load: function(data) { alert("Player added: " + data); dojo.byId("gridContainer").innerHTML = ""; loadPlayers(); }, error: function(error) { alert("Error! " + error); }, url: "/SoccerOrg/resources/players", headers: { "Content-Type": "application/json"} }; var deferred = dojo.xhrPost(xhrArgs);});