Subversion Repositories Applications.papyrus

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2150 mathias 1 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 
	"http://www.w3.org/TR/html4/strict.dtd">
3 
<html>
4 
	<head>
5 
		<title>Dojo Slider Widget Demo</title>
6 
		<script type="text/javascript" src="../../../dojo/dojo.js"
7 
			djConfig="isDebug: true, parseOnLoad: true, extraLocale: ['de-de', 'en-us']"></script>
8 
		<script type="text/javascript" src="../_testCommon.js"></script>
9 
 
10 
		<script type="text/javascript">
11 
				dojo.require("dijit.form.Slider");
12 
				dojo.require("dijit.form.Button");
13 
				dojo.require("dojo.parser"); // scan page for widgets
14 
 
15 
				dojo.addOnLoad(function(){
16 
					dijit.byId("sliderH2").setDisabled(true);
17 
				});
18 
		</script>
19 
		<style type="text/css">
20 
			@import "../../../dojo/resources/dojo.css";
21 
			@import "../css/dijitTests.css";
22 
			#slider2 .dijitButtonNode {
23 
				width:12px;
24 
				height:12px;
25 
				border: none;
26 
				font-size:11px;
27 
				padding:0px;
28 
			}
29 
		</style>
30 
	</head>
31 
 
32 
	<body>
33 
		<h1 class="testTitle">Slider</h1>
34 
		Also try using the arrow keys, buttons, or clicking on the progress bar to move the slider.
35 
		<br>
36 
		<br>initial value=10, min=0, max=100, pageIncrement=100, onChange event triggers input box value change immediately<br>
37 
 
38 
		<div dojoType="dijit.form.HorizontalSlider" name="horizontal1"
39 
			onChange="dojo.byId('slider1input').value=dojo.number.format(arguments[0]/100,{places:1,pattern:'#%'});"
40 
			value="10"
41 
			maximum="100"
42 
			minimum="0"
43 
			pageIncrement="100"
44 
			showButtons="false"
45 
			intermediateChanges="true"
46 
			style="width:50%; height: 20px;"
47 
			id="slider1">
48 
				<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="6" numericMargin="1"></ol>
49 
				<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=6 style="height:5px;"></div>
50 
				<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
51 
				<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
52 
					<li>lowest</li>
53 
					<li>normal</li>
54 
					<li>highest</li>
55 
				</ol>
56 
		</div>
57 
 
58 
		Slider1 Value:<input readonly id="slider1input" size="4" value="10.0%">
59 
		<br>
60 
		<button id="disableButton" dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setDisabled( true);dijit.byId('disableButton').setDisabled(true);dijit.byId('enableButton').setDisabled(false);">Disable previous slider</button>
61 
		<button id="enableButton"  dojoType="dijit.form.Button" onClick="dijit.byId('slider1').setDisabled(false);dijit.byId('disableButton').setDisabled(false);dijit.byId('enableButton').setDisabled( true);" disabled>Enable previous slider</button>
62 
		<br>
63 
		<br>initial value=10, min=0, max=100, onChange event triggers input box value change when you mouse up or tab away<br>
64 
		<div dojoType="dijit.form.VerticalSlider" name="vertical1"
65 
			onChange="dojo.byId('slider2input').value=arguments[0];"
66 
			value="10"
67 
			maximum="100"
68 
			minimum="0"
69 
			discreteValues="11"
70 
			style="height:300px;"
71 
			id="slider2">
72 
				<ol dojoType="dijit.form.VerticalRuleLabels" container="leftDecoration" style="width:2em;color:gray;" labelStyle="right:0px;">
73 
					<li>0</li>
74 
					<li>100</li>
75 
				</ol>
76 
				<div dojoType="dijit.form.VerticalRule" container="leftDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
77 
				<div dojoType="dijit.form.VerticalRule" container="rightDecoration" count=11 style="width:5px;" ruleStyle="border-color:gray;"></div>
78 
				<ol dojoType="dijit.form.VerticalRuleLabels" container="rightDecoration" style="width:2em;color:gray;" count="6" numericMargin="1" maximum="100" constraints={pattern:'#'}></ol>
79 
		</div>
80 
		Slider2 Value:<input readonly id="slider2input" size="3" value="10">
81 
		<h1>Fancy HTML labels:</h1>
82 
		<div dojoType="dijit.form.HorizontalSlider" name="horizontal2"
83 
			minimum="1"
84 
			value="2"
85 
			maximum="3"
86 
			discreteValues="3"
87 
			showButtons="false"
88 
			intermediateChanges="true"
89 
			style="width:300px; height: 40px;"
90 
			id="slider3">
91 
				<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=3 style="height:5px;"></div>
92 
				<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
93 
					<li><img width=10 height=10 src="../images/note.gif"><br><span style="font-size: small">small</span></li>
94 
					<li><img width=15 height=15 src="../images/note.gif"><br><span style="font-size: medium">medium</span></li>
95 
					<li><img width=20 height=20 src="../images/note.gif"><br><span style="font-size: large">large</span></li>
96 
				</ol>
97 
		</div>
98 
 
99 
		<p></p><h1>Standalone ruler example:</h1><p></p>
100 
 
101 
		<div style="width:2in;border-top:1px solid black;">
102 
			<div dojoType="dijit.form.HorizontalRule" count=17 style="height:.4em;"></div>
103 
			<div dojoType="dijit.form.HorizontalRule" count=9 style="height:.4em;"></div>
104 
			<div dojoType="dijit.form.HorizontalRule" count=5 style="height:.4em;"></div>
105 
			<div dojoType="dijit.form.HorizontalRule" count=3 style="height:.4em;"></div>
106 
			<ol dojoType="dijit.form.HorizontalRuleLabels" labelStyle="font-style:monospace;font-size:.7em;margin:-1em 0px 0px -.35em;">
107 
				<li></li>
108 
				<li>1</li>
109 
				<li>2</li>
110 
			</ol>
111 
		</div>
112 
 
113 
		<h1>horizontal, with buttons, disabled (to show styling):</h1>
114 
 
115 
		<div dojoType="dijit.form.HorizontalSlider" name="horizontalH2"
116 
			onChange="dojo.byId('slider1input').value=arguments[0];"
117 
			value="10"
118 
			maximum="100"
119 
			minimum="0"
120 
			disabled="true"
121 
			showButtons="true"
122 
			intermediateChanges="true"
123 
			style="width:50%; height: 20px;"
124 
			id="sliderH2">
125 
				<ol dojoType="dijit.form.HorizontalRuleLabels" container="topDecoration" style="height:1.2em;font-size:75%;color:gray;" count="7" constraints="{pattern:'#.00%'}"></ol>
126 
				<div dojoType="dijit.form.HorizontalRule" container="topDecoration" count=7 style="height:5px;"></div>
127 
				<div dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=5 style="height:5px;"></div>
128 
				<ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;">
129 
					<li>lowest</li>
130 
					<li>normal</li>
131 
					<li>highest</li>
132 
				</ol>
133 
		</div>
134 
 
135 
	</body>
136 
</html>