手把手教你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就可以看到如下的页面了。

转载注明:http://i.cnblogs.com/EditPosts.aspx?postid=3810785

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏云原生架构实践

Docker Data Center系列(三)- DTR安装指南

安装过程中DTR节点需要能下载docker官网的资源,如果不能访问,可通过其它机器下载软件包,然后执行离线安装。

33560
来自专栏实战docker

docker私有仓库搭建与使用实战

hub.docker.com上可以保存镜像,但是网速相对较慢,在内部环境中搭建一个私有的公共仓库是个更好的方案,今天我们就来实战搭建私有docker仓库吧; 环...

67560
来自专栏编程坑太多

『中级篇』docker之CI/CD持续集成-项目生成镜像(76)

解决方法:在”/etc/docker/“目录下,创建”daemon.json“文件。在文件中写入

21190
来自专栏holer

如何从公网访问内网Sysbase数据库

本地安装了Sysbase数据库,只能在局域网内访问,怎样从公网也能访问本地Sysbase数据库?

9510
来自专栏实战docker

Docker搭建disconf环境,三部曲之二:本地快速构建disconf镜像

在上一篇文章《Docker搭建disconf环境,三部曲之一:极速搭建disconf》中,我们用最快的速度在本地运行了disconf环境,对disconf有了初...

22350
来自专栏Rainbond开源「容器云平台」

敲黑板 | 云帮平台maven仓库对接自有仓库

15360
来自专栏魏艾斯博客www.vpsss.net

Windows2003 安装 IIS 不支持 ASP 解决办法

24620
来自专栏nice_每一天

docker学习笔记(一)—— ubuntu16.04下安装docker

本文开发环境为Ubuntu 16.04 LTS 64位系统,通过apt的docker官方源安装最新的Docker CE(Community Edition),即...

12430
来自专栏运维小白

linux基础(day19)

6.1 压缩打包介绍 家用带宽和机房带宽的区别: 家用的IP是动态的、不固定的,而机房的IP却是固定不变的 家用的上传和下载带宽也是不同的;而在机房中的带宽,下...

21080
来自专栏编程坑太多

『高级篇』docker之kubernetes基础集群命令小实战(35)

9220

扫码关注云+社区

领取腾讯云代金券