从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

(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发送的消息)

时间: 2024-10-20 23:40:33

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)的相关文章

从零开始学_JavaScript_系列(27)——myblog的优化【1】样式表分离、localStorage

myblog的建立参照: http://blog.csdn.net/qq20004604/article/details/52019904 本来打算今天写的轮播图,不过突然看到localStorage,一时兴起先搞这个了.下次再写轮播图吧 [1]全局样式和独立样式的分离 我将样式表分割为全局表和独立表: l 在全局的样式里,是一些通用的样式,他们的特点是复用率高,例如设置隐藏效果的.displayNONE,他只有一条属性那就是display:none;加载全局样式时,样式表在head部分. l 

【高德地图API】从零开始学高德JS API(二)地图控件与插件——测距、圆形编辑器、鼠标工具、地图类型切换、鹰眼鱼骨

摘要:无论是控件还是插件,都是在一级API接口的基础上,进行二次开发,封装的一系列更加便于开发者使用,减少开发者工作量的二级API接口.除了官方通用的鱼骨.鹰眼控件,还有大量官方开发的地图插件,类似谷歌的lib.当然本文还会介绍自定义插件的使用. ------------------------------------------------------------------------------------------------- 第一部分 控件 目前官方支持的控件包含:缩放控制条-地图

从零开始学ios开发(六):IOS控件(3),Segmented Control、Switch

这次的学习还是基于上一个项目继续进行(你也可以新建一个项目)学习Segmented Control和Switch. Segmented Control Switch Segmented Control和Switch的主要区别在于Segmented Control可以有多个值进行选择,而Switch只有2个值. 1)添加Segmented Control从object library中拖一个Segmented Control到iphone界面上然后调整Segmented Control位置以及它的

从零开始学ios开发(五):IOS控件(2),Slider

下面继续学习ios的其他控件,这次会使用到的控件有Slider,当然还有一些之前已经使用过的控件Label. 这次我们不新建一个project了,当然如果你愿意重新创建一个新的项目也完全可以,我们还是使用上一篇的项目Control Fun. 上一篇中,我们最后的成果如下图所示我们添加了一个ImageView,2个Label和2个TextField,现在我们继续在此基础上添加其他的控件. 1)添加Slider和LabelSlider类似于一个滑块,左右(或者上下)滑动来改变数值,在object l

从零开始学ios开发(四):IOS控件(1),Image View、Text Field、Keyboard

长话短说,谢谢大家的关注,这篇写了好长时间,下面继续学习ios.我将用2到3篇的篇幅来学习iphone上的一些常用控件,包括Image View.Text Field.Keyboard.Slider等等,这篇的内容包括ImageView和Keyboard的使用.完成后的效果图如下: 1)创建一个新的project,选择“Single View Application”,命名为“Control Fun”,然后保存.一些和前几章相似的步骤在从这篇起就开始一笔待过了,也不再做截图了,例如这里的创建一个

从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)

(34)gridx gridx系列插件并非和dojo的插件在一起 需要下载的请通过以下网址下载: http://oria.github.io/gridx/ 不过我也不太懂不同版本有什么区别(事实上我对gridx还属于新手水平) PS:dojo本身有dojox/grid插件,语法和gridx并不同,所以不能混用. PSS: 由于看这篇帖子的人,基本没办法自己和服务器/数据库互动,所以建议自己写一个json文件,然后get这个json文件(具体看之前的AJAX相关的,很简单,或者使用我下面给的例子也

从零开始学_JavaScript_系列(四)——jquery(基础,选择器,触发条件,动画,回调函数)

jQuery语法 (1)引用jquery文件及下载库: http://jquery.com/download/ 下载 Download the compressed, production jQuery 2.2.2 这个是用户版的,已经被精简和压缩. 然后使用 <script src="jquery.js"></script> 来启动这个库文件,记得将下载的文件重命名为jquery.js 也可以使用谷歌和微软的CDN,不过这里略. (2)jQuery语法 $ (

从零开始学_JavaScript_系列(十一)——dojo(4)(GRID表格进阶:格式化、style、数据获取、多重排序、点击事件)

如果没有阅读过gridx表格的基本运用教程,建议先阅读这篇(4天点击量已经接近5k): http://blog.csdn.net/qq20004604/article/details/51170919 里面很详细的说明了gridx表格的创建,常用模块,和基本使用. 如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载,请查看: https://dojo

从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)

dojo学习 (1)加载 ①首先,先设置 <script> //替代使用data-dojo-config,我们创建一个dojoConfig对象(是个设置)在我们调用dojo.js之前,他们功能相同 //这比通过一大堆设置来说,更易阅读 var dojoConfig = { async: true, //这个代码注册了demo包的正确位置,于是我们可以调用dojo从CDN,并且同时还能加载本地模块 packages: [{ name: "demo", location: lo