dijit控件布局

原创 2013年12月04日 10:07:01

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>

 

相关文章推荐

DOJO Dijit布局

Layout with Dijit Dijit布局 Creating dynamic and interactive layouts is a challenge common to any gra...

Dojo1.11官方教程文档翻译(5.6)Dijit布局

创建动态和交互式的布局是所有图形用户界面的共同挑战。通过HTML和CSS我们已经拥有了创建布局的许多能力。在CSS之外,Dojo挑选了一系列可扩展的widget作为Dijit的一部分——Dojo的UI...

android布局控件总结

  • 2015年11月26日 09:31
  • 18KB
  • 下载

EALayout 第一节 控件基本布局

EALayout iOS开发实时界面预览 https://github.com/easycodingTop/EALayoutLiteForOC QQ群:454686295 ========...

android控件布局常用属性

  • 2013年10月15日 14:30
  • 25KB
  • 下载

Android控件及布局的使用

  • 2012年09月24日 22:24
  • 385KB
  • 下载

Android 控件布局常用属性

android:id —— 为控件指定相应的ID android:text —— 指定控件当中显示的文字,需要注意的是,这里尽量使用strings.xml文件当中的字符串 android:griv...

Android控件布局属性全解

  • 2015年10月25日 11:30
  • 25KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dijit控件布局
举报原因:
原因补充:

(最多只允许输入30个字)