New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit

git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f
author: mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> 2008-11-13 09:49:11 +0000
committer: mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f> 2008-11-13 09:49:11 +0000
commit: e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree: 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/layout/test_TabContainer.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2
1 files changed, 183 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/layout/test_TabContainer.html b/includes/js/dijit/tests/layout/test_TabContainer.html
new file mode 100644
index 0000000..5d51a8a
--- /dev/null
+++ b/includes/js/dijit/tests/layout/test_TabContainer.html
@@ -0,0 +1,183 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+		"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+<head>
+	<title>TabContainer Demo</title>
+
+	<style type="text/css">
+		@import "../../../dojo/resources/dojo.css";
+		@import "../css/dijitTests.css";
+
+		body {
+			font-family : sans-serif;
+			margin:20px;
+		}
+
+		/* add padding to each contentpane inside the tab container, and scrollbar if necessary */
+		.dojoTabPane {
+			padding : 10px 10px 10px 10px;
+			overflow: auto;
+		}
+	</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.TabContainer");
+		dojo.require("dijit.layout.SplitContainer");
+		dojo.require("dijit.Tooltip");
+		dojo.require("dijit.layout.LinkPane");
+		dojo.require("dijit.form.Button");
+		dojo.require("dojo.parser");	// scan page for widgets and instantiate them
+
+		function testClose(pane,tab){
+		  return confirm("Please confirm that you want tab "+tab.title+" closed");
+		}
+
+		startTime = new Date();
+		dojo.addOnLoad(function(){
+			var elapsed = new Date().getTime() - startTime;
+			var p = document.createElement("p");
+			p.appendChild(document.createTextNode("Widgets loaded in " + elapsed + "ms"));
+			document.body.appendChild(p);
+			// dojo.parser.parse(dojo.body());
+		});
+
+		dojo.addOnLoad(function(){
+			var tc = dijit.byId("mainTabContainer");
+			var cp = new dijit.layout.ContentPane({ title: 'Programmatically created tab' });
+			cp.domNode.innerHTML = "I was created programmatically!";
+			tc.addChild(cp, 3);
+		});
+	</script>
+</head>
+<body>
+
+	<h1 class="testTitle">Dijit layout.TabContainer tests</h1>
+
+	<p>These tabs are made up of local and external content. Tab 1 and Tab 2 are loading
+	files tab1.html and tab2.html. Tab 3 and Another Tab are using content that is already
+	part of this page.   Tab2 is initially selected.
+	</p>
+
+	<div id="mainTabContainer" dojoType="dijit.layout.TabContainer" style="width: 100%; height: 20em;">
+
+		<div id="tab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div>
+
+		<div id="tab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" selected="true"></div>
+
+		<div dojoType="dijit.layout.ContentPane" title="Tab 3">
+			<h1>I am tab 3</h1>
+			<p>And I was already part of the page! That's cool, no?</p>
+			<p id="foo">tooltip on this paragraph</p>
+			<div dojoType="dijit.Tooltip" connectId="foo">I'm a tooltip!</div>
+			<button dojoType="dijit.form.Button">I'm a button </button>
+			<br>
+			<button dojoType="dijit.form.Button">So am I!</button>
+			<p>
+			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean
+			semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin
+			porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.
+			Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis.
+			Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae
+			risus.
+			</p>
+			<p>Aliquam vitae enim. Duis scelerisque metus auctor est venenatis
+			imperdiet. Fusce dignissim porta augue. Nulla vestibulum. Integer lorem
+			nunc, ullamcorper a, commodo ac, malesuada sed, dolor. Aenean id mi in
+			massa bibendum suscipit. Integer eros. Nullam suscipit mauris. In
+			pellentesque. Mauris ipsum est, pharetra semper, pharetra in, viverra
+			quis, tellus. Etiam purus. Quisque egestas, tortor ac cursus lacinia,
+			felis leo adipiscing nisi, et rhoncus elit dolor eget eros. Fusce ut
+			quam. Suspendisse eleifend leo vitae ligula. Nulla facilisi. Nulla
+			rutrum, erat vitae lacinia dictum, pede purus imperdiet lacus, ut
+			semper velit ante id metus. Praesent massa dolor, porttitor sed,
+			pulvinar in, consequat ut, leo. Nullam nec est. Aenean id risus blandit
+			tortor pharetra congue. Suspendisse pulvinar.
+			</p>
+		</div>
+
+		<div dojoType="dijit.layout.TabContainer" title="Inlined Sub TabContainer">	
+			<a dojoType="dijit.layout.LinkPane" href="tab1.html">SubTab 1</a>		
+			<a dojoType="dijit.layout.LinkPane" href="tab2.html" selected="true">SubTab 2</a>
+		</div>
+
+		<a dojoType="dijit.layout.LinkPane" href="tab3.html">Sub TabContainer from href</a>	
+
+		<a dojoType="dijit.layout.LinkPane" href="tab4.html">SplitContainer from href</a>	
+
+	</div>
+
+	<p>
+		The next example is with closable tabs.
+		Tab 1 and Tab 3 can be closed; Tab 3 has a confirm box.
+	</p>
+
+	<div id="ttabs" dojoType="dijit.layout.TabContainer" tabPosition="top" style="width: 100%; height: 10em;"
+		onfocus="console.log('user focus handler')"
+		onblur="console.log('user blur handler')"
+	>
+		<div id="ttab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="First" closable="true"></div>
+		<div id="ttab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Second"></div>
+		<div dojoType="dijit.layout.ContentPane" title="Third" onClose="testClose" closable="true">
+			<h1>I am tab 3</h1>
+			<p>And I was already part of the page! That's cool, no?</p>
+			<p>If you try to close me there should be a confirm dialog.</p>
+		</div>
+	</div>
+
+	<p>Tabs with titles on the bottom:</p>
+
+	<div id="btabs" dojoType="dijit.layout.TabContainer" tabPosition="bottom" style="width: 100%; height: 10em;">
+		<div id="btab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1" closable="true"></div>
+		<div id="btab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" onLoad="console.debug('Tab2 onLoad');" title="Tab 2"></div>
+	</div>
+
+	<p>Tabs with titles on the left:</p>
+
+	<div id="lhtabs" dojoType="dijit.layout.TabContainer" tabPosition="left-h" style="width: 100%; height: 10em;">
+		<div id="lhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div>
+		<div id="lhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div>
+	</div>
+
+	<p>Tabs with titles on the right:</p>
+
+	<div id="lrtabs" dojoType="dijit.layout.TabContainer" tabPosition="right-h" style="width: 100%; height: 10em;">
+		<div id="rhtab1" dojoType="dijit.layout.ContentPane" href="tab1.html" title="Tab 1"></div>
+		<div id="rhtab2" dojoType="dijit.layout.ContentPane" href="tab2.html" refreshOnShow="true" title="Tab 2" closable="true"></div>
+	</div>
+
+<p></p>
+	<div dojoType="dijit.layout.TabContainer" style="width:500px;height:100px" tabPosition="left-h">
+      <div id="LittleRed" dojoType="dijit.layout.ContentPane" title="Little Red Cap">
+      Once upon a time there was a dear little girl who was loved by
+      every one who looked at her, but most of all by her grandmother,
+      and there was nothing that she would not have given to the child.
+      </div>
+      <div id="HanselGretel" dojoType="dijit.layout.ContentPane"
+           title="Hansel and Gretel" closable="true" selected="true">
+      Hard by a great forest dwelt a poor wood-cutter with his wife
+      and his two children. The boy was called Hansel and the girl Gretel.
+      He had little to bite and to break, and once when great dearth fell
+      on the land, he could no longer procure even daily bread.
+      </div>
+      <div id="GreenTwigs" dojoType="dijit.layout.ContentPane"
+             title="The Three Green Twigs">
+      There was once upon a time a hermit who lived in a forest at the foot
+      of a mountain, and passed his time in prayer and good works,
+      and every evening he carried, to the glory of God, two pails of water
+      up the mountain.
+	</div>
+
+	<h3>Typical rendering time</h3>
+	<table border=1>
+	  <tr><th>IE</th><th>Firefox (mac)</th></tr>
+	  <tr><td>1719</td><td>922</td></tr>
+	</table>
+	<h3>Rendering time</h3>
+
+</body>
+</html>
author	mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>	2008-11-13 09:49:11 +0000
committer	mensonge <mensonge@b3834d28-1941-0410-a4f8-b48e95affb8f>	2008-11-13 09:49:11 +0000
commit	e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree	95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/layout/test_TabContainer.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz semanticscuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.bz2