手把手教你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

手把手教你Dojo入门

时间: 2024-12-15 17:24:39

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

jenkins手把手教你从入门到放弃03-安装Jenkins时web界面出现该jenkins实例似乎已离线

简介 很久没有安装jenkins了,因为之前用的的服务器一直正常使用,令人郁闷的是,之前用jenkins一直没出过这个问题. 令人更郁闷的是,我尝试了好多个历史版本和最新版本,甚至从之前的服务器把jenkins在跑的程序打包copy这个服务器.终究还是不行. 启动时候,提示:该jenkins实例似乎已离线 可以说是非常坑!!!!!!!!!!!!!!!!!!!!!!!!!!!! 虽然可以离线安装,但是对于博主来说不解决怎么行呢?经过一番踩坑与资料查找终于解决了,这里与大家分享一下: 问题如图下所示

【手把手教你Eclipse插件开发】之插件入门

最近由于特殊需要,开始学习插件开发. 以前接触java也算有些时日,但是一直不知道有插件开发这样一种技术路径,本想着这开发工具都给你备好了,直接用不就行了.但是总有些IT工厂,为了要节约成本,开发自己的开发工具,但是又要节省时间,总不能一切都自己来.毕竟开发一个eclipse也要很长时间的.因此,插件开发出现在历史舞台. 首先要了解插件开发,就得从SWT/JFACE说起了.SWT是一种开源的界面开发框架,以前学java的时候,总是用一些panel,就类似这个.JFace又是一种基于SWT的UI不

[swift实战入门]手把手教你编写2048(三)

上篇地址:swift实战入门之手把手教你编写2048(二) github地址:https://github.com/scarlettbai/2048.git. 今天给大家带来2048最后一篇,之前已经实现了向游戏区域中随机插入数字块,接下来要做的,就是当我们滑动屏幕时移动及合并数字块以及插入一个新的数字块.本篇的难点就是移动时的算法问题,首先来给大家讲一下算法. 2048的算法实现其实很简单,假如我们当前数字格的格式如下: | |4| | | | | |4| | |2| |2|2| |2| |

[swift实战入门]手把手教你编写2048(二)

上篇地址:swift实战入门之手把手教你编写2048(一) github地址:https://github.com/scarlettbai/2048.git. 上篇文章已经中已经把2048的游戏区块画好了,这篇来加入计分板以及往游戏面板中插入数字块 计分板同样作为一个view,我们新建一个ScoreView.swift文件,代码如下: import UIKit //这里协议的作用是方便别的类中调用计分板的scoreChanged方法 protocol ScoreProtocol{ func sc

手把手教你jmeter压测--适合入门

[后台测试]手把手教你jmeter压测 我知道我迟早是要踏上了后台测试之路的,只是没想到来的这么突然.新接手了一个项目,在第一版发出后,产品需要做运营活动拉量,因为我担心突然的流量涌入是否会对后台造成压力呢?因此决定做一下压测: 下面就一步一步的介绍我从0到1的压测过程吧. 我下载的是 apache-jmeter-2.13,因为这个包下载下来通用linux和windows的,所以我们现在windows下打开它. 直接点击bat,打开jmeter: 添加一个线程组: 添加完成之后,先设置这两项:

手把手教你玩转SOCKET模型之重叠I/O篇(上)

“身为一个初学者,时常能体味到初学者入门的艰辛,所以总是想抽空作点什么来尽我所能的帮助那些需要帮助的人.我也希望大家能把自己的所学和他人一起分享,不要去鄙视别人索取时的贪婪,因为最应该被鄙视的是不肯付出时的吝啬.” ----- 题记  By PiggyXP(小猪) 前   言   其实我首先应该道歉,因为7月份的时候曾信誓旦旦的说要写一套关于SOCKET所有模型的入门文章以及配套代码,不过没想到后天竟然被美女所迷出去度假了,刚刚回来不久......-_-b其实那些模型的配套代码我已经基本写完了,

手把手教你写电商爬虫-第五课 京东商品评论爬虫 一起来对付反爬虫

系列教程: 手把手教你写电商爬虫-第一课 找个软柿子捏捏 手把手教你写电商爬虫-第二课 实战尚妆网分页商品采集爬虫 手把手教你写电商爬虫-第三课 实战尚妆网AJAX请求处理和内容提取 手把手教你写电商爬虫-第四课 淘宝网商品爬虫自动JS渲染 四节课过去了,咱们在爬虫界也都算见过世面的人,现在再来一些什么ajax加载之类的小鱼小虾应该不在话下了,即使是淘宝这种大量的ajax,我们 祭上我们的核武器,也轻松应对了,这一课主要是来看看除了技术上的页面处理外,我们还会遇上更棘手的问题,就是反爬虫,当然现

手把手教你打造一个Material Design风格的App(一)

你应该听说过Android的Material Design,它是在Android 5.0(Lollipop)版本引入的.在Material Design中还引入了很多新东西,比如Material Theme,新的小部件,自定义的阴影,矢量图片及自定义动画等.如果你之前没有用过Material Design,那么本文将是一个很好的入门教程. 在这篇教程中,我们将会学习Material Design开发的基本步骤,即编写自定义的主题以及使用RecyclerView来实现抽屉导航. 通过下面的两个链接

手把手教你搭建PHP开发“黄金自由新搭档”

引言:随着PHP广泛应用白热化,大家使用的开发工具从重量级的ZendStudio到轻量级的Notepad++可以说是五花八门.应有尽有,这给初学者带来不少困惑,工具太多了就无从下手选择适合自己需要的东东.笔者亲自测试和比较,选择适合大多数开发人员追求既"自由.快捷.简便"又满足功能强大的实际需要,从自定义PHP运行环境配置文件着手搭建PHP开发平台,并给出详细的操作步骤.手把手教你用网络风暴WebStorm+集成开发工具PhpStorm+自定义运行环境phpRE搭建PHP开发"