1、在上次搭建的环境下,新建一个“tabs_form.jsp”页面。
2、在页面中编写如下代码:
- <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme() + "://"
- + request.getServerName() + ":" + request.getServerPort()
- + path + "/";
- %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>Dojo--tabs_form</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <link rel="stylesheet" type="text/css"
- href="scripts/dojo-release-1.8.1/dijit/themes/tundra/tundra.css">
- <link rel="stylesheet" type="text/css"
- href="scripts/dojo-release-1.8.1/dojo/resources/dojo.css">
- <!-- 引入dojo.js -->
- <script type="text/javascript"
- src="scripts/dojo-release-1.8.1/dojo/dojo.js"
- djConfig="parseOnLoad:true, isDebug: true"></script>
- <script type="text/javascript">
- dojo.require("dojo.parser");
- dojo.require("dijit.layout.ContentPane");
- dojo.require("dijit.layout.TabContainer");
- </script>
- </head>
- <body class="tundra">
- <div dojoType="dijit.layout.TabContainer" style="width: 600px;height:300px;">
- <div dojoType="dijit.layout.ContentPane" title="个人信息">
- <label for="name">
- 姓 名:
- </label>
- <input type="text" name="name" id="name" size="30" />
- <br>
- <label for="age">
- 年 龄:
- </label>
- <input type="text" name="age" id="age" size="30" />
- <br>
- <label for="sex">
- 性 别:
- </label>
- <input type="text" name="sex" id="sex" size="30" />
- <br>
- <label for="email">
- 电子邮件:
- </label>
- <input type="text" name="email" id="email" size="30" />
- <br>
- </div>
- <div dojoType="dijit.layout.ContentPane" title="地址信息">
- <label for="country">
- 国 家:
- </label>
- <input type="text" name="country" id="country" size="30" />
- <br>
- <label for="province">
- 所属省份:
- </label>
- <input type="text" name="province" id="province" size="30" />
- <br>
- <label for="city">
- 所属城市:
- </label>
- <input type="text" name="city" id="city" size="30" />
- <br>
- </div>
- </div>
- </body>
- </html>
3、启动tomcat服务器,打开“http://localhost:8080/dojo_test/tabs_form.jsp”即可访问到如下所示的页面: