手把手教你Dojo入门

如果仅仅是为了练习Dojo,或者进行测试,可以参考下面的步骤。下面的文件均是在Windows下测试

需要的工具

1 Tomcat服务器:下载地址 选择适合自己的机器型号,即可

2 Dojo的工具包:下载地址  由于dojo toolkit没有测试页面,所以推荐下载下面的那个SDK的

3 浏览器 博主使用的是chrome

接下来就可以配置文件了。

首先是Tomcat

  Tomcat,直接解压缩就可以了。

  bin文件夹下面有个startup.bat,双击就可以运行。双击shutdown.bat停止服务器。

  运行服务器后,我们输入网址http://localhost:8080 看到下面的页面,表示服务器启动成功。

  这个默认的页面,其实是E:\tomcat\apache-tomcat-7.0.54\webapps\ROOT目录下的index.jsp,记住这个地址,后面要用到。

dojo工具包

  解压缩后,修改文件夹名称dojoroot,放到ROOT目录下。输入下面的网址

  http://localhost:8080/dojoroot/dijit/themes/themeTester.html

  看到下面的页面表示成功。

这样表示dojo可以使用了!

自己的测试用例

我们自己写一个测试页面,创建页面test.html,放在ROOT文件夹下:

<html>
    <head>
        <script type="text/javascript" src="./dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">
        </script>
        <style type="text/css">
            @import "./dojoroot/dijit/themes/tundra/tundra.css";
            @import "./dojoroot/dojo/resources/dojo.css";
        </style>

        <script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.layout.TabContainer");</script>
        <style>
            .formContainer{
                width:600px;
                height:600px;
            }
            label{
                width:150px;
                float:left;
            }
        </style>
    </head>
    <body class="tundra">
        <div class="formContainer" dojoType="dijit.layout.TabContainer">
            <div dojoType="dijit.layout.ContentPane" title="Personal">
                123
            </div>
            <div dojoType="dijit.layout.ContentPane" title="Address">
                321
            </div>
            <div dojoType="dijit.layout.ContentPane" title="phone">
                456
            </div>
        </div>
    </body>
</html>

  从工具包中,引入js或者css,注意路径的问题。如果要使用绝对路径,就要写全路径名。比如本文中dojoroot放在ROOT下面,页面test.html也在ROOT中,因此相对路径位:"./dojoroot/dojo/dojo.js" 绝对路径位:"http://localhost:8080/dojoroot/dojo/dojo.js"(即相对于服务器web根目录而言)

  引入dojo.js

<script type="text/javascript" src="./dojoroot/dojo/dojo.js" djConfig="parseOnLoad:true">
        </script>

  引入特定的css

<style type="text/css">
            @import "./dojoroot/dijit/themes/tundra/tundra.css";
            @import "./dojoroot/dojo/resources/dojo.css";
        </style>

   动态加载特定的js

<script type="text/javascript">
            dojo.require("dojo.parser");
            dojo.require("dijit.layout.ContentPane");
            dojo.require("dijit.layout.TabContainer");</script>

  在<body>里面,加载dojo特有的风格

<body class="tundra">

  最后,我们使用几个div,制作一个选项卡

<div class="formContainer" dojoType="dijit.layout.TabContainer">
            <div dojoType="dijit.layout.ContentPane" title="Personal">
                123
            </div>
            <div dojoType="dijit.layout.ContentPane" title="Address">
                321
            </div>
            <div dojoType="dijit.layout.ContentPane" title="phone">
                456
            </div>
        </div>

  运行页面

  http://localhost:8080/test.html就可以看到如下的页面了。

本文转自博客园xingoo的博客,原文链接:手把手教你Dojo入门,如需转载请自行联系原博主。

时间: 2024-09-25 00:46:44

手把手教你Dojo入门的相关文章

手把手教你学习Flash视频教程

教程|视频教程 手把手教你学Dreamweaver MX 2004视频教程 Flash MX 2004实例视频教程 手把手教你学3D MAX 7.0中文版视频教程 手把手教你学Photoshop视频教程 手把手教你学Photoshop实例视频教程 金鹰电脑教程网:Flash MX 操作大全 [视频教程] 与单纯的图文教程相比,生动活泼的视频多媒体教程更容易吸引大家的注意,让学习过程更加轻松有趣. 这里推出的是金鹰工作室制作组精心制作的一系列从入门基础到高级应用的Flash制作的视频多媒体教程,和

手把手教你安装Android x86

