关闭

dijit控件布局

167人阅读 评论(0) 收藏 举报

tab标签布局

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="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>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<link id="themeStyles" rel="stylesheet" href="../dojo/resources/dojo.css">
<link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/Grid.css">
<link id="themeStyles" rel="stylesheet" href="../dojo/dojox/grid/resources/tundraGrid.css">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">

dojo.require('doh.runner');
dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.TabContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dojo.parser");	// scan page for widgets and instantiate them


</script>
</head>
<body class="claro">

<div id="leftTabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;",  tabPosition:"left-h"'>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>
		Left tabs
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>
		Lorem ipsum and all around - second...
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>
		Lorem ipsum and all around - last...
	</div>
</div>
<br>
<div id="top" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;",  tabPosition:"top"'>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>
		Left tabs
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>
		Lorem ipsum and all around - second...
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>
		Lorem ipsum and all around - last...
	</div>
</div>
<br>
<div id="bottom" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;",  tabPosition:"bottom"'>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>
		Left tabs
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>
		Lorem ipsum and all around - second...
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>
		Lorem ipsum and all around - last...
	</div>
</div>
<br>
<div id="rightTabs" data-dojo-type="dijit.layout.TabContainer" data-dojo-props='style:"width: 500px; height: 200px;",  tabPosition:"right-h"'>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My first tab", selected:true'>
		Left tabs
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My second tab", closable:true'>
		Lorem ipsum and all around - second...
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='title:"My last tab"'>
		Lorem ipsum and all around - last...
	</div>
</div>
	
</body>
</html>

 

dijit.form.BorderContainer布局

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="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>Insert title here</title>
<link id="themeStyles" rel="stylesheet" href="../dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src="../dojo/dojo/dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">

dojo.require("dijit.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.form.FilteringSelect");


</script>
</head>
<body class="claro">
<!-- width可以设置100%,但是高度是不允许的,就是数字后面必须要带单位px -->
<div id="border1" data-dojo-type="dijit.layout.BorderContainer"
	data-dojo-props='style:"width: 100%; height: 728px; border: 2px solid blue;"'>
	<div role="banner" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-top", region:"top", style:"background-color: #b39b86; border: 15px black solid; height: 50px;", splitter:true'>
		top bar (resizable)
	</div>
	<div role="navigation" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-left", region:"left", style:"background-color: #acb386; border: 10px green solid; width: 100px;",
	splitter:true, minSize:150, maxSize:250'>
		left (resizable b/w 150 &rarr; 250)
	</div>
	<div role="main" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-center", region:"center", style:"background-color: #f5ffbf; padding: 30px;"'>
		main panel with <a href="http://www.dojotoolkit.org/">a link</a>.<br />
		(to check we're copying children around properly).<br />
		<select data-dojo-type="dijit.form.FilteringSelect">
			<option value="1">foo</option>
			<option value="2">bar</option>
			<option value="3">baz</option>
		</select>
		Here's some text that comes AFTER the combo box.
	</div>
	<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-right", region:"right", style:"background-color: #acb386; width: 100px;"'>
		right (fixed size)
	</div>
	<div role="contentinfo" data-dojo-type="dijit.layout.ContentPane" data-dojo-props='id:"border1-bottom", region:"bottom", style:"background-color: #b39b86; height: 50px;", splitter:true'>
		bottom bar (resizable)
	</div>
</div>
	
</body>
</html>

 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:313426次
    • 积分:8748
    • 等级:
    • 排名:第2257名
    • 原创:1096篇
    • 转载:14篇
    • 译文:0篇
    • 评论:5条
    最新评论