(21) and (22) write bad, skip.
(at) Ajax asynchronous loading
Plugin: dojo/request
Parameters: Request
Syntax (GET):
Request.get (URL). Then ( Successful callback function , failed callback function );
The first callback function is successful, the parameter is response; (can also be used with other)
The second callback function is failed with the parameter error; (can also be used with other)
Note:
① read local relatively simple, directly fill in the local URL can be;
② If you read the server side (such as a database), you need the appropriate support, such as python scripts and so on (my own current python , and server-side data exchange , and so little understanding, so unable to write more detailed)
such as code:
Require (["Dojo/dom", "dojo/on", "Dojo/request", "dojo/domready!"],function (dom,on,request) {//is assigned to a block, This block is used to display the accepted content var resultdiv = Dom.byid ("Resultdiv"); On (Dom.byid ("Textbutton"), "click", Function (evt) {Request.get (" A.txt "). Then (function (response) {alert (response);//If the load succeeds, the output resultdiv.innerhtml =" <pre> "+ response +" </ Pre> ";//The <pre> here is the HTML tag},function (error) {alert (error);//If the load fails, the output failure prompt resultdiv.innerhtml =" <div Class=\ "Error\" > "+ Error +" <div> "///<span style=" font-family:arial, Helvetica, Sans-serif; " > is HTML tag </span>});});After streamlining:
Require (["Dojo/request", "dojo/domready!"],function (Request) {Request.get ("A.txt"). Then (function (response) {alert (response);},function (Error) {alert (error);} );});Grammar ( Post ):
Here post, is related to the server interacting with the program (such as a Python script), so the POST request server, to meet the requirements of the Python script.
I don't quite understand the Python script, but some of the uses of post can be referenced in the following (e.g. grid table)
(24) Time control
① style sheet, need to be added between the two tags of
<link rel= "stylesheet" href= "Dijit/themes/claro/claro.css" >
② rendering: Need to use
<script>dojoconfig = {parseonload:true}</script>Before loading the plugin
③ Plugin loading:
<script>require (["Dojo/parser", "Dijit/form/datetextbox"]);</script>
④ Code:
<body class= "Claro" ><!--here must use body, tested, use other will cause style loss--><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 and ID can be changed, value's month and day require two-bit--></body>
Because it must be included in the body tag. So if the body needs to have another class, or it might have other effects,
So simply add a pair of <body> inside the <body> tag, take class= "Claro",(perhaps consider using its parent tag, add class= "Claro", but I'm not validating) and then include the included content
⑤ Effect:
⑥ If you need to add a read selection time, and join the Compare function with the current time, you need to use:
<1> Add button:
<input type= "button" id= "QQ" value= "Click to get the current number of seconds (from one date to the present)" >
<2> load the jquery file and set the response command
<script>$ (document). Ready (function () {$ ("#qq"). Click (function () {Usertime=document.getelementbyid (' date2 ') . value;//must use this to get the value, cannot use $ ("#date2"). Value//alert (Usertime); The time usertime_seconds= (new Date (usertime)) of the notification settings. GetTime ();//must also be used (new date (p)) to obtain the number of seconds of the string usertime_seconds= parseint (usertime_seconds);//Gets the number format in seconds Nowtime=new Date (),//alert (nowtime)://informs the current system time nowtime_seconds= ( New Date (Nowtime)). GetTime (); Nowtime_seconds = parseint (nowtime_seconds), if (nowtime_seconds>usertime_seconds) {alert ("The current time is after the Config Time ");} Else{alert ("Current time is before, the config Time");})}) </script>Can.
(25) Mouse movement trigger event
Plugin: Dojo/mouse
Parameter: Mouse
Situation One:
When the mouse enters (Mouse.enter) the event is triggered, such as code:
Require (["dojo/on", "Dojo/dom", "Dojo/dom-style", "Dojo/mouse", "dojo/domready!"],function (on,dom,domstyle,mouse) { Pp=dom.byid ("AA");//The object is assigned a value to Ppon (Pp,mouse.enter,function (EVT)//trigger when mouse enters {domstyle.set (pp, "Background-color", "Blue" )///Set the background color of PP to blue})Situation Two:
When the mouse leaves (mouse.leave) triggers an event, such as code:
Require (["dojo/on", "Dojo/dom", "Dojo/dom-style", "Dojo/mouse", "dojo/domready!"],function (on,dom,domstyle,mouse) { Pp=dom.byid ("AA");//The object is assigned a value to Ppon (Pp,mouse.leave,function (EVT)//mouse away when triggered {Domstyle.set (pp, "Background-color", "Red") ;//set PP background color to Red})})Two combined, the effect is:
① is initially the default color;
② the background color blue when mouse enters;
③ The background color turns red when the mouse leaves;
Situation Three:
Triggers an event when the mouse clicks ("click"), such as code:
Require (["dojo/on", "Dojo/dom", "Dojo/dom-style", "Dojo/mouse", "dojo/domready!"],function (on,dom,domstyle,mouse) { A=0;pp=dom.byid ("AA");//The object is assigned a value to Ppon (PP, "click", Function (EVT)//When the mouse enters the trigger {if (a==0) {domstyle.set (PP, " Background-color "," Blue ");//Set the background color of PP to bluea=1;} else {domstyle.set (pp, "Background-color", "Red"),//Set the background color of PP to reda=0})})(26) style modifications (style)
Plugin: Dojo/domstyle
Parameter: Domstyle
Grammar:
Domstyle.set (object, CSS property, set properties);
Example:
Pp=dom.byid ("AA");//The object is assigned to Ppdomstyle.set (PP, "Background-color", "Blue");//Set the background color of PP to BlueGeneral wording of On
Plugin: dojo/on
Parameters: On
Grammar:
On (element, event name, handler);
Explain:
The ① parameter is an element (either directly the value of the ID or a variable assigned by Dom.byid);
② parameter Two is the event name, such as the mouse "click", Mouse.enter and so on;
③ parameter three is how to handle it, can be a function (functions () {...} ）；
(28) Remove Trigger Event
Plugin: Not sure if a plugin is required
Parameter: Ibid.
Syntax: Using the object . Remove () command
Code: (Modify the code in 25)
Require (["dojo/on", "Dojo/dom", "Dojo/dom-style", "Dojo/mouse", "dojo/domready!"],function (on,dom,domstyle,mouse) { A=0;pp=dom.byid ("AA");//The object is assigned a value to Ppvar obj=on (PP, "click", Function (EVT)//When the mouse enters the trigger {if (a==0) {domstyle.set (PP, " Background-color "," Blue ");//Set the background color of PP to bluea=1;} else {domstyle.set (pp, "Background-color", "Red");//Set the background color of PP to Reda=0;obj.remove ();})})Effect:
① First click Turns blue, second click turns red;
② after the click will not continue to change.
③ even if the Obj.remove () is moved to the first line of else, the execution of the else overall code is not affected (stating that the current execution is complete and the next one will not continue)
(29) Contextual relations
Plugin: Dojo/_base/lang
Parameter: lang
Case
① when an object A, he has a method to use this, if other object B calls the method of this object, then this represents not object A, but object B.
② such as code;
MyObject = {id: "MyObject", Onclick:function (evt) {alert ("The scope of this handler is" + this.id);}};o N (MyScopedButton1, "click", Myobject.onclick);③ on this line of code, his callback function is the method of the object MyObject the onclick function, and this function theoretically, this.id output is MyObject (declared before).
④ but in fact, in the triggering event on this line of code, the value of the ID is not MyObject, but MyScopedButton1 's Id=myscopedbutton1 ".
Note:
①myscopedbutton1 needs to have an id attribute (from this.id), if there is no id attribute (or this.id is modified to THIS.PPPP), then the hint will be underfined (the ID here does not refer to the Myojbect ID: " MyObject ", but refers to the this.id attribute).
Workaround:
Syntax: Lang.hitch (Object, "Method name of Object");
Code: (To prevent misunderstanding and clear role, so modify the code)
MyObject = {
id1:"MyObject",
OnClick1:function (evt) {
Alert ("The scope of Thishandler is" + this. ) Id1);
}
};
On (MyScopedButton2, "click",lang.hitch(myObject, "onClick1"));
Explain:
① first, the result of this response is myobject;
② here is the method of the object MyObject OnClick1 (please do not misunderstand that this is the event click, but usually the name of the onclick is the method that is called when clicked);
③this.id1 refers to the Id1 property of the current object.
④ thus indicates that the callback function is the method of the object Myojbect onClick1 (function), this refers to MyObject, not myScopedButton2)
The second parameter of ⑤lang.hitch can also be substituted with Myobject.onclick1.
() class Selector
Plugin: Dojo/query
Parameters: Query
Grammar:
Query (". ClassName")
such as code:
Suppose there is a block: <buttonid= "myScopedButton1" class= "AA" > Test </button>
So
MyScopedButton1 = Query (". AA");
Equivalent
MyScopedButton2 = Dom.byid ("MyScopedButton2");
Premise:
①class= "AA" only this one
② If there are multiple, the equivalent of selecting the entire
Another way to pronounce on:
Plug-in: Same on
Parameters: Same on
The previous method:
On (MyScopedButton1, "click", Myobject.onclick);
Another way:
Myscopedbutton1.on ("click", Myobject.onclick);
(32) Select the parent block is a block B, c block (different buttons share the same event)
Plugin: If it is a class selector, you need to dojo/query
Parameters: May require query
Code
HTML section:
<div id= "MMM" ><button id= "test" value= "1" class= "AA" > Test 1</button><button id= "test" value= "2" class= "AA" > Test 2</button></div>
Dojo section:
① Object methods:
MyObject = {id: "MyObject", Onclick:function (evt) {alert ("The scope of this handler is" + This.value);}};② Event:
PPP = Dom.byid ("MMM"); On (PPP, "#test: Click", Myobject.onclick);Note: The event does not use a context relationship (Lang.hitch), so it returns its own value
Effect:
① when the "Test 1" button is clicked, the return value is 1;
② when the "Test 2" button is clicked, the return value is 2;
Explain:
①on (PPP, "#test: Click", Myobject.onclick);
The code means that in the block represented by PPP (there are several things in it), the event is triggered when the ID test (all blocks or components) is clicked Myobject.onclick
② If you have plug-ins dojo/query and parameter query, you can use the class selector ("#test:Click" is replaced by ". Aa:click").
③this.value according to the test, can not be arbitrarily changed, can only be changed to the preset properties. For example, ID, value, and so on.
Suppose the block is <buttonid= "test" temp= "1"class= "AA" > Test 1</button>
This.value is changed to this.temp, then the return value is underfined
(33) Message Publishing, Message subscriptions (Topic.publish () and Topic.subscribe ())
According to the information found, this function seems very powerful, but do not understand topic.subscribe, here is only the simplest.
Plugin: Dojo/topic
Parameter: Topic
Code:
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" hints ");//publish push message, the first parameter is the message name (unique), the second ~ more parameters is the message content}); I=3;on (T2," click ", Function () {var Morebutton = Domconstruct.create ("button", {innerHTML: "T" +i}, T2, "after");//Note that the New button is created before the old button, such as T2, T5, T4, T3 in the form of I++;on (Morebutton, "click", function () {topic.publish ("mm", "T" +i+ "hint");//Note that I is not the I at the time the button was created, but the current value of i}); Topic.subscribe ("MM", function (text)//Accept message, first parameter is message name, second parameter is callback function {alert (text);});});Code Explanation:
① initially has two buttons: "Test 1" and "Test 2". Test after 1 click Alert, Test 2 Click to create a New button (can be created multiple times), New button click after alert
② about alert behavior: After a click is not a direct alert, but a push message via topic.publish. The first parameter of the push is the message name (unique, used to differentiate), the second parameter (or more arguments) is the specific message;
③ messages are pushed by Topic.publish, relying on Topic.subscribe to receive messages. The first parameter is the message name (which determines whether to respond), the second parameter is the callback function (the parameter of the callback function is the name of the message, the first argument is the first message, the second argument is the second message, and so on);
④ after receiving a message that the message name matches, subscribe triggers the callback function to alert the message.
Its process
As for how to send, send the store where, how to respond, regardless (want to control also do not understand AH)
Only know the previous one can send, the latter can be sent in response.
The advantage of this is that you can send messages to different objects and then respond to the same object (such as messages sent by alert)
Learn from scratch _javascript_ series (ix)--dojo (2) (AJAX, Time controls, mouse events, style modifications, event removal, message publishing subscriptions)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
