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...
  • pyluyuan
  • pyluyuan
  • 2016年11月11日 11:24
  • 347

Dojo开发之布局容器和堆叠容器使用

本篇博客我们来学习一下Dojo开发中常用到的布局容器BorderContainer和堆叠容器的使用。      1、BorderContainer      它是一个布局容器,主要分为5个区域,上下左...
  • taomanman
  • taomanman
  • 2015年12月15日 21:47
  • 3417

dijit/Tree 部件美化

说到美化,无非就是图标、样式等等方面的内容,下面就将就如何替换dijit/Tree部件中的图标: 1.准备样式: .organ_icon {background: url("../images/w...
  • Burongwawa520
  • Burongwawa520
  • 2016年03月07日 17:35
  • 799

Dojo 输入数值 dijit.form.NumberSpinner

输入整数,可以设定最大值与最小值。 但是不知道如何判定是否合法。
  • lmn13
  • lmn13
  • 2010年06月07日 19:51
  • 1041

dojo小例子(35)带校验功能SimpleTextarea

//////////////////////// // 带校验功能的SimpleTextarea /////////////////////// define(["dojo/_base/declare...
  • earthhour
  • earthhour
  • 2015年09月05日 10:25
  • 592

dojo布局BorderContainer

dojo布局BorderContainer
  • qingqingzijinxin
  • qingqingzijinxin
  • 2016年07月19日 20:37
  • 1250

dijit.form.NumberTextBox常用操作

只能输入任意长度整数
  • earthhour
  • earthhour
  • 2014年05月05日 13:22
  • 1376

dijit控件入门(一)

dijit是dojo的一套UI控件,可以显示一些控件,下面是form简单的控件入门   dijit ui @import "../dojo/dojo/resourc...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:06
  • 524

dijit控件(三)

slider Dialog Widget Dojo Tests dojo.require("dijit.dijit"); // optimize: ...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:08
  • 318

dijit控件入门(三)

checkbox_radio dojo.require("dijit.form.CheckBox"); dojo.require("dijit.form.Radio...
  • hbiao68
  • hbiao68
  • 2013年12月04日 10:07
  • 268
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:dijit控件布局
举报原因:
原因补充:

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