The first day of dojo learning Tab tab implementation_dojo

In fact, this is not the case. In the words of "Mastering Dojo", "Dojo is not just a library, but a toolkit." It is more comprehensive and broader than all other JS library plug-ins. It contains about 40 user interface controls, a graphics framework, cometd support, a packaging system, and a few other things.

Download the latest version 1.6 from the dojo official website and unzip it. It has three folders:

1. dojo: It is the basis of Dojo. Everything else you want to do is based on it. It is similar to the jquery.js file, but it is richer in other functions;

2. dijit: Dojo’s widget framework and built-in set of widgets. (There are about 40 HTML user widgets);

3 dojox: Dojo extension library, including all functions from table widgets to drawing libraries.

It is enough to understand these. Although it has only been released to 1.6 and has not reached 6.1 like jquery, dojo is definitely powerful. Choosing it will be your lifelong pursuit. (advertising words)

(Note: Dojo was started in 2004, initiated by Alex, and then developed by many DHTML experts, so it is now very mature.)

Next, we are going to configure our first example, are you ready? The dojo journey has officially begun, we are going to make an example of form registration.

First we need to reference its theme style:

Copy the code The code is as follows:

Themes are theme styles, and there are already several of them. I selected "tundra" among them, and then quoted dojo.css. Then reference the dojo basic file dojo.js:


Here Pay attention to djConfig. Since we need to use declarative widgets, we need parse. This will be simpler to use. If you use programmatic writing, you don’t need it. Just pay attention to it. Then refer to parser.js and ContentPane.js. Parser is necessary to use declarative style, and ContentPane is necessary for content panel. The way to reference in dojo is to call the require method, which is very similar to require_once in PHP, that is, the file is only referenced once.

Copy code The code is as follows:

<script> <BR>dojo.require("dojo.parser"); <BR>dojo.require('dijit.layout.ContentPane' ); <BR>dojo.require('dijit.layout.TabContainer'); <BR></script>

The "." writing here can be understood as a class under the folder , or namespace, very similar to AS3. Have you noticed that there is an extra TabContainer? This is the tab switching plug-in we are going to use. If we call this plug-in, it's very simple. We just need to specify it with the dojoType attribute where we want to use it.

Copy code The code is as follows:

First Name:
Last Name:
Middle Initial:

Email:
Address:
State:
City:
Country:

Work Phone:
Home Phone:
Cell Phone:

然后我们来一句句理解， dojoType='dijit.layout.TabContainer'是指让容器拥有tab选项卡功能,dojoType='dijit.layout.ContentPane'这个是指该容器是一个内容块，也就是单个的选项卡.

最后就没了，这个简单的选项卡就完成了。大家是不是觉得很奇怪，我们竟然没写其它的一行代码就完成了这个功能？这就是声明式小插件的好处了，因为你给dojoType声明了，它就会自动去绑定这个功能。

好了，这是我第一天的正式接触dojo，可能有理解错误的地方，大家可以指出来，我们一起学习进步。 如果你喜欢，我会写第二篇甚至更多.

本文的最终示例图:demo演示请查阅：http://www.lovewebgames.com/dojoroot/myStudy/study_001.html

完整代码:

复制代码 代码如下:

<script> <BR>dojo.require("dojo.parser"); <BR>dojo.require('dijit.layout.ContentPane'); <BR>dojo.require('dijit.layout.TabContainer'); <BR></script>

First Name:
Last Name:
Middle Initial:

Email:
Address:
State:
City:
Country:

Work Phone:
Home Phone:
Cell Phone: