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 2008-11-13 09:49:11 +0000
committer: mensonge 2008-11-13 09:49:11 +0000
commit: e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree: 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/form/test_Slider.html
parent: a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download: scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz
scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip
1 files changed, 208 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/form/test_Slider.html b/includes/js/dijit/tests/form/test_Slider.html
new file mode 100644
index 0000000..f1d0442
--- /dev/null
+++ b/includes/js/dijit/tests/form/test_Slider.html
@@ -0,0 +1,208 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html>
+	<head>
+		<title>Dojo Slider Widget Demo</title>
+
+		<style type="text/css">
+			@import "../../../dojo/resources/dojo.css";
+			@import "../css/dijitTests.css";
+			#slider2 .dijitButtonNode {
+				width:12px;
+				height:12px;
+				border: none;
+				font-size:11px;
+				padding:0px;
+			}
+		</style>
+		
+		<script type="text/javascript" src="../../../dojo/dojo.js"
+			djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
+		<script type="text/javascript" src="../_testCommon.js"></script>
+
+		<script type="text/javascript">
+				dojo.require("dijit.form.Slider");
+				dojo.require("dijit.form.Button");
+				dojo.require("dojo.parser"); // scan page for widgets
+
+				// programatic vertical slider and labels
+				var programaticExample = function(){
+					
+					var node = dojo.byId("programaticSlider");
+					// or var node = dojo.body().appendChild(document.createElement('div'));
+
+					// our rules are to be children of the slider
+					var rulesNode = document.createElement('div');
+					node.appendChild(rulesNode);
+
+					// setup the rules
+					var sliderRules = new dijit.form.VerticalRule({
+						count:11,
+						style:"width:5px" 
+					},rulesNode);
+
+					// and setup the slider
+					var theSlider = new dijit.form.VerticalSlider({ 
+						value:1400,
+						onChange: function(){
+                                                    console.log(arguments);
+						},
+						name:"programaticSlider",
+						slideDuration:0,
+						onChange:function(val){ dojo.byId('sliderProgInput').value=val; },
+						style:"height:165px",
+						minimum:1000,
+						maximum:3000,
+						discreteValues:11,
+						intermediateChanges:"true",
+						showButtons:"true"
+					},node);
+
+					// and start them both
+					theSlider.startup();
+        				sliderRules.startup();
+
+				};
+				dojo.addOnLoad(programaticExample);
+	
+				dojo.addOnLoad(function(){
+					dijit.byId("sliderH2").setAttribute('disabled',true);
+				});
+		</script>
+	</head>
+
+	<body>
+		<h1 class="testTitle">Slider</h1>
+		Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.
+		<br>
+		<!--    to test form submission, you'll need to create an action handler similar to
+			http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
+		<form id="form1" action="" name="example" method="post">
+		<br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br>
+
+		<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
+			onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"
+			value="10"
+			maximum="100"
+			minimum="0"
+			pageIncrement="100"
+			showButtons="false"
+			intermediateChanges="true"
+			style="width:50%; height: 20px;"
+			id="slider1">
+				<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="6" numericMargin="1"></ol>
+				<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=6 style="height:5px;"></div>
+				<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
+				<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
+					<li>lowest</li>
+					<li>normal</li>
+					<li>highest</li>
+				</ol>
+		</div>
+
+		Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%">
+		<br>
+		<button id="disableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setAttribute('disabled', true);dijit.byId('disableButton').setAttribute('disabled',true);dijit.byId('enableButton').setAttribute('disabled',false);">Disable previous slider</button>
+		<button id="enableButton"  dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setAttribute('disabled',false);dijit.byId('disableButton').setAttribute('disabled',false);dijit.byId('enableButton').setAttribute('disabled', true);" disabled>Enable previous slider</button>
+		<br>
+		<br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br>
+		<div dojoType="dijit.form.VerticalSlider" name="vertical1"
+			onChange="dojo.byId('slider2input').value=arguments[0];"
+			value="10"
+			maximum="100"
+			minimum="0"
+			discreteValues="11"
+			style="height:300px;"
+			id="slider2">
+				<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;color:gray;" labelStyle="right:0px;">
+					<li>0</li>
+					<li>100</li>
+				</ol>
+				<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
+				<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
+				<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="width:2em;color:gray;" count="6" numericMargin="1" maximum="100" constraints={pattern:'#'}></ol>
+		</div>
+		Slider2 Value:<input readonly id="slider2input" size="3" value="10">
+		<h1>Fancy HTML labels (no slide animation):</h1>
+		<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
+			minimum="1"
+			value="2"
+			maximum="3"
+			discreteValues="3"
+			showButtons="false"
+			intermediateChanges="true"
+			slideDuration="0"
+			style="width:300px; height: 40px;"
+			id="slider3">
+				<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
+				<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
+					<li><img width=10 height=10 src="../images/note.gif"><br><span style="font-size: small">small</span></li>
+					<li><img width=15 height=15 src="../images/note.gif"><br><span style="font-size: medium">medium</span></li>
+					<li><img width=20 height=20 src="../images/note.gif"><br><span style="font-size: large">large</span></li>
+				</ol>
+		</div>
+
+		<p></p><h1>Standalone ruler example:</h1><p></p>
+
+		<div style="width:2in;border-top:1px solid black;">
+			<div dojoType="dijit.form.HorizontalRule" count=17 style="height:.4em;"></div>
+			<div dojoType="dijit.form.HorizontalRule" count=9 style="height:.4em;"></div>
+			<div dojoType="dijit.form.HorizontalRule" count=5 style="height:.4em;"></div>
+			<div dojoType="dijit.form.HorizontalRule" count=3 style="height:.4em;"></div>
+			<ol dojoType="dijit.form.HorizontalRuleLabels" labelStyle="font-style:monospace;font-size:.7em;margin:-1em 0px 0px -.35em;">
+				<li></li>
+				<li>1</li>
+				<li>2</li>
+			</ol>
+		</div>
+
+		<h1>horizontal, with buttons, disabled (to show styling):</h1>
+
+		<div dojoType="dijit.form.HorizontalSlider" name="horizontalH2"
+			onChange="dojo.byId('slider1input').value=arguments[0];"
+			value="10"
+			maximum="100"
+			minimum="0"
+			disabled="true"
+			showButtons="true"
+			intermediateChanges="true"
+			style="width:50%; height: 20px;"
+			id="sliderH2">
+				<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="7" constraints="{pattern:'#.00%'}"></ol>
+				<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=7 style="height:5px;"></div>
+				<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
+				<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
+					<li>lowest</li>
+					<li>normal</li>
+					<li>highest</li>
+				</ol>
+		</div>
+
+
+		<h2>Completely Programatic VerticalSlider and VerticalRule</h2>
+		<h3>min:1000, max:3000, 11 discrete values, no animation</h3>
+
+		<div id="programaticSlider"></div>
+		Programmatic Value:<input readonly id="sliderProgInput" size="5" value="1400">
+
+		        <script>
+                		function displayData() {
+        		                var f = document.getElementById("form1");
+		                        var s = "";
+                        		for (var i = 0; i < f.elements.length; i++) {
+                		                var elem = f.elements[i];
+        		                        if (elem.name == "button")  { continue; }
+		                                s += elem.name + ": " + elem.value + "\n";
+                        		}
+                		        alert(s);
+        		        }
+		        </script>
+
+		        <div>
+                		<button name="button" onclick="displayData(); return false;">view data</button>
+        		        <input type="submit" name="submit" />
+		        </div>
+
+		</form>
+	</body>
+</html>
author	mensonge	2008-11-13 09:49:11 +0000
committer	mensonge	2008-11-13 09:49:11 +0000
commit	e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch)
tree	95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dijit/tests/form/test_Slider.html
parent	a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff)
download	scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip