Dojo簡單應用

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

相關文章
相關標籤/搜索