引用dojo的引用
js中,某些属性名字类似于font-size 和 border-top ,要使用大小写组合来代替“-”,变成fontSize 和 borderTop
1. Dojo可以runtime实时设定各种配置信息。parseOnLoad用来处理页面装载解析widgets和添加代码,isDebug用来打开和禁止特定的debugging信息。
<script type="text/javascript" src="dojo-release/dojo/dojo.js"
djConfig="parseOnLoad:true, isDebug:true"></script>
也可以
<script type="text/javascript">
var djConfig = {
isDebug:true, parseOnLoad:true
};
</script>
2. dojo.addOnLoad是Dojo的重要方法, 如同ready方法
<script>
var init = function(){
alert("testing");
console.log("I run after the page is ready.");
}
dojo.addOnLoad(
function(){
console.log("I after run , but second.");
}
);
</script>
3. Dojo通过dojo.require()装载其他相关代码。这个功能允许我们使用那些不属于Dojo.js的Dojo Toolkit,比如拖放功能,动画, Dijit.widgets, DojoX项目或者开发者自己的代码。
dojo.require("dijit.form.Button");
dojo.require("dijit.TitlePane");
dojo.addOnload(
function(){
dojo.byId("testHeading").innerHTML = "We're on our way";
console.log("动态加载的一个库");
}
);
dojo.addOnLoad执行的代码要等dojo.require()装载完毕才运行
4.操作DOM
Dojo提供了一个函数dojo.query()来处理文档对象模型(DOM)
dojo.query() 的用法
dojo.addOnload(
dojo.query("#testHeading")
.addClass("testClass");
.fadeOut({ delay: 500}).play();
);
5.事件传递 两种方式
dojo.connect()
dojo.addOnLoad(function(){
var node = dojo.byId("testHeading");
dojo.connect(node,"onclick", function(){
node.innerHTML = "I've been clicked";
});
}
)
var disbleLinks = function(){
dojo.query("a").connect("onclick",function(e){
e.preventDefault(); //stop the event
console.log('clicked', e.target);
})
}
代码e.preventDefault()会阻止需要被执行事件的发生。 在作为参数传递时候,时间经常写成"e","evt"
6. 把特定对象的方法连接起来,然后在同一范围内执行。 下面定义个个包含若干方法的简单对象,然后通过dojo.connect()把这些方法连接起来
var mineObj = {
aMethod : function(){
console.log("running A");
},
bMethod : function(){
console.log("running B");
}
};
var otherObj = {
cMethod : function(){
console.log("running c");
}
};
dojo.addOnLoad(function(){
// run bMethod() whenever aMethod() gets run
dojo.connect(mineObj,"aMethod",mineObj,"bMethod");
// run an entirely different object's method via a separate connection
dojo.connect(mineObj,"bMethod",otherObj,"cMethod");
// start chain of events
mineObj.aMethod();
}
)
终端会显示"running A; running B; running C"。
7.Dojo动画
所有的动画都使用一个“magic object” 作为唯一的参数。 节点: 属性对于应用到动画中的DOM节点很重要。
通常的配置如下:
dojo.addOnLoad(function(){
var animArgs = {
node : "testHeading",
duration : 1000 , // ms to run animation
delay : 250 // ms to stall before playing
};
dojo.fadeOut(animArgs).play();
}
);
基本动画:
包含在dojo.js中的动画效果:fadeIn, fadeOut 和animateProperty是更多高级动画的基础.
dojo.addOnLoad(function(){
dojo.style("testHeading","opacity","0");
var anim1 = dojo.fadeOut({node:"testHeading",during:700});
var anim2 = dojo.animateProperty({
node : "testHeading",
delay: 1000,
properties: {
//fade back in and make text bigger
opacity:{end:1},
fontSize: {end : 19 ,
unit:"pt"
}
}
});
anima1.play();
anima2.play();
}
)
8. 通过基本的animateProperty可以做很多可视化的工作,为了减小dojo.js的大小,所有其他的动画和工具都打包放在一个单独的模块:dojo.fx,通过dojo.require()单独调用。
dojo.fx.combine(), dojo.fx.chain(),dojo.fx.wipeIn(),dojo.fx.wipeOut()和dojo.fx.slideTo()
dojo.require("dojo.fx");
dojo.addOnLoad(function(){
dojo.fx.slideTo(
node: "testHeading" ,
top:75,
left:75
).play();
}
);
dojo.fx.chain() 和 dojo.fx.combine都很常用, 他们可以并行或者顺序执行动画效果,然后返回一个dojo.Animation对象实例。
dojo.require("dojo.fx");
dojo.addOnLoad(function(){
var anim1 = dojo.fadeOut({node:"testHeading"});
var anim2 = dojo.fadeIn({node:"testHeading"});
dojo.fx.chain([anim1,anim2]).play();
})
9.动画事件
通过dojo.connect()方法把dojo._Animation()一系列事件连接起来,产生特别的效果。常用的是onEnd() 和 beforeBegin();
dojo.addOnLoad(function(){
var anim = dojo.fadeOut({node:"testHeading"});
dojo.connect(anim,"onEnd",function(){
console.log("the animation is done");
});
dojo.conncet(anim,"beforeBegin",function(){
console.log("the animation is about to start");
});
anim.play();
}
);
dojo.addOnLoad(function(){
var anim = dojo.fadeOut({
node: "testHeading",
onEnd: function(){
dojo.byId("testHeading").innerHTML = "replaced ... ";
dojo.fadeIn({ node: "testHeading" }).play();
}
}).play();
});
10.dojo.query()动画效果
使用dojo.query()可以实现节点集合中的每个对象都产生动画效果。当要操作一组节点的时候,这个功能非常有用。(在这个例子中,所有的节点应该带有同样的类别 class='fadeNode')
dojo.require("dojo.NodeList-fx");
var fadeThem = function(){
dojo.query(".fadeNode").fadeOut().play();
}
dojo.addOnLoad(function(){
dojo.connect(dojo.byId("testHeading"),"onclick",fadeThem);
}
);
11.Ajax简单的数据传输
Ajax的核心技术:XmlHttpRequest ,当使用http动作,如post,get,put,delete时
XHR方法使用dojo.Deferred()方法在后台处理callbacks(). 很重要。。。
获取数据
第一步是dojo.xhrGet(),这个方法返回通过URL进行GET调用的内容。XHR方法共享许多参数,最重要和常用的是url:(目的地)和handleAs:(我们如何处理返回信息)。当被请求的数据返回时,数据会被传递给我们定义好的函数load:
var init = function(){
var contentNode = dojo.byId("content");
dojo.xhrGet({
url: "sample.txt",
handleAs:"text",
load: function(data,args){
//fade out the node we are modifying
dojo.fadeOut({
node : contenNode,
onEnd : function(){
//set the data , fade it back in
contentNode.innerHTML = data;
dojo.fadeIn({node:contentNode}).play();
}
}).play();
},
//if any error occurs, it goes here
error : function(error,args){
console.warn("error!",error);
}
});
};
dojo.addOnLoad(init);
发送数据:
dojo.addOnload(function(){
dojo.xhrPost({
url:"submit.html",
content:{
"key":"value",
"foo":42,
"bar" : {
"baz" : "value"
}
},
load : function(data,ioargs){
console.log(data);
},
}
);
}
);
添加一些js通过dojo.connect()来提交表单
var formSubmit = function(e){
// prevent the form from actually submitting
e.preventDefault();
// submit the form in the background? ?
dojo.xhrPost({
url: "alternate-submit.php",
form: "mainForm",
handleAs: "text",
handle: function(data,args){
if(typeof data == "error"){
console.warn("error!",args);
}else{
// show our response
console.log(data);
}
}
});
};
dojo.addOnLoad(function(){
var theForm = dojo.byId("mainForm");
// another dojo.connect syntax: call a function directly? ?
dojo.connect(theForm,"onsubmit",formSubmit);
});
dojo入门总结
最新推荐文章于 2023-02-22 10:03:52 发布