summaryrefslogtreecommitdiff
path: root/includes/js/dojox/layout/tests/test_ExpandoPane_code.html
blob: 2b71fcc7a249b618c87ece1767ce7986456e0a2b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojox.layout.ExpandoPane</title>
	<link rel="stylesheet" href="_expando.css" />	
	<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
	<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
	<script type="text/javascript">
		dojo.require("dijit.form.Button");
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.BorderContainer");
		
		var _clearPane = function(){
			var ch = dijit.byId("bc").getChildren();
			dojo.forEach(["pane0","pane1","pane2","pane3"],function(p){

				dojo.byId("hidden").appendChild(dojo.byId(p));
				var dij = dijit.getEnclosingWidget(p.parentNode);
				if(dij){
					console.log(dij);
					dijit.byId("bc").removeChild(dij);
					dij.destroy();
				}

			});
		};

	</script>
	<style type="text/css">
		#hidden {
			position:absolute;
			top:-999px;
			left:-999px;
			overflow:hidden;
			width:500px;
			height:500px;
			visibility:hidden;
		}
		#pane0, #pane1, #pane2, #pane3 {
			width:100%;
			height:100%;
		}
		#pane1 { background:red; }
		#pane2 { background:green; }
		#pane3 { background:blue; }
		#pane0 { background:yellow; }
	</style>
</head>
<body>
		<div id="bc" style="width:100%; height:100%;" dojoType="dijit.layout.BorderContainer">
			<div region="center" style="height:65px; border-bottom:1px solid #666">
				<button dojoType="dijit.form.Button">
					Set 3-pane
					<script type="dojo/method" event="onClick">
						_clearPane();
						var bc = dijit.byId("bc");
						
						var cp = new dijit.layout.ContentPane({
							region:"left",
							style:"width:125px; height:100%",
							splitter:true
						});
						cp.domNode.appendChild(dojo.byId("pane1"));
						cp.startup();
						bc.addChild(cp);
						
						var cp2 = new dijit.layout.ContentPane({
							region:"right",
							style:"width:125px; height:100%",
							splitter:true
						});
						cp2.domNode.appendChild(dojo.byId("pane2"));
						cp2.startup();
						bc.addChild(cp2);
						
						var cp3 = new dijit.layout.ContentPane({
							region:"center"
							
						});
						cp3.domNode.appendChild(dojo.byId("pane0"));
						cp3.startup();
						bc.addChild(cp3);
						
						bc.layout();
					</script>
				</button>
			</div>
			
		</div>
		<div id="hidden">
			<div id="pane0">pane 0 content</div>
			<div id="pane1">pane 1 content</div>
			<div id="pane2">pane 2 content</div>
			<div id="pane3">pane 3 content</div>
		</div>
</body>
</html>