话说最近操作系统这个话题的确是非常火爆.也许是借助于Windows 8消费者预览版的光芒,凡是与系统搭边的东西大家好像都喜欢与Windows 8进行比较.不管结果如何,笔者相信软件不同于硬件,只有适合自己的软件才是最重要的. 当然介于现在可以使用的系统众多,其中Android x86版也是大家关注的焦点.许多人都希望能够尝试一下不同于Windows的体验以及感受.但是也许是受限于个人能力,许多入门玩家更多地是选择驻足观看而不是亲身体验.这其中很大一部分原因要归结为这些玩家不了解不同系统的安装方法

PS手把手教你绘制超逼真的湖面冰层

  Step 1 按照透视定义水的区域. Step 2 新建图层,使用矩形选框工具(M)选择水的区域,使用任意颜色填充. Step 3 使用图层蒙版或橡皮擦工具露出砖柱部分.我们将使用这一图层作为剪贴图层. Step 4 复制(CTRL+J)背景图层,并将其剪贴至上一图层(CTRL+ALT+G).使用滤镜>模糊>高斯模糊--这能创建冰层厚度效果. Step 5 冰会有反射效果,背景的反射效果很容易,我们要花费更多工夫在砖柱的反射上.反射需要符合透视效果!使用钢笔工具(P)选择前面的砖柱,将路径

【云计算的1024种玩法】手把手教你如何编译升级 OpenResty

前言 在前面的 [云计算的1024种玩法]手把手教你如何编译一个高性能 OpenResty 已经介绍过如何安装 OpenResty 了,不过类似上面安装的教程那么多,但是升级的教程就不太多了.[云计算的1024种玩法]作为一个对你和对你的网站负责的系列教程,搞坏了你的服务器,就要搞好它- 在云栖大会的 Tech Insight 场上,云安全的专家的思路就是安全这种东西做好主动性强的预防就可以避免别动的对攻击进行防御,所以更新安全补丁升级软件的重要性是不言而喻的. 准备 准备 云翼计划 学生用户可

【云计算的1024种玩法】手把手教你如何编译一个高性能 OpenResty

介绍 本教程将介绍如何一步一步手动编译 OpenResty,OpenResty 是一个基于 Nginx 与 Lua 的高性能 Web 平台,拥有非常好的拓展性让服务器发挥更好性能.教程中将全部依赖 Linux 发行版组建中的依赖,而免除编译带来的后期维护成本. OpenResty 的额外拓展: OpenSSL 1.1.0,提供 ALPN 支持,支持 HTTP/2 Nginx-CT,透明证书提高 HTTPS 网站的安全性和浏览器支持 ngx_PageSpeed,Google 家的网站性能优化工具

手把手教你搭建SpringMVC——最小化配置

为什么需要Spring MVC 最开始接触网页的时候,是纯的html/css页面,那个时候还是用Dreamweaver来绘制页面. 随着网站开发的深入,开始学习servlet开发,记得最痛苦的就是servlet返回网页的内容是字符串拼接的html页面,整不好就无法显示.... 再到后来开学学习SSH,庞大的架构眼花缭乱.Struts繁杂的标签.hibernate搞不清楚的数据表,Spring不知道哪里搞错的bean. 最后随着发展,前端开始占有一席之地,nodejs风生水起,很多业务逻辑开始前置

手把手教您制作一个完整网站(内附教程)

手把手教您制作一个完整网站(内附教程) 1.搞个简单的策划先. 至少应该有一个大概的方向吧,先确定网站的类型,是地区门户.行业门户,还是下载.电影.论坛等等.然后基本确定网站的名称. 2.找一个合适的域名. 域名注册.com(国际域名)和.cn(国内域名)为宜,域名最好不要太长.且有一定的意义.容易记,现在好的域名已经不多了,你可灵活的使用数字.英文单词.拼音等的组合,在域名的前.后加上i.e.51.ok.hao.88.163等,可以灵活的组合出许多好的域名.域名注册信息查询 http://ww

Hello dojo入门

经过了解几种Ajax框架,最后选择了Dojo框架.因为Ext不稳定,GWT觉得太浪费时间. 一:下载Dojo,地址是:http://dojotoolkit.org/downloads 二:做开发,当然要工具库的 API 帮助文档,就在下载地址的其它菜单中. 三:入门程序 Hello Dojo .一个简单的入门,可以增加兴趣与信心,同时,对 Dojo 有了简单的了解. 在 MyEclipse 中新建工程 ToDojo : 在 WebRoot 中新建一个文件夹 dojoroot ,把 Dojo 相关

手把手教你实现、部署和调用Web Service

手把手教你实现.部署和调用Web Service