Context Navigation

test_CheckedMultiSelectDropDown.html

Last change on this file was 483, checked in by hendrikvanantwerpen, 11 years ago
Added Dojo 1.9.3 release.
File size: 5.7 KB

Line
1	<!DOCTYPE html>
2	<html>
3	<head>
4	<title>dojox.form.CheckedMultiSelect</title>
5	<link rel="stylesheet" id="themeStyles" href="../../../dijit/themes/claro/claro.css">
6	<link rel="stylesheet" href="../resources/CheckedMultiSelect.css">
7	<style>
8	@import url(../../../dojo/resources/dojo.css);
9	@import url(../../../dijit/tests/css/dijitTests.css);
10
11	.ark {
12	text-decoration: underline;
13	}
14	</style>
15	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true">
16	</script>
17	<script src="../../../dijit/tests/_testCommon.js">
18	</script>
19	<script type="text/javascript">
20
21	dojo.require("dojo.parser");
22	dojo.require("dojox.form.CheckedMultiSelect");
23	dojo.require("dijit.form.Button");
24	dojo.require("dijit.form.Form");
25	dojo.require("dojo.data.ItemFileWriteStore");
26
27	var data = {
28	identifier: "value",
29	label: "label",
30	items: [{
31	value: "AL",
32	label: "Alabama",
33	selected: true
34	}, {
35	value: "AK",
36	label: "Alaska",
37	selected: true
38	}, {
39	value: "AZ",
40	label: "Arizona"
41	}, {
42	value: "AR",
43	label: "Arkansas"
44	}, {
45	value: "CA",
46	label: "California"
47	}, {
48	value: "CO",
49	label: "Colorado"
50	}, {
51	value: "CT",
52	label: "Connecticut",
53	selected: true
54	}]
55	};
56
57	var readStore = new dojo.data.ItemFileReadStore({
58	data: dojo.clone(data)
59	});
60	var writeStore = new dojo.data.ItemFileWriteStore({
61	data: dojo.clone(data)
62	});
63
64	var checkOptions = 0;
65	var radioOptions = 0;
66	var addNum = 10;
67	var testType;
68	</script>
69	</head>
70	<body class="claro">
71	<h1 class="testTitle">Test: dojox.form.CheckedMultiSelect</h1>
72	<h2>Non-dojo select (for comparison)</h2>
73	<select>
74	<option value ="volvo">Volvo</option>
75	<option value ="saab">Saab</option>
76	<option value="opel">Opel</option>
77	<option value="audi">Audi</option>
78	</select>
79	<form dojoType="dijit.form.Form" data-dojo-id="form">
80	<hr><h2>Multi-select</h2>
81	<table>
82	<tr>
83	<td>
84	<select data-dojo-id="ms1" multiple="true" name="ms1" dojoType="dojox.form.CheckedMultiSelect" dropdown="true">
85	<option value="TN">Tennessee</option>
86	<option value="VA" selected="selected">Virginia</option>
87	<option value="WA" selected="selected">Washington</option>
88	<option value="FL">Florida</option>
89	<option value="CA">California</option>
90	</select>
91	</td>
92	<td>
93	<button dojoType="dijit.form.Button">
94	<script type="dojo/method" data-dojo-event="onClick">
95	ms1.invertSelection(true);
96	return false;
97	</script>
98	Invert Selection
99	</button>
100	<button dojoType="dijit.form.Button">
101	<script type="dojo/method" data-dojo-event="onClick">
102	ms1.set("disabled", !ms1.disabled);
103	return false;
104	</script>
105	Toggle Disabled
106	</button>
107	<button dojoType="dijit.form.Button">
108	<script type="dojo/method" data-dojo-event="onClick">
109	console.log(ms1.get("displayedValue"));
110	return false;
111	</script>
112	Get Displayed Value
113	</button>
114	</td>
115	<tr>
116	<td>
117	<select data-dojo-id="ms2" multiple="true" name="ms2" dojoType="dojox.form.CheckedMultiSelect" dropdown="true">
118	<option value="UT">Utah</option>
119	<option value="TX" selected="selected">Texas</option>
120	<option value="GA" selected="selected">Georgia</option>
121	<option value="ID">Idaho</option>
122	<option value="WY">Wyoming</option>
123	<option value="OR">Oregon</option>
124	<option value="PA">Pennsylvania</option>
125	</select>
126	</td>
127	<td>
128	<button dojoType="dijit.form.Button">
129	<script type="dojo/method" data-dojo-event="onClick">
130	ms2.set("readOnly", !ms2.readOnly);
131	return false;
132	</script>
133	Toggle Read Only
134	</button>
135	</td>
136	</tr>
137	<tr>
138	<td>
139	<select data-dojo-id="ms3" multiple="true" maxHeight="125" name="ms3" dojoType="dojox.form.CheckedMultiSelect" dropdown="true">
140	</select>
141	</td>
142	<td>
143	<button dojoType="dijit.form.Button">
144	<script type="dojo/method" data-dojo-event="onClick">
145	checkOptions++;
146	ms3.addOption({value: checkOptions + "", label: "Option " + (checkOptions)});
147	return false;
148	</script>
149	Add Check Option
150	</button>
151	<button dojoType="dijit.form.Button">
152	<script type="dojo/method" data-dojo-event="onClick">
153	if(checkOptions > 0){
154	checkOptions--;
155	ms3.removeOption(checkOptions);
156	}
157	return false;
158	</script>
159	Remove Check Option
160	</button>
161	</td>
162	</tr>
163	<tr>
164	<td>
165	<select value="['AL','AK']" data-dojo-id="ms4" multiple="true" maxHeight="125" size="5" name="ms4" store="readStore" dojoType="dojox.form.CheckedMultiSelect" dropdown="true">
166	</select>
167	</td>
168	<td>
169	Read-Store-based
170	</td>
171	</tr>
172	</table>
173	<hr><h2>Validation</h2>
174	<select data-dojo-id="rq1" multiple="true" required="true" name="rq1" store="readStore" dojoType="dojox.form.CheckedMultiSelect" invalidMessage="You need to select at least one" dropdown="true">
175	</select>
176	<button dojoType="dijit.form.Button">
177	Validate
178	<script type='dojo/method' data-dojo-event='onClick'>
179	var isvalid = rq1.isValid();
180	console.warn("isvalid?", isvalid, form, form.validate);
181	try{
182	rq1.validate();
183	form.validate();
184	}catch(e){
185	console.log(e);
186	}
187	console.warn("validated");
188	</script>
189	</button>
190	<hr><h2>Output values in console</h2>
191	<button dojoType="dijit.form.Button">
192	<script type="dojo/method" data-dojo-event="onClick">
193	console.dir(form.get("value"));
194	return false;
195	</script>
196	Get Values
197	</button>
198	</form>
199	</body>
200	</html>

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Dev/trunk/src/client/dojox/form/tests/test_CheckedMultiSelectDropDown.html

Download in other formats: