如果没有接触过dojo,建议阅读:
http://blog.csdn.net/qq20004604/article/details/51028702
里面介绍了如何加载dojo。
关于dojo的下载,请查看:
https://dojotoolkit.org/download/
建议下载FULL SOURCE版
如果需要讨论,请评论、或者站内信,我会尽快回复。
(21)和(22)写的不好,跳过。
(23)AJAX异步加载
插件:dojo/request
参数:request
语法(get):
request.get(URL).then(成功回调函数,失败回调函数);
第一个回调函数是成功的,参数用response;(也可以用其他的)
第二个回调函数是失败的,参数用error;(也可以用其他的)
注:
①读取本地比较简单,直接填写本地的url即可;
②如果读取服务器端(比如数据库),那么需要相应的支持,例如python脚本等(我自己目前对python、和服务器端的数据交换等了解的很少,所以没法写的更详细)
如代码:
require(["dojo/dom","dojo/on","dojo/request","dojo/domReady!"],function(dom,on,request) { //被赋值给某个块,这个块用来显示接受的内容 var resultDiv = dom.byId("resultDiv"); on(dom.byId("textButton"), "click", function(evt) { request.get("a.txt").then ( function(response) { alert(response); //假如加载成功,输出之 resultDiv.innerHTML = "<pre>" + response + "</pre>"; //这里的<pre>是HTML标签 }, function(error) { alert(error); //假如加载失败,输出失败提示 resultDiv.innerHTML = "<div class=\"error\">" + error + "<div>"; //也<span style="font-family: Arial, Helvetica, sans-serif;">是HTML标签</span> } ); }); });
精简后:
require(["dojo/request","dojo/domReady!"],function(request) { request.get("a.txt").then ( function(response) { alert(response); }, function(error) { alert(error); } ); });
语法(post):
这里post,是跟和服务器交互的程序有关的(比如是python脚本),所以post请求服务器的话,要符合python脚本的要求。
关于python脚本我不太懂,但关于post的某些用法,可以参照后面的内容(比如grid表格)
(24)时间控件
①样式表,需要在<head>的两个标签之间加入
<link rel="stylesheet" href="dijit/themes/claro/claro.css">
②渲染:需要使用
<script>dojoConfig = {parseOnLoad: true}</script>
在加载插件之前
③插件加载:
<script> require(["dojo/parser", "dijit/form/DateTextBox"]); </script>
④代码:
<body class="claro"> <!--这里必须用body,经测试,使用其他的会导致样式丢失--> <label for="date1">Drop down Date box:</label> <input type="text" name="date2" id="date2" value="2016-04-01" data-dojo-type="dijit/form/DateTextBox" required="true" /> <!--name和id可以被更改,value的月和日需要两位--> </body>
由于必须被body标签所包含。所以如果body需要有其他class,或者这样用可能有其他影响,
所以干脆在<body>标签内部再加入一对<body>,带上class="claro",(或许可以考虑用其父标签,加入class="claro",但我未验证)然后包含所包含的内容
⑤效果:
⑥如果需要添加读取选择时间,和加入与当前时间的比较功能,则需要使用:
<1>添加按钮:
<input type="button" id="qq" value="点击获取当前秒数(从某个日期到现在的)">
<2>加载jquery文件,然后设置响应的命令
<script> $(document).ready(function() { $("#qq").click(function() { UserTime=document.getElementById('date2').value; //必须用这个才能得到值,不能用$("#date2").value //alert(UserTime); //通报设置的时间 UserTime_Seconds=(new Date(UserTime)).getTime(); //也是必须用(new Date(p))才可以,此时获取的是字符串的秒数 UserTime_Seconds=parseInt(UserTime_Seconds); //此时获取的是number格式的秒数 NowTime=new Date(); //alert(NowTime): //通报当前系统时间 NowTime_Seconds=(new Date(NowTime)).getTime(); NowTime_Seconds = parseInt(NowTime_Seconds); if(NowTime_Seconds>UserTime_Seconds) { alert("当前时间 is after the config time"); } else { alert("当前时间 is before the config time") ; } }) }) </script>
即可。
(25)鼠标移动触发事件
插件:dojo/mouse
参数:mouse
情况一:
当鼠标进入时(mouse.enter)触发事件,如代码:
require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse) { pp=dom.byId("aa"); //该对象赋值给pp on(pp,mouse.enter,function(evt) //鼠标进入时触发 { domStyle.set(pp,"background-color","blue"); //设置pp的背景色为blue }) })
情况二:
当鼠标离开时(mouse.leave)触发事件,如代码:
require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse) { pp=dom.byId("aa"); //该对象赋值给pp on(pp,mouse.leave,function(evt) //鼠标离开时触发 { domStyle.set(pp,"background-color","red"); //设置pp的背景色为red }) })
两个结合起来,效果为:
①初始为默认色;
②鼠标进入时背景色变蓝;
③鼠标离开时背景色变红;
情况三:
当鼠标点击时("click")触发事件,如代码:
require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse) { a=0; pp=dom.byId("aa"); //该对象赋值给pp on(pp,"click",function(evt) //鼠标进入时触发 { if(a==0) { domStyle.set(pp,"background-color","blue"); //设置pp的背景色为blue a=1; } else { domStyle.set(pp,"background-color","red"); //设置pp的背景色为red a=0 } }) })
(26)样式修改(style)
插件:dojo/domStyle
参数:domStyle
语法:
domStyle.set(对象, css属性, 设置的属性);
例子:
pp=dom.byId("aa"); //该对象赋值给pp domStyle.set(pp,"background-color","blue"); //设置pp的背景色为blue
(27)on的通用写法
插件:dojo/on
参数:on
语法:
on(element, event name, handler);
解释:
①参数一为元素(可以直接是id的值,也可以是通过dom.byId赋值的变量);
②参数二为事件名称,如鼠标的"click",mouse.enter等;
③参数三为如何处理,可以是一个函数(function(){........});
(28)移除触发事件
插件:不能确定是否需要插件
参数:同上
语法:使用 对象.remove() 命令
代码:(修改25中的代码)
require(["dojo/on","dojo/dom","dojo/dom-style","dojo/mouse","dojo/domReady!"],function(on,dom,domStyle,mouse) { a=0; pp=dom.byId("aa"); //该对象赋值给pp var obj=on(pp,"click",function(evt) //鼠标进入时触发 { if(a==0) { domStyle.set(pp,"background-color","blue"); //设置pp的背景色为blue a=1; } else { domStyle.set(pp,"background-color","red"); //设置pp的背景色为red a=0; obj.remove(); } }) })
效果:
①第一次点击变为蓝色,第二次点击变为红色;
②之后再点击将不会继续改变。
③即使将 obj.remove()移动到else的第一行,依然不影响else整体代码的执行(说明当前的会执行完毕,下一次不会继续执行)
(29)上下文关系
插件:dojo/_base/lang
参数:lang
情况:
①当一个对象A,他有一个方法使用this时,若其他对象B调用这个对象的方法,那么this表示的则不是对象A,而是对象B。
②如代码;
myObject = { id: "myObject", onClick: function(evt) { alert("The scope of this handler is " + this.id); } }; on(myScopedButton1, "click", myObject.onClick);
③在on这一行代码,他的回调函数是对象myObject的方法onClick的函数,而这个函数理论上,this.id输出的是myObject(在之前所声明)。
④但事实上,在on这行代码的触发事件中,id的值并非是myObject,而是myScopedButton1的id=myScopedButton1"。
备注:
①myScopedButton1需要有id属性(来自this.id),如果没有id属性(或者this.id被修改为this.pppp这样),那么提示将会是underfined(这里的id不是指myOjbect里id:"myObject",,而是指的是this.id属性)。
解决办法:
语法:lang.hitch(对象, "对象的方法名");
代码:(为了防止误解和明确作用,故修改代码)
myObject = {
id1:"myObject",
onClick1:function(evt){
alert("The scope of thishandler is " + this.id1);
}
};
on(myScopedButton2, "click",lang.hitch(myObject, "onClick1"));
解释:
①首先,这个回应的结果是myObject;
②这里的方法是对象myObject的方法onClick1(请不要误解为这是事件click,只是一般会为之起名onClick表示是当点击时调用的方法);
③this.id1指的是当前对象的id1属性。
④因此说明,回调函数是对象myOjbect的方法onClick1(函数),this指的是myObject,而不是myScopedButton2)
⑤lang.hitch的第二个参数也可以用myObject.onClick1来替代。
(30)class选择器
插件:dojo/query
参数:query
语法:
query(".className")
如代码:
假设有块:<buttonid="myScopedButton1" class="aa">测试</button>
那么
myScopedButton1 = query(".aa");
相当于
myScopedButton2 = dom.byId("myScopedButton2");
前提:
①class="aa"只有这一个
②如果有多个,相当于选择了全部的
(31)on的另一种写法:
插件:同on
参数:同on
之前的方法:
on(myScopedButton1, "click", myObject.onClick);
另一种方法:
myScopedButton1.on( "click", myObject.onClick);
(32)选择父块是A块的B、C块(不同按钮共享同一个事件)
插件:如果是class选择器,需要dojo/query
参数:可能需要query
代码;
html部分:
<div id="mmm"> <button id="test" value="1" class="aa">测试1</button> <button id="test" value="2" class="aa">测试2</button> </div>
dojo部分:
①对象方法:
myObject = { id: "myObject", onClick: function(evt){ alert("The scope of this handler is " + this.value); } };
②事件:
ppp = dom.byId("mmm"); on(ppp, "#test:click", myObject.onClick);
注意:事件这里没有使用上下文关系(lang.hitch),因此返回的是自己的value
效果:
①点击“测试1”按钮时,返回值1;
②点击“测试2”按钮时,返回值2;
解释:
①on(ppp, "#test:click", myObject.onClick);
代码的意思是,在ppp所代表的块内(里面有若干个东西),id为test的(所有块或组件)被点击时,触发事件myObject.onClick
②如果有插件dojo/query和参数query,那么可以使用class选择器("#test:click"被".aa:click"替代)。
③this.value根据测试,不能随意更改,只能更改为预设的属性。例如id、value等。
假设块为<buttonid="test" temp="1"class="aa">测试1</button>
this.value被更改为this.temp,那么返回值是underfined
(33)消息发布、消息订阅(topic.publish()和topic.subscribe())
根据查到的资料,这个功能似乎很强大,不过没搞懂topic.subscribe,这里只说最简单的。
插件:dojo/topic
参数:topic
代码:
require(["dojo/on", "dojo/topic", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"], function(on, topic, domConstruct, dom) { t1 = dom.byId("test1"); t2 = dom.byId("test2"); on(t1, "click", function() { topic.publish("mm", "T1的提示"); //publish推送消息,第一个参数是消息名称(唯一),第二个~更多参数是消息内容 }); i=3; on(t2, "click", function() { var moreButton = domConstruct.create("button", {innerHTML:"t"+i}, t2, "after"); //注意,创建的新按钮位置在旧按钮之前,例如t2, t5, t4, t3这样形式的 i++; on(moreButton, "click", function() { topic.publish("mm", "T"+i+"的提示"); //注意,这里的i不是创建按钮时的i,而是当前的i的值 }); }); topic.subscribe("mm",function(text) //接受消息,第一个参数是消息名称,第二个参数是回调函数 { alert(text); }); });
代码解释:
①初始有两个按钮:“测试1”和“测试2”。测试1点击后alert,测试2点击后创建新按钮(可以多次创建),新按钮点击后alert
②关于alert行为:点击后并非直接alert,而是通过topic.publish推送消息。推送的第一个参数是消息名(唯一,用于区分),第二个参数(或更多的参数)是具体的消息;
③通过topic.publish推送的消息,依靠topic.subscribe来接受消息。第一个参数是消息名(用于决定是否响应),第二个参数是回调函数(回调函数的参数是消息的名字,第一个参数是第一个消息,第二个参数是第二个消息,依此类推);
④在接收到消息名符合的消息之后,subscribe触发回调函数,将消息alert出来。
其过程如图:
至于如何发送、发送的存放在哪、如何响应的,不管(想管也不明白呀)
只知道前一个能发送,后一个能在发送时响应即可。
这个的好处在于,可以不同的对象发送消息,然后同一个对象响应(比如alert发送的消息)