dojo快速入门资料文档格式.docx
- 文档编号:21657900
- 上传时间:2023-01-31
- 格式:DOCX
- 页数:20
- 大小:32.05KB
dojo快速入门资料文档格式.docx
《dojo快速入门资料文档格式.docx》由会员分享,可在线阅读,更多相关《dojo快速入门资料文档格式.docx(20页珍藏版)》请在冰豆网上搜索。
,那么目录结构应该是如下图所示:
安装DojoToolkit,最重要的事情是知道dojo.js位于什么地方。
当dojo.js被页面加载以后,Dojo的packagesystem会处理如何加载所有其他的依赖和相关模块。
如果要验证下载和安装的正确性,可以通过浏览器访问http:
//localhost/js/dojo-release/dojo/tests/runTests.html或者访问dijit的测试页面http:
//localhost/js/dojo-release/dijit/tests.
"
TheDojoBook"
是一本免费的指南教程,提供了更深度的描述关于怎样获得Dojo源代码以及可用的不同发布版本。
开始步骤
先构造一个HTML模版dojo-tutorial.html,假定存放在..js/dojo-tutorial.html目录下
<
!
DOCTYPEhtmlPUBLIC"
-//W3C//DTDHTML4.01//EN"
//www.w3.org/TR/html4/strict.dtd"
>
html>
<
head>
title>
DojoToolkitTestPage<
/title>
--loadthedojotoolkitbase-->
scripttype="
text/javascript"
src="
dojo-release/dojo/dojo.js"
djConfig="
parseOnLoad:
true,isDebug:
true"
/script>
/*ourJavaScriptwillgohere*/
styletype="
text/css"
/*ourCSScangohere*/
/style>
/head>
body>
--thisisaTypicalWebPagestartingpoint...-->
h1id="
testHeading"
DojoSkeletonPage<
/h1>
divid="
contentNode"
p>
SomeContentToReplace<
/p>
/div>
/body>
/html>
页面中的DOCTYPE定义为"
HTML/4.01Strict"
严格的W3C验证。
配置Dojo
Dojo可以runtime实时设定各种配置信息。
最常用的两个配置参数是parseOnLoad和isDebug。
parseOnLoad用来处理页面装载解析widgets和添加代码,isDebug用来打开和禁止特定的debugging信息。
可以直接在装载dojo.js的<
script>
标签中通过djConfig属性设置这些选项。
简单的更改HTML模板来添加这个新属性。
djConfig="
如果以上没有通过验证,也可以在dojo.js被加载前构造一个全局的djConfig变量。
vardjConfig={
isDebug:
true,parseOnLoad:
true
};
两个例子有同样的效果:
以debug模式装载dojo.js,同时运行解析器。
什么时候可以开始?
只要dojo.js在<
标签中被正确引用,就可以开始写一些功能代码了。
不同的浏览器对于"
ready"
有不同的定义。
dojo.addOnLoad()是用来被触发执行其他功能代码的dojo函数。
任何可能影响DOM的操作都应该通过dojo.addOnLoad()被调用执行。
例如,
//averycommonmethodofloadingcodeonLoad
varinit=function(){
alert("
testing"
);
console.log("
Irunafterthepageisready.Seethisintheconsole"
};
dojo.addOnLoad(init);
//and/orpassananonymousfunction
dojo.addOnLoad(function(){
Ialsorun,butsecond."
});
dojo.addOnLoad是Dojo的重要方法。
需要记住的是:
当使用Dojo时候,不要设置onLoad()方法到<
标签中。
dojo.addOnlLoad(someFunc)可以替代
bodyonLoad="
someFunc"
和window.onload=someFunc。
不仅仅是Dojo
Dojo通过dojo.require()装载其他相关代码。
这个功能允许我们使用那些不属于Dojo.js的DojoToolkit,比如拖放功能,动画,Dijitwidgets,DojoX项目或者开发者自己的代码。
比如,在模块dijit.TitlePane和dijit.form.Button的页面中,使用TitlePaneWidget和dijit按钮。
dojo.require("
dijit.form.Button"
dijit.TitlePane"
dojo.byId("
).innerHTML="
We'
reonourway!
;
onLoadfiresafterrequire()isdone"
每个模块都有自己的dojo.require(),可以不用装载已有的代码。
由dojo.addOnLoad执行的代码要等dojo.require()装载完毕才可以运行,这样保证了安全和方便。
所有可用的widgets和module都可以在DijitAPI中找到或者到dijit/tests/的文件夹中查找。
在最后的例子中,添加了经常使用的方法:
dojo.byId().它返回一个domNode通过id属性。
dojo.byId()是一个方便的方法来访问和操作一个特定节点。
在这里通过修改.innnerHtml来改变body的heading文字。
如果你看到的是"
reonourway"
,那么就是表明正在做web开发:
dojo.bliss。
如果遇到errors就表明工作出了问题。
大量的常规错误德及决办法都可以在FAQ中找到。
操作DOM
Dojo提供了一个函数dojo.query().用来处理文档对象模型(DOM),其全部内容可以足够专门写一本书来介绍。
以下的部分简单讲解怎样使用dojo.query()。
dojo.NodeList-fx"
//ourdomisready,getthenode:
dojo.query("
#testHeading"
)
//add"
testClass"
toitsclass="
attribute
.addClass("
//andfadeitoutafter500ms
.fadeOut({delay:
500}).play();
为页面标题添加CSS的样式"
.testClass"
并且设置background-color:
red;
testClass{
background-color:
}
dojo.query()返回一个dojo.NodeList的实例,这是一个dom的节点数组。
为了展示效果,我们需要增加一些内容到页面:
aclass="
link"
href="
#"
Firstlink<
/a>
SecondLink<
pclass="
para"
Firstparagraph<
Secondparagraph<
Thirdparagraph<
使用dojo.query():
//geteachelementwithclass="
.para"
1000}).play();
经过一秒钟的延迟,所有<
标签将会变红然后褪色。
使用dojo.NodeList的效果看起来很明显,在以后的章节会介绍更多的相关内容。
多数dojo.query()函数链都可以用独立的函数来替代得到相同的结果。
比如:
dojo.query("
).addClass("
和dojo.addClass("
"
)的效果就一样。
事件传递
我们要接触的下一个重要概念是如何进行页面交互。
现在可以为标题替换文字,那么是否可以做一些更有趣的事情呢?
比如,当用户点击标题时候,就替换标题文字。
dojo.connect()是一个一站式解决方案:
varnode=dojo.byId("
dojo.connect(node,"
onclick"
function(){
node.innerHTML="
I'
vebeenclicked"
});
另一种比较方法是通过使用dojo.query()为标题替换文字:
.style("
cursor"
pointer"
.connect("
this.innerHTML="
以上示例程序增加样式.style(),当鼠标滑过标题时会变成箭头。
通过简单的css来简化代码。
所以.style()具有动态添加和去除节点样式的特点。
通过dojo.connect()可以在同一时间把onclick事件连接到多个节点上。
当前例子中NodeList仅有一个节点,当然也可以添加更多的节点进行测试。
例如:
使用规范化的事件对象dojo.connect(),禁止页面所有链接跳转:
vardisableLinks=function(){
a"
).connect("
function(e){
e.preventDefault();
//stoptheevent
console.log('
clicked:
'
e.target);
//thenodeweclickedon
dojo.addOnLoad(disableLinks);
代码e.preventDefault()会阻止需要被执行事件的发生。
本例中,这个函数阻止了click事件。
在作为参数传递时候,事件经常写成"
e"
或"
evt"
。
更多关于正规化事件对象的介绍可以参考Dojo网站的"
EventObjectBookPage"
.
我们可以把特定对象的方法连接起来,然后在同一范围内执行。
比如在Dijit中声明类或者构造动画的时候,会用到这个特点。
下面定义一个包含若干方法的简单对象,然后通过dojo.connect()把这些方法连接起来:
varmineObj={
aMethod:
function(){
console.log('
runningA'
},
bMethod:
runningB'
}
varotherObj={
cMethod:
runningC'
}
dojo.addOnLoad(function(){
//runbMethod()wheneveraMethod()getsrun
dojo.connect(mineObj,"
aMethod"
mineObj,"
bMethod"
//runanentirelydifferentobject'
smethodviaaseparateconnection
otherObj,"
cMethod"
//startchainofevents
mineObj.aMethod();
终端会显示"
runningA;
runningB;
runningC"
要学习dojo.connect()的强大功能,可以参考dojo.connect()API或者DojoBook。
一些特性:
Dojo动画
Dojo拥有一个强大的动画系统,带有几个预先制作好的动画。
给项目中添加一些可视化的功能通常不太容易,当然其效果会给用户有趣的体验。
所有的动画都使用一个"
magicobject"
作为唯一的参数。
节点:
属性对于应用到动画中的DOM节点很重要。
一些参数是可选的,一些是用于高级特性。
通常的配置如下所示:
varanimArgs={
node:
"
duration:
1000,//mstorunanimation
delay:
250//mstostallbeforeplaying
dojo.fadeOut(animArgs).play();
基本的动画:
包含在dojo.js中的动画效果:
fadeIn,fadeOut和animateProperty.
dojo.animateProperty是更多高级动画的基础。
dojo.style("
opacity"
0"
//hideit
varanim1=dojo.fadeOut({node:
duration:
700});
varanim2=dojo.animateProperty({
node:
delay:
1000,
properties:
{
//fadebackinandmaketextbigger
opacity:
{end:
1},fontSize:
19,unit:
pt"
anim1.play();
anim2.play();
可以看到,dojo.animateProperty()可以通过opacity属性使标题产生淡出效果,然后同时使文字变大。
可以通过类似方法使大多数css属性产生动画效果。
在JavaScript中,某些属性名子类似于font-size和border-top,要使用大小写组合来替代'
-'
,变成fontSize和borderTop。
关于FX
通过基本的animateProperty可以做很多可视化的工作。
为了减小dojo.js的大小,所有其他的动画和工具都打包放在了一个单独的模块:
dojo.fx,通过dojo.require()单独调用。
把dojo.fx模块加入代码可以增加一些动画相关的方法:
bine(),dojo.fx.chain(),dojo.fx.wipeIn(),dojo.fx.wipeOut()和dojo.fx.slideTo()。
dojo.fx"
//slidethenodeto75,75
dojo.fx.slideTo({
top:
75,left:
75
}).play();
//andplayit
dojo.fx.chain()和bine都很常用,它们可以并行或者顺序执行动画效果,然后返回一个dojo._Animation对象实例:
varanim=dojo.fadeOut({node:
varanim2=dojo.fadeIn({node:
dojo.fx.chain([anim,anim2]).play();
把fadeIn()和fadeOut()通常不放到一起,现在把fadeOut()和slideTo()通过bine()运行在同一个DOM节点:
varanim2=dojo.fx.slideTo({node:
top:
75});
varresult=bine([anim,anim2]);
result.play();
动画事件
通过dojo.connect()方法把dojo._Animation()一系列的事件连接起来,产生特别的效果。
常用的是onEnd()和beforeBegin()。
dojo.addOnLoad(function(
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- dojo 快速 入门 资料