1、在上次搭建的环境下,新建一个“tabs_form.jsp”页面。

2、在页面中编写如下代码:

 

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
  2. <%  
  3.     String path = request.getContextPath();  
  4.     String basePath = request.getScheme() + "://"  
  5.             + request.getServerName() + ":" + request.getServerPort()  
  6.             + path + "/";  
  7. %> 
  8.  
  9. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
  10. <html> 
  11.     <head> 
  12.         <base href="<%=basePath%>"> 
  13.  
  14.         <title>Dojo--tabs_form</title> 
  15.  
  16.         <meta http-equiv="pragma" content="no-cache"> 
  17.         <meta http-equiv="cache-control" content="no-cache"> 
  18.         <meta http-equiv="expires" content="0"> 
  19.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
  20.         <meta http-equiv="description" content="This is my page"> 
  21.         <link rel="stylesheet" type="text/css" 
  22.             href="scripts/dojo-release-1.8.1/dijit/themes/tundra/tundra.css"> 
  23.         <link rel="stylesheet" type="text/css" 
  24.             href="scripts/dojo-release-1.8.1/dojo/resources/dojo.css"> 
  25.         <!-- 引入dojo.js --> 
  26.         <script type="text/javascript" 
  27.             src="scripts/dojo-release-1.8.1/dojo/dojo.js" 
  28.             djConfig="parseOnLoad:true, isDebug: true"></script> 
  29.         <script type="text/javascript"> 
  30.             dojo.require("dojo.parser");  
  31.             dojo.require("dijit.layout.ContentPane");  
  32.             dojo.require("dijit.layout.TabContainer");  
  33.         </script> 
  34.     </head> 
  35.  
  36.     <body class="tundra"> 
  37.         <div dojoType="dijit.layout.TabContainer" style="width: 600px;height:300px;"> 
  38.             <div dojoType="dijit.layout.ContentPane" title="个人信息"> 
  39.                 <label for="name"> 
  40.                     姓  名:  
  41.                 </label> 
  42.                 <input type="text" name="name" id="name" size="30" /> 
  43.                 <br> 
  44.                 <label for="age"> 
  45.                     年  龄:  
  46.                 </label> 
  47.                 <input type="text" name="age" id="age" size="30" /> 
  48.                 <br> 
  49.                 <label for="sex"> 
  50.                     性  别:  
  51.                 </label> 
  52.                 <input type="text" name="sex" id="sex" size="30" /> 
  53.                 <br> 
  54.                 <label for="email"> 
  55.                     电子邮件:  
  56.                 </label> 
  57.                 <input type="text" name="email" id="email" size="30" /> 
  58.                 <br> 
  59.             </div> 
  60.             <div dojoType="dijit.layout.ContentPane" title="地址信息"> 
  61.                 <label for="country"> 
  62.                     国  家:  
  63.                 </label> 
  64.                 <input type="text" name="country" id="country" size="30" /> 
  65.                 <br> 
  66.                 <label for="province"> 
  67.                     所属省份:  
  68.                 </label> 
  69.                 <input type="text" name="province" id="province" size="30" /> 
  70.                 <br> 
  71.                 <label for="city"> 
  72.                     所属城市:  
  73.                 </label> 
  74.                 <input type="text" name="city" id="city" size="30" /> 
  75.                 <br> 
  76.             </div> 
  77.         </div> 
  78.     </body> 
  79. </html> 

3、启动tomcat服务器,打开“http://localhost:8080/dojo_test/tabs_form.jsp”即可访问到如下所示的页面:

 

使用Dojo创建标签页_dojo