Dojo -- Getting Started篇之Hello Dojo!
一直都想尝试使用dojo,毕竟它是众多JavaScript高手眼中的”瑰宝”。本文是dojo系列的第一篇,会介绍一下dojo的搭建和编写两个简单的hello word程序。 下载dojo在网络通畅的情况下,可以用最简单的方式使用dojo,如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> </head> <body> <h1 id="greeting">Hello</h1> <!-- load Dojo --> <scriptsrc="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js" data-dojo-config="async: true"></script> </body> </html> 这样,会从cdn中下载dojo相关的js文件。另一种做法,是将dojo的js文件下载下来,直接在本地使用dojo。 下载地址:http://dojotoolkit.org/download/
下载完解压后,目录结构如下:
Eclipse中编写dojo helloworld程序h在Eclipse中建立一个java web工程,然后把dojo中的dijit/dojo/dojox拷贝到工程中。
ok,现在可以编写dojo程序了。下面将会简单编写两个例子,一个简单的hello world程序,另一个是使用dojo的动画模块,编写一个文字滑动的例子。
第一个例子:hello-domReady.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> </head> <body> <h1 id="greeting">Hello</h1> <!-- load Dojo --> <script src="dojo/dojo.js" data-dojo-config="async:true"></script> <script> require([ 'dojo/dom','dojo/domReady!' ],function (dom) { var greeting = dom.byId('greeting'); greeting.innerHTML += ' from Dojo!'; }); </script> </body> </html> Dojo中是使用异步加载(AsynchronousModule Definition (AMD))的形式加载模块的。成功运行上面的代码后,效果如下:
第二个例子hello-fx.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tutorial: Hello Dojo!</title> </head> <body> <h1 id="greeting">Hello</h1> <!-- load Dojo --> <script src="dojo/dojo.js" data-dojo-config="async:true"></script> <script> require([ 'dojo/dom','dojo/fx',function (dom,fx) { // The piece we had before... var greeting = dom.byId('greeting'); greeting.innerHTML += ' from Dojo!'; // ...but now,with an animation! fx.slideTo({ node: greeting,top: 100,left: 200 }).play(); }); </script> </body> </html> 运行成功后,“Hello from Dojo!”会自动往右下方法偏移。
hello world程序简单介绍
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |