dojo1.9学习总结(一)-layout

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	// 获得项目完全路径（假设你的项目叫MyApp，那么获得到的地址就是 http://localhost:8080/MyApp/）:    
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dijit/themes/soria/soria.css">
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
	href="<%=basePath%>dojo/dojox/grid/resources/soriaGrid.css" />
<style type="text/css">
body,html {
	font-family: helvetica,arial,sans-serif;
	font-size: 90%;
}

th {
	font-size: 13px;
	font-family: Arial,Microsoft YaHei,SimSun,sans-serif !important;
	text-align: center;
}

td {
	font-size: 13px;
	font-family: Arial,sans-serif !important;
}

div #copyright {
	text-align: center
}
</style>
</head>
<script type="text/javascript" src="<%=basePath%>dojo/dojo/dojo.js"
	djConfig="parSEOnLoad:true">
	
</script>
<script type="text/javascript">
	dojo.require("dijit.layout.ContentPane");
	dojo.require("dijit.layout.BorderContainer");
	dojo.require("dijit.layout.AccordionContainer");
	dojo.require("dijit.layout.TabContainer");
	dojo.require("dojo.parser");
</script>
<body class="soria">
	<div dojoType="dijit.layout.BorderContainer" design="sidebar"
		gutters="true" liveSplitters="true" id="borderContainer"
		style="width: 100%; height: 100%;">
		<div dojoType="dijit.layout.AccordionContainer"
			data-dojo-props="minSize:20,region:'left',splitter:true">
			<div dojoType="dijit.layout.AccordionPane" title="first menu">first
				menu</div>
			<div dojoType="dijit.layout.AccordionPane" title="second menu">second
				menu</div>
			<div dojoType="dijit.layout.AccordionPane" title="third menu"
				selected="true">third menu</div>
			<div dojoType="dijit.layout.AccordionPane" title="fourth menu">fourth
				menu</div>
			<div dojoType="dijit.layout.AccordionPane" title="fifth menu">fifth
				menu</div>
		</div>

		<div dojoType="dijit.layout.ContentPane" splitter="true"
			region="right" style="width: 100px;">Right Region</div>
	    <div dojoType="dijit.layout.TabContainer" data-dojo-props="region:'center',tabStrip:true">
	        <div dojoType="dijit.layout.ContentPane" title="first tab"></div>
	        <div dojoType="dijit.layout.ContentPane" title="second tab" selected="true">second tab</div>
	        <div dojoType="dijit.layout.ContentPane" title="third tab" closable="true"></div>
	    </div>
		<div dojoType="dijit.layout.ContentPane" splitter="true"
			liveSplitters="true" region="top">浙江大学软件学院</div>
		<div dojoType="dijit.layout.ContentPane" splitter="true"
			region="bottom">
			<div id="copyright">Copyright by Jason Wang 2014.4.13</div>
		</div>
	</div>
</body>
</html>
利用dojo很容易做出框架效果：
dojo1.9学习总结(一)-layout

猜你在找的Dojo相关文章
