使用Dojo创建标签页

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

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

 
 
  
  <%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
  
  <% 
  
  Stringpath=request.getcontextpath(); 
  
  StringbasePath=request.getScheme()+"://" 
  
  +request.getServerName()+":"+request.getServerPort() 
  
  +path+"/"; 
  
  %>
  
  
  
  <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
  
  <html>
  
  <head>
  
  <basehref="<%=basePath%>">
  
  
  
  <title>Dojo--tabs_form</title>
  
  
  
  <Metahttp-equiv="pragma"content="no-cache">
  
  <Metahttp-equiv="cache-control"content="no-cache">
  
  <Metahttp-equiv="expires"content="0">
  
  <Metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
  
  <Metahttp-equiv="description"content="Thisismypage">
  
  <linkrel="stylesheet"type="text/css"
  
  href="scripts/dojo-release-1.8.1/dijit/themes/tundra/tundra.css">
  
  <linkrel="stylesheet"type="text/css"
  
  href="scripts/dojo-release-1.8.1/dojo/resources/dojo.css">
  
  <!--引入dojo.js-->
  
  <scripttype="text/javascript"
  
  src="scripts/dojo-release-1.8.1/dojo/dojo.js"
  
  djCon@R_404_6408@="parSEOnLoad:true,isDebug:true"></script>
  
  <scripttype="text/javascript">
  
  dojo.require("dojo.parser"); 
  
  dojo.require("dijit.layout.ContentPane"); 
  
  dojo.require("dijit.layout.TabContainer"); 
  
  </script>
  
  </head>
  
  
  
  <bodyclass="tundra">
  
  <divdojoType="dijit.layout.TabContainer"style="width:600px;height:300px;">
  
  <divdojoType="dijit.layout.ContentPane"title="个人信息">
  
  <labelfor="name">
  
  姓　　名: 
  
  </label>
  
  <inputtype="text"name="name"id="name"size="30"/>
  
  <br>
  
  <labelfor="age">
  
  年　　龄: 
  
  </label>
  
  <inputtype="text"name="age"id="age"size="30"/>
  
  <br>
  
  <labelfor="sex">
  
  性　　别: 
  
  </label>
  
  <inputtype="text"name="sex"id="sex"size="30"/>
  
  <br>
  
  <labelfor="email">
  
  电子邮件: 
  
  </label>
  
  <inputtype="text"name="email"id="email"size="30"/>
  
  <br>
  
  </div>
  
  <divdojoType="dijit.layout.ContentPane"title="地址信息">
  
  <labelfor="country">
  
  国　　家: 
  
  </label>
  
  <inputtype="text"name="country"id="country"size="30"/>
  
  <br>
  
  <labelfor="province">
  
  所属省份: 
  
  </label>
  
  <inputtype="text"name="province"id="province"size="30"/>
  
  <br>
  
  <labelfor="city">
  
  所属城市: 
  
  </label>
  
  <inputtype="text"name="city"id="city"size="30"/>
  
  <br>
  
  </div>
  
  </div>
  
  </body>
  
  </html>

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

使用Dojo创建标签页

相关推荐