summaryrefslogtreecommitdiff
path: root/includes/js/dijit/tests/layout/test_StackContainer.html
blob: 834b8748973e2830399bffdd1fbc3f55fb1f3105 (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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
		"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>StackContainer Demo</title>

	<style>
		@import "../../../dojo/resources/dojo.css";
		@import "../css/dijitTests.css";
		.dijitStackController .dijitToggleButtonChecked button {
			background-color: white;
			background-image: none;
		}
		.dijit_a11y .dijitStackController .dijitToggleButtonChecked button {
			border-style: dashed !important;
		}
	</style>

	<script type="text/javascript" src="../../../dojo/dojo.js"
		djConfig="isDebug: true, parseOnLoad: true"></script>
	<script type="text/javascript" src="../_testCommon.js"></script>

	<script type="text/javascript">
		dojo.require("dijit.layout.ContentPane");
		dojo.require("dijit.layout.StackContainer");
		dojo.require("dijit.form.Button");
		dojo.require("dojo.parser");	// scan page for widgets and instantiate them

		function selected(page){
			console.debug("page selected " + page.id);
			var widget=dijit.byId("myStackContainer");
			dijit.byId("previous").setAttribute("disabled", page.isFirstChild);
			dijit.byId("next").setAttribute("disabled", page.isLastChild);
			dijit.byId("previous2").setAttribute("disabled", page.isFirstChild);
			dijit.byId("next2").setAttribute("disabled", page.isLastChild);
		}
		dojo.subscribe("myStackContainer-selectChild", selected);
	</script>
</head>

<body>
	<h1 class="testTitle">A Tale Of Two Cities</h1>

	<button dojoType="dijit.form.Button" id="previous"
		onClick="dijit.byId('myStackContainer').back()">&lt;</button>
	<span dojoType="dijit.layout.StackController" containerId="myStackContainer"></span>
	<button dojoType="dijit.form.Button" id="next"
		onClick="dijit.byId('myStackContainer').forward()">&gt;</button>

	<div id="myStackContainer" dojoType="dijit.layout.StackContainer"
		style="width: 90%; border: 1px solid #9b9b9b; height: 20em; margin: 0.5em 0 0.5em 0; padding: 0.5em;">
		<p id="page1" dojoType="dijit.layout.ContentPane" title="page 1">IT WAS the best of times, it <input value="was the worst" /> of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair, we had everything before us, we had nothing before us, we were all going direct to Heaven, we were all going direct the other way -- in short, the period was so far like the present period, that some of its noisiest authorities insisted on its being received, for good or for evil, in the superlative degree of comparison only</p>
		<p id="page2" dojoType="dijit.layout.ContentPane" title="page 2">There were a king with a large jaw and a queen with a plain face, on the throne of England; there were a king with a large jaw and a queen with a fair face, on the throne of <a href="http://www.france.com">France</a>. In both countries it was clearer than crystal to the lords of the State preserves of loaves and fishes, that things in general were settled for ever.</p>
		<p id="page3" dojoType="dijit.layout.ContentPane" title="page 3">It was the year of Our Lord one thousand seven hundred and seventy- five. Spiritual revelations were conceded to England at that favoured period, as at this. Mrs. Southcott had recently attained her five-and- twentieth blessed birthday, of whom a prophetic private in the Life Guards had heralded the sublime appearance by announcing that arrangements were made for the swallowing up of London and Westminster. Even the Cock-lane ghost had been laid only a round dozen of years, after rapping out its messages, as the spirits of this very year last past (supernaturally deficient in originality) rapped out theirs. Mere messages in the earthly order of events had lately come to the English Crown and People, from a congress of British subjects in America:</p>
	</div>

	<button dojoType="dijit.form.Button" id="previous2" onClick="dijit.byId('myStackContainer').back()">&lt;</button>
	<span dojoType="dijit.layout.StackController" containerId="myStackContainer"></span>
	<button dojoType="dijit.form.Button" id="next2" onClick="dijit.byId('myStackContainer').forward()">&gt;</button>

</body>
</html>