DOJO学习笔记:简单小例子(一)



 学习新技术最好的方式之一就是给出一个简单的例子,本节使用dojo widget做一个简单的WEB界面。实例效果:

 

DOJO学习笔记:简单小例子(一)

 

 

 

<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>DOJO Widget</title>

<link rel="stylesheet" type="text/css" href="dojo-release-1.6.1/dijit/themes/tundra/tundra.css" >

<link rel="stylesheet" type="text/css" href="dojo-release-1.6.1/dojo/resources/dojo.css" >

 

<style type="text/css">

         @import "dojo-release-1.6.1/dijit/themes/tundra/tundra.css";

         @import "dojo-release-1.6.1/dojo/resources/dojo.css";

</style>

 

<script type="text/javascript" src="dojo-release-1.6.1/dojo/dojo.js"

         charset="utf-8" djConfig="parseOnLoad: true,isDebug: true">

</script>

 

<script language="JavaScript">

         dojo.require("dojo.parser");

         dojo.require("dijit.form.Button");

         dojo.require("dijit.form.ToggleButton");

         dojo.require("dijit.form.DropDownButton");

         dojo.require("dijit.Menu");

         dojo.require("dijit.form.DateTextBox");

         dojo.require("dijit.layout.TabContainer");

         dojo.require("dijit.layout.ContentPane");

</script>

</head>

<body class="tundra">

 

<button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave" type=submit>

保存

</button>

 

<button dojoType="dijit.form.ToggleButton" iconClass="dijitCheckBoxIcon">

保存

</button>

 

<div dojoType="dijit.form.ComboButton">

         <span>保存</span>

         <div dojoType="dijit.Menu" id="saveMenu1">

                   <div dojoType="dijit.MenuItem" iconClass="dijitEditorIcon dijitEditorIconSave">

                            保存

                   </div>

                   <div dojoType="dijit.MenuItem">另存为...</div>

         </div>

</div>

 

<input id="date1" name="date1" dojoType="dijit.form.DateTextBox" type="text"/>

 

<div dojoType="dijit.layout.TabContainer" style="width:300px;height:200px">

         <div dojoType="dijit.layout.ContentPane" title="Tab1">

                   tab1

         </div>

         <div dojoType="dijit.layout.ContentPane" title="Tab2">

                   tab2

         </div>

</div>

 

</body>

</html>

 

你可能感兴趣的:(dojo)