In fact, "Dojo is not just a library, it's a toolkit," says the master Dojo, and it's more comprehensive than all the other JS library plug-ins. It contains about 40 user interface controls, 1 graphics frames, COMETD support, a packaged system, and much more.
Download the latest version of 1.6 from Dojo's official website and unzip it with three folders, respectively:
1. Dojo: It's the Dojo Foundation, and all the other things you have to do are based on it, similar to the Jquery.js file, but it enriches a few other features;
2. Dijit:dojo widget frame and built-in small control set. (approximately 40 HTML user small controls);
3 Dojox:dojo Extension Library that contains all of the features from the table widget to the drawing library.
This is enough to know, although it is only published to 1.6, not like jquery to 6.1, but dojo is absolutely powerful, choose it, will be your life unchanged pursuit. (advertisement Word)
(Note: The Dojo started in 2004, Alex launched, and then was developed by a number of DHTML experts, so it's now mature.) )
Next, we're going to configure our first example, are you ready? The Dojo tour officially begins, and we're going to do a form registration example.
First, we'll refer to its theme style:
Copy Code code as follows:
<style>
@import URL (.. /DIJIT/THEMES/TUNDRA/TUNDRA.CSS);
@import URL (.. /DOJO/RESOURCES/DOJO.CSS);
</style>
Themes is the theme style, there are already a few, I chose the "tundra", and then to quote the DOJO.CSS. And then referencing the Dojo base file Dojo.js:
<script src= '. /dojo/dojo.js ' djconfig= ' parseonload:true ' ></script>
Note Here is djconfig, because we want to use the declaration widget, so need to parse, this use will be simple, if you do not need to use the programming, just pay attention to the line. Then the reference to Parser.js and contentpane.js,parser is necessary to use the declaration, and ContentPane is required by the content panel. The way in dojo is to invoke the Require method, which is similar to the require_once in PHP, which refers to the file only once.
Copy Code code as follows:
<script>
Dojo.require ("Dojo.parser");
Dojo.require (' Dijit.layout.ContentPane ');
Dojo.require (' Dijit.layout.TabContainer ');
</script>
Here's "." The writing can be understood as a class under a folder, or a namespace, similar to the AS3. Everyone is not found a tabcontainer, this is the tab we want to use to switch the widget. If you call this plugin, it's very simple, just use the Dojotype attribute to specify where we want it to be.
Copy Code code as follows:
<div dojotype= ' dijit.layout.TabContainer ' class= ' myForm ' >
<div dojotype= ' dijit.layout.ContentPane ' title= ' personal information ' >
<label for= "FirstName" >first name:</label><input type= ' text ' id= ' firstName '/></br>
<label for= "LastName" >last name:</label><input type= ' text ' id= ' lastName '/></br>
<label for= "middleinitial" >middle initial:</label><input type= ' text ' id= ' middleInitial '/></br >
</div>
<div dojotype= ' dijit.layout.ContentPane ' title= ' contact address ' >
<label>email:</label><input type= ' text ' id= ' Email '/></br>
<label>address:</label><input type= ' text ' id= ' address '/></br>
<label>state:</label><input type= ' text ' id= ' state '/></br>
<label>city:</label><input type= ' text ' id= ' city '/></br>
<label>country:</label><input type= ' text ' id= ' Country '/></br>
</div>
<div dojotype= ' dijit.layout.ContentPane ' title= ' Contact Tel ' >
<label>work phone:</label><input type= ' text ' id= ' Workphone '/></br>
<label>home phone:</label><input type= ' text ' id= ' HomePhone '/></br>
<label>cell phone:</label><input type= ' text ' id= ' CellPhone '/></br>
</div>
</div>
And then we'll understand that dojotype= ' dijit.layout.TabContainer ' means that the container has the Tab tab function, Dojotype= ' Dijit.layout.ContentPane ' This means that the container is a block of content, which is a single tab.
Finally, this simple tab is complete. Do you think it's strange that we did this without writing another line of code? This is the benefit of declarative widgets, because when you declare to Dojotype, it will automatically bind to this feature.
OK, this is my first day of formal contact with dojo, may have misunderstood the place, we can point out that we learn to progress together. If you like, I will write a second article or more.
The final sample diagram of this article: demo demo Please refer to: http://www.lovewebgames.com/dojoroot/myStudy/study_001.html
Complete code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
<title> First day </title>
<meta name= "generator" content= "EditPlus" >
<meta name= "Author" content= "" >
<meta name= "Keywords" content= "" >
<meta name= "Description" content= "" >
<style>
@import URL (.. /DIJIT/THEMES/TUNDRA/TUNDRA.CSS);
@import URL (.. /DOJO/RESOURCES/DOJO.CSS);
</style>
<script src= '. /dojo/dojo.js ' djconfig= ' parseonload:true ' ></script>
<script>
Dojo.require ("Dojo.parser");
Dojo.require (' Dijit.layout.ContentPane ');
Dojo.require (' Dijit.layout.TabContainer ');
</script>
<style>
. myform{width:600px;height:300px;line-height:1.6;}
. MyForm Label{width:150px;float:left;}
</style>
<body class= "Tundra" >
<div dojotype= ' dijit.layout.TabContainer ' class= ' myForm ' >
<div dojotype= ' dijit.layout.ContentPane ' title= ' personal information ' >
<label for= "FirstName" >first name:</label><input type= ' text ' id= ' firstName '/></br>
<label for= "LastName" >last name:</label><input type= ' text ' id= ' lastName '/></br>
<label for= "middleinitial" >middle initial:</label><input type= ' text ' id= ' middleInitial '/></br >
</div>
<div dojotype= ' dijit.layout.ContentPane ' title= ' contact address ' >
<label>email:</label><input type= ' text ' id= ' Email '/></br>
<label>address:</label><input type= ' text ' id= ' address '/></br>
<label>state:</label><input type= ' text ' id= ' state '/></br>
<label>city:</label><input type= ' text ' id= ' city '/></br>
<label>country:</label><input type= ' text ' id= ' Country '/></br>
</div>
<div dojotype= ' dijit.layout.ContentPane ' title= ' Contact Tel ' >
<label>work phone:</label><input type= ' text ' id= ' Workphone '/></br>
<label>home phone:</label><input type= ' text ' id= ' HomePhone '/></br>
<label>cell phone:</label><input type= ' text ' id= ' CellPhone '/></br>
</div>
</div>
</body>
