You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1223 lines
46 KiB
1223 lines
46 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>dijit/form/Select test</title> |
|
|
|
<style> |
|
.ark { text-decoration: underline; } |
|
form { |
|
margin: 10px 0px; |
|
border: solid gray 2px; |
|
} |
|
.area { |
|
border: 1px solid gray; |
|
padding: 2px; |
|
display: inline; |
|
white-space: nowrap; |
|
} |
|
h3 { |
|
margin: 0; |
|
} |
|
body .customStyled .dijitSelect, |
|
body .customStyled .dijitSelect .dijitButtonContents { |
|
border-width: 2px; |
|
border-color: blue; |
|
} |
|
body .customStyled .dijitSelect .dijitInputField { |
|
padding: 5px; |
|
font-family: Arial; |
|
font-size: 150%; |
|
} |
|
.dj_a11y .dijitSelect, |
|
.dj_a11y .dijitSelect .dijitButtonContents { |
|
border-width: medium !important; |
|
} |
|
.dj_a11y .dijitSelect, |
|
.dj_a11y .customStyled .dijitSelect, |
|
.dj_a11y .dijitSelect *, |
|
.dj_a11y .customStyled .dijitSelect * { |
|
background-color: white !important; |
|
background-image: none !important; |
|
border-color: black !important; |
|
color: black !important; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript" src="../boilerplate.js"></script> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", |
|
"dojo/_base/array", |
|
"dojo/_base/lang", |
|
"dojo/parser", |
|
"dojo/data/ItemFileReadStore", // for testing old API (remove for 2.0) |
|
"dojo/data/ItemFileWriteStore", // for testing old API (remove for 2.0) |
|
"dojo/store/Memory", |
|
"dojo/store/Observable", |
|
"dijit/focus", |
|
"dijit/registry", |
|
"dijit/form/Select", |
|
"dijit/form/Button", |
|
"dijit/form/Form", |
|
"dijit/Dialog", |
|
"dijit/Tooltip", |
|
"dijit/tests/helpers", |
|
|
|
// Used by parser |
|
"dijit/Toolbar", |
|
"dijit/form/ToggleButton", |
|
|
|
"dojo/domReady!" |
|
], function(doh, array, lang, parser, ItemFileReadStore, ItemFileWriteStore, Memory, Observable, |
|
focus, registry, Select, Button, Form, Dialog, Tooltip, helpers){ |
|
|
|
var numOptions = 0; |
|
var numChanges = 0; |
|
var addNum = 10; |
|
|
|
// Add test=true to the URL to run unit tests. |
|
// Add testPerformance=true to the URL to run performance tests - note SLOW to run |
|
var test = /mode=test/i.test(window.location.href), |
|
testPerformance = /mode=benchmark/i.test(window.location.href); |
|
|
|
// dojo/data (legacy) data stores |
|
var data = { |
|
identifier: "value", |
|
label: "label", |
|
items: [ |
|
{value: "AL", label: "Alabama"}, |
|
{value: "AK", label: "Alaska"}, |
|
{value: "AZ", label: "Arizona"}, |
|
{value: "AR", label: "Arkansas"}, |
|
{value: "CA", label: "California"}, |
|
{value: "CO", label: "Colorado"}, |
|
{value: "CT", label: "Connecticut"} |
|
] |
|
}; |
|
var data2 = { |
|
identifier: "value", |
|
label: "label", |
|
items: [ |
|
{value: "DE", label: "Delaware"}, |
|
{value: "FL", label: "Florida"}, |
|
{value: "GA", label: "Georgia"}, |
|
{value: "HI", label: "Hawaii"}, |
|
{value: "ID", label: "Idaho"}, |
|
{value: "IL", label: "Illinois"}, |
|
{value: "IN", label: "Indiana"} |
|
] |
|
}; |
|
|
|
readStore = new ItemFileReadStore({data: lang.clone(data)}); |
|
store2 = new ItemFileReadStore({data: lang.clone(data2)}); |
|
writeStore = new ItemFileWriteStore({data: lang.clone(data)}); |
|
|
|
// dojo/store (new API) data stores |
|
var vals = [ |
|
{value: "AL", label: "Alabama"}, |
|
{value: "AK", label: "Alaska"}, |
|
{value: "AZ", label: "Arizona"}, |
|
{value: "AR", label: "Arkansas"}, |
|
{value: "CA", label: "Calif<a href='javascript:alert()'>ornia</a>"}, |
|
{value: "CO", label: "Colorado"}, |
|
{value: "CT", label: "Connecticut"} |
|
]; |
|
var vals2 = [ |
|
{value: "DE", label: "Delaware"}, |
|
{value: "FL", label: "Florida"}, |
|
{value: "GA", label: "Georgia"}, |
|
{value: "HI", label: "Hawaii"}, |
|
{value: "ID", label: "Idaho"}, |
|
{value: "IL", label: "Illinois"}, |
|
{value: "IN", label: "Indiana"} |
|
]; |
|
memoryStore = new Memory({ |
|
idProperty: "value", |
|
data: lang.clone(vals) |
|
}); |
|
memoryStore2 = new Memory({ |
|
idProperty: "value", |
|
data: lang.clone(vals2) |
|
}); |
|
memoryStore3 = new Observable(new Memory({ // updates will reflect to select |
|
idProperty: "value", |
|
data: lang.clone(vals) |
|
})); |
|
|
|
parser.parse(); |
|
|
|
s1.on("change", function(val){ |
|
console.log("First Select Changed to " + val); |
|
numChanges++; |
|
}); |
|
|
|
var programmatic = new Select({ |
|
options: [ |
|
{ label: 'foo', value: 'foo', selected: true }, |
|
{ label: 'bar', value: 'bar' } |
|
], |
|
"aria-label":"programmatic" |
|
}); |
|
programmatic.placeAt('testProgramatic'); |
|
|
|
var programmaticDisabled = new Select({ |
|
disabled: true, |
|
options: [ |
|
{ label: 'foo', value: 'foo', selected: true }, |
|
{ label: 'bar', value: 'bar' } |
|
], |
|
"aria-label":"programmatic disabled" |
|
}); |
|
programmaticDisabled.placeAt('testProgramatic'); |
|
|
|
if(test){ |
|
doh.register("API", [ |
|
{ |
|
name: "test_set", |
|
timeout: 5000, |
|
runTest: function(t){ |
|
var d = new doh.Deferred(); |
|
t.is("VA", form.get("value").s1, "initial value"); |
|
s1.set("value", s1.getOptions(2)); // set s1 to a valid value via index search |
|
t.is("WA", s1.value); |
|
|
|
setTimeout(function(){ |
|
try{ // allow onChange to fire |
|
|
|
// set s1 to non-existing value, which (currently) makes the Select pick |
|
// the first option in the drop down |
|
s1.set("value", "UT"); |
|
t.is("TN", s1.value); |
|
|
|
setTimeout(function(){ |
|
try{ // allow onChange to fire |
|
t.is(2, numChanges); |
|
|
|
// prevent onChange from firing |
|
s1.set("value", "FL", false); |
|
|
|
setTimeout(function(){ |
|
try{ // allow onChange to fire if it's wrong |
|
t.is(2, numChanges); |
|
d.callback(true); |
|
}catch(e){ |
|
d.errback(e); |
|
} |
|
}, 0) |
|
}catch(e){ |
|
d.errback(e); |
|
} |
|
}, 0); |
|
}catch(e){ |
|
d.errback(e); |
|
} |
|
}, 0); |
|
return d; |
|
} |
|
}, |
|
{ |
|
name: "test_set by number", |
|
timeout: 5000, |
|
runTest: function(t){ |
|
var d = new doh.Deferred(); |
|
t.is(100, form.get("value").s5, "initial value"); |
|
s5.set("value", s5.getOptions(2)); // set s5 to a valid value via index search |
|
t.is(102, s5.value); |
|
|
|
setTimeout(function(){ |
|
try{ // allow onChange to fire |
|
|
|
// set s5 to non-existing value, which (currently) makes the Select pick |
|
// the first option in the drop down |
|
s5.set("value", 200); |
|
t.is(100, s5.value); |
|
|
|
setTimeout(function(){ |
|
try{ // allow onChange to fire |
|
t.is(2, numChanges); |
|
|
|
// prevent onChange from firing |
|
s5.set("value", 103, false); |
|
t.t(/.*No Move.*/.test(s5.containerNode.innerHTML), s5.containerNode.innerHTML); |
|
|
|
setTimeout(function(){ |
|
try{ // allow onChange to fire if it's wrong |
|
t.is(2, numChanges); |
|
d.callback(true); |
|
}catch(e){ |
|
d.errback(e); |
|
} |
|
}, 0) |
|
}catch(e){ |
|
d.errback(e); |
|
} |
|
}, 0); |
|
}catch(e){ |
|
d.errback(e); |
|
} |
|
}, 0); |
|
return d; |
|
} |
|
}, |
|
{ |
|
name: 'test_disabled', |
|
runTest: function(t){ |
|
t.is(testDisabled.disabled, true); |
|
} |
|
}, |
|
{ |
|
name: 'test_programmatic', |
|
runTest: function(t){ |
|
t.is(programmatic.options.length, 2); |
|
t.is(programmaticDisabled.options.length, 2); |
|
t.is(programmaticDisabled.disabled, true); |
|
} |
|
}, |
|
function test_setOptions(t){ |
|
programmatic.set('options', data2.items); |
|
programmatic.reset(); |
|
t.is(7, programmatic.getOptions().length); |
|
t.is("DE", programmatic.value); |
|
}, |
|
// Test that destroying a Select destroys the internal Menu and MenuItems too |
|
{ |
|
name: "test_destroy", |
|
timeout: 5000, |
|
runTest: function(t){ |
|
var oldCnt = registry.length; |
|
|
|
s1.destroy(); |
|
|
|
var newCnt = registry.length; |
|
t.t(newCnt < oldCnt + 3, "should have destroyed many widgets, went from " + oldCnt + " to " + newCnt); |
|
} |
|
}, |
|
{ |
|
name: "aria attributes", |
|
timeout: 2000, |
|
runTest: function(){ |
|
var d = new doh.Deferred(); |
|
select = registry.byId("s2"); |
|
|
|
doh.is("listbox", select._popupStateNode.getAttribute("role"), "select _popupStateNode role"); |
|
doh.t(select._popupStateNode.getAttribute("aria-haspopup"), "aria-haspopup on select"); |
|
doh.f(select._popupStateNode.getAttribute("aria-expanded"), "initially false aria-expanded"); |
|
doh.f(select._popupStateNode.getAttribute("aria-owns"), "initially missing aria-owns"); |
|
|
|
select.openDropDown(); |
|
setTimeout(d.getTestCallback(function(){ |
|
doh.t(select._popupStateNode.getAttribute("aria-expanded"), "now aria-expanded should be true"); |
|
doh.is("s2_menu", select._popupStateNode.getAttribute("aria-owns"), "should aria-own the menu"); |
|
// Check roles and attributes on the Menu |
|
var menu = registry.byId("s2_menu"); |
|
doh.is("listbox", menu.domNode.getAttribute("role"), "Dlg.domNode should have a role"); |
|
doh.is("s2", menu.domNode.getAttribute("aria-labelledby"), "aria-labelledby should point back to button"); |
|
}), 0); |
|
|
|
return d; |
|
}, |
|
tearDown: function(){ |
|
select.closeDropDown(); |
|
} |
|
} |
|
]); |
|
|
|
// Test legacy dojo/data API, remove for 2.0 |
|
doh.register("dojo/data store", [ |
|
// Tests that when the currently selected item is changed in the data store, |
|
// the change is reflected in the Select widget |
|
function test_changeSelected(t){ |
|
t.is("AL", s11.value); |
|
t.t(/<span.*>Alabama<\/span>/i.test(s11.containerNode.innerHTML), "expected Alabama but got " + s11.containerNode.innerHTML); |
|
s11.set("value", ["AK"]); // test array |
|
t.is("AK", s11.value); |
|
t.t(/<span.*>Alaska<\/span>/i.test(s11.containerNode.innerHTML), "expected Alaska but got " + s11.containerNode.innerHTML); |
|
var d = new doh.Deferred(); |
|
writeStore.fetchItemByIdentity({ |
|
identity: "AK", |
|
onItem: d.getTestCallback(function(item){ |
|
writeStore.setValue(item, "label", "North Pole"); |
|
t.t(/<span.*>North Pole<\/span>/i.test(s11.containerNode.innerHTML), "expected North Pole but got " + s11.containerNode.innerHTML); |
|
}) |
|
}); |
|
return d; |
|
}, |
|
|
|
// Test that a delete of the non-selected item will remove that item from the Select's |
|
// list of options. |
|
function test_deleteNonSelected(t){ |
|
t.is(7, s11.getOptions().length); |
|
t.is("AK", s11.value); |
|
var d = new doh.Deferred(); |
|
writeStore.fetchItemByIdentity({ |
|
identity: "AZ", |
|
onItem: d.getTestCallback(function(item){ |
|
writeStore.deleteItem(item); |
|
t.is(6, s11.getOptions().length); |
|
}) |
|
}); |
|
return d; |
|
}, |
|
|
|
// Test that a delete of the selected item will remove that item from the Select's |
|
// list of options, and switch to a new selected item |
|
function test_deleteSelected(t){ |
|
t.is(6, s11.getOptions().length); |
|
t.is("AK", s11.value); |
|
var d = new doh.Deferred(); |
|
writeStore.fetchItemByIdentity({ |
|
identity: "AK", |
|
onItem: d.getTestCallback(function(item){ |
|
writeStore.deleteItem(item); |
|
t.is("AL", s11.value); |
|
t.is(5, s11.getOptions().length); |
|
}) |
|
}); |
|
return d; |
|
}, |
|
|
|
// Test that new items added to the data store appear in the select's options |
|
function test_newItem(t){ |
|
t.is(5, s11.getOptions().length); |
|
t.is("AL", s11.value); |
|
|
|
var d = new doh.Deferred(); |
|
writeStore.newItem({value: "NY", label: "New York"}); |
|
setTimeout(d.getTestCallback(function(){ |
|
t.is(6, s11.getOptions().length); |
|
s11.set("value", s11.getOptions({ label: "New York" })); // set via label search |
|
t.is("NY", s11.value); |
|
}), 100); |
|
|
|
return d; |
|
}, |
|
|
|
// Test that a Select's store can be changed using deprecated API |
|
// TODO remove in 2.0 |
|
function test_deprecatedSetStore(t){ |
|
t.is("AL", s12_dep.value); |
|
s12_dep.setStore(store2, "FL"); |
|
t.is("FL", s12_dep.value); |
|
s12_dep.setStore(readStore, "CA"); |
|
t.is("CA", s12_dep.value); |
|
s12_dep.setStore(store2); |
|
t.is("DE", s12_dep.value); |
|
t.is(7, s12_dep.getOptions().length); |
|
} |
|
]); |
|
|
|
doh.register("dojo/store", [ |
|
// Tests that when the currently selected item is changed in the data store, |
|
// the change is reflected in the Select widget |
|
function test_changeSelected(t){ |
|
// destroy second widget that shares same store to make sure Observable handles are cleaned up |
|
ds11a.destroy(); |
|
t.is("AL", ds11.value); |
|
t.t(/<span.*>Alabama<\/span>/i.test(ds11.containerNode.innerHTML)); |
|
ds11.set("value", "AK"); |
|
t.is("AK", ds11.value); |
|
t.t(/<span.*>Alaska<\/span>/i.test(ds11.containerNode.innerHTML)); |
|
|
|
var item = memoryStore3.get("AK"); |
|
item.label = "North Pole"; |
|
memoryStore3.put(item); |
|
t.t(/<span.*>North Pole<\/span>/i.test(ds11.containerNode.innerHTML), "select displayed value updated"); |
|
}, |
|
|
|
// Test that a delete of the non-selected item will remove that item from the Select's |
|
// list of options. |
|
function test_deleteNonSelected(t){ |
|
t.is(7, ds11.getOptions().length); |
|
t.is("AK", ds11.value); |
|
|
|
memoryStore3.remove("AZ"); |
|
t.is(6, ds11.getOptions().length); |
|
}, |
|
|
|
// Test that a delete of the selected item will remove that item from the Select's |
|
// list of options, and switch to a new selected item |
|
function test_deleteSelected(t){ |
|
t.is(6, ds11.getOptions().length); |
|
t.is("AK", ds11.value); |
|
|
|
memoryStore3.remove("AK"); |
|
t.is("AL", ds11.value); |
|
t.is(5, ds11.getOptions().length); |
|
}, |
|
|
|
// Test that new items added to the data store appear in the select's options |
|
function test_newItem(t){ |
|
t.is(5, ds11.getOptions().length); |
|
t.is("AL", ds11.value); |
|
|
|
memoryStore3.add({value: "NY", label: "New York"}); |
|
|
|
// TODO: try w/out the timeout |
|
var d = new doh.Deferred(); |
|
setTimeout(d.getTestCallback(function(){ |
|
t.is(6, ds11.getOptions().length); |
|
ds11.set("value", "NY"); |
|
t.is("NY", ds11.value); |
|
}), 100); |
|
return d; |
|
}, |
|
|
|
// Test that a Select's store can be changed using set API |
|
function test_setStore(t){ |
|
t.is(7, ds12.getOptions().length); |
|
t.is("AL", ds12.value); |
|
ds12.set("store", memoryStore2); |
|
ds12.set("value", "FL") |
|
t.is(7, ds12.getOptions().length); |
|
t.is("FL", ds12.value); |
|
ds12.set("store", memoryStore); |
|
ds12.set("value", "CA") |
|
t.is(7, ds12.getOptions().length); |
|
// ensure that escaping prevented child nodes |
|
t.is(ds12.containerNode.firstChild.childNodes.length, 1); |
|
t.is("CA", ds12.value); |
|
ds12.set("store", memoryStore2); |
|
t.is(7, ds12.getOptions().length); |
|
t.is("DE", ds12.value); |
|
}, |
|
|
|
// Test that a Select's store can be changed using deprecated API |
|
// TODO remove in 2.0 |
|
function test_deprecatedSetStore(t){ |
|
t.is(7, ds12_dep.getOptions().length); |
|
t.is("AL", ds12_dep.value); |
|
ds12_dep.setStore(memoryStore2, "FL"); |
|
t.is(7, ds12_dep.getOptions().length); |
|
t.is("FL", ds12_dep.value); |
|
ds12_dep.setStore(memoryStore, "CA"); |
|
t.is(7, ds12_dep.getOptions().length); |
|
// ensure that escaping prevented child nodes |
|
t.is(ds12_dep.containerNode.firstChild.childNodes.length, 1); |
|
t.is("CA", ds12_dep.value); |
|
ds12_dep.setStore(memoryStore2); |
|
t.is(7, ds12_dep.getOptions().length); |
|
t.is("DE", ds12_dep.value); |
|
}, |
|
|
|
function test_setQuery(){ |
|
ds.set("value", "CT"); |
|
doh.is("Connecticut", ds.get("displayedValue")); |
|
ds.set("query", {value: /^A.*/}); |
|
doh.is("Alabama", ds.get("displayedValue")); |
|
} |
|
]); |
|
|
|
doh.register("validation", [ |
|
function required(){ |
|
var s3 = registry.byId("s3"); |
|
doh.is("Incomplete", s3.get("state"), "incomplete because required but no value"); |
|
|
|
var stateWatch = "no notification"; |
|
s3.watch("state", function(name, oval, nval){ |
|
stateWatch = nval; |
|
}); |
|
|
|
s3.set("required", false); |
|
doh.is("", stateWatch, "watch fired after set requried=true"); |
|
|
|
s3.set("required", true); |
|
doh.is("Incomplete", stateWatch, "watch fired after set required=false''"); |
|
|
|
s3.set("value", "AK"); |
|
doh.is("", stateWatch, "watch fired after set value=AK''"); |
|
} |
|
]); |
|
} |
|
|
|
if(testPerformance){ |
|
doh.register("performance", [ |
|
{ |
|
name: "test_performance_single", |
|
testType: "perf", |
|
trialDuration: 100, |
|
trialIterations: 100, |
|
trialDelay: 100, |
|
runTest: function(t){ |
|
var opt = {value: "Test", label: "Test Option"}; |
|
s6.addOption(opt); |
|
s6.removeOption(opt); |
|
} |
|
}, |
|
{ |
|
name: "test_performance_separate", |
|
testType: "perf", |
|
trialDuration: 100, |
|
trialIterations: 100, |
|
trialDelay: 100, |
|
setUp: function(t){ |
|
var opts = (t.options = []); |
|
for(var i = 0; i < addNum; i++){ |
|
opts.push({value: i + "", label: "Option " + (i + 1)}); |
|
} |
|
}, |
|
runTest: function(t){ |
|
array.forEach(t.options, function(opt){ |
|
s6.addOption(opt); |
|
}); |
|
array.forEach(t.options, function(opt){ |
|
s6.removeOption(opt); |
|
}); |
|
}, |
|
tearDown: function(t){ |
|
delete t.options; |
|
} |
|
}, |
|
{ |
|
name: "test_performance_batch", |
|
testType: "perf", |
|
trialDuration: 100, |
|
trialIterations: 100, |
|
trialDelay: 100, |
|
setUp: function(t){ |
|
var opts = (t.options = []); |
|
for(var i = 0; i < addNum; i++){ |
|
opts.push({value: i + "", label: "Option " + (i + 1)}); |
|
} |
|
}, |
|
runTest: function(t){ |
|
s6.addOption(t.options); |
|
s6.removeOption(t.options); |
|
}, |
|
tearDown: function(t){ |
|
delete t.options; |
|
} |
|
} |
|
]); |
|
} |
|
|
|
if(test || testPerformance){ |
|
doh.run(); |
|
} |
|
}); |
|
</script> |
|
</head> |
|
<body role="main"> |
|
<h1 class="testTitle">Test: dijit/form/Select</h1> |
|
|
|
<p> |
|
Note: load <a href="test_Select.html?mode=test">test_Select.html?mode=test</a> to run unit tests, or |
|
<a href="test_Select.html?mode=benchmark">test_Select.html?mode=benchmark</a> to run performance tests. |
|
</p> |
|
|
|
<script type="dojo/require"> |
|
registry: "dijit/registry" |
|
</script> |
|
|
|
<form method="get" id="htmlForm" action="get"> |
|
<h2>HTML select for comparison</h2> |
|
<label for="htmlSelect">Four options:</label> |
|
<select id="htmlSelect" title="native title"> |
|
<option value="one">one</option> |
|
<option value="two">two</option> |
|
<option value="three">three</option> |
|
<option value="four">four</option> |
|
</select> |
|
<label for="htmlSelect2">Empty:</label> |
|
<select id="htmlSelect2"> |
|
</select> |
|
</form> |
|
<form id="form" data-dojo-id="form" data-dojo-type="dijit/form/Form" method="get" |
|
onSubmit="return this.validate();"> |
|
<h2>dijit/form/Select form</h2> |
|
<h4 class="testSubtitle">Setting Defaults</h4> |
|
<span id="ls1">Test One:</span> |
|
<select id="s1" data-dojo-id="s1" data-dojo-type="dijit/form/Select" name="s1" aria-labelledby="ls1"> |
|
<option value="TN">Tennessee</option> |
|
<option value="VA" selected="selected">Virginia</option> |
|
<option value="WA">Washington</option> |
|
<option value="FL">Florida</option> |
|
<option value="CA">California</option> |
|
</select> |
|
<button id="s1button" data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ console.log(s1.get("displayedValue")); }'> |
|
Get Displayed Value |
|
</button> |
|
<span id="ls2">Test Two:</span> |
|
<select id="s2" data-dojo-id="s2" data-dojo-type="dijit/form/Select" name="s2" aria-labelledby="ls2" |
|
value="CA" title="widget title"> |
|
<option value="AL">Alabama</option> |
|
<option value="AK">Alaska</option> |
|
<option value="AZ">Arizona</option> |
|
<option value="AR">Arkansas</option> |
|
<option value="CA">California</option> |
|
<option value="NH">New Hampshire</option> |
|
<option value="NJ">New Jersey</option> |
|
<option value="NM">New Mexico</option> |
|
<option value="NY">New York</option> |
|
</select> |
|
<span id="ls3">Test Three (required):</span> |
|
<select id="s3" data-dojo-id="s3" data-dojo-type="dijit/form/Select" name="s3" aria-labelledby="ls3" |
|
data-dojo-props='style:{width:"150px"}, |
|
required:true, |
|
onChange: function(){ |
|
if(!this.options[0].value){ |
|
this.removeOption(0); |
|
} |
|
} |
|
'> |
|
<option> </option> |
|
<option value="AL">Alabama</option> |
|
<option value="AK">Alaska</option> |
|
<option></option> |
|
<option value="AZ">Arizona</option> |
|
<option value="AR">Arkansas</option> |
|
<option></option> |
|
<option value="CA">California</option> |
|
</select> |
|
<hr> |
|
<h4 class="testSubtitle">Rich Text (Need to use divs and spans - since browsers hack selects to pieces)</h4> |
|
<span id="ls4">Rich text One:</span> |
|
<span id="s4" data-dojo-id="s4" data-dojo-type="dijit/form/Select" name="s4" aria-labelledby="ls4" value="AK"> |
|
<span data-dojo-value="AL"><b>Alabama</b></span> |
|
<span data-dojo-value="AK"><span style="color:red;">A</span><span style="color:orange;">l</span><span style="color:yellow;">a</span><span style="color:green;">s</span><span style="color:blue;">k</span><span style="color:purple;">a</span></span> |
|
<span data-dojo-value="AZ"><i>Arizona</i></span> |
|
<span data-dojo-value="AR"><span class="ark">Arkansas</span></span> |
|
<span data-dojo-value="CA"><span style="font-size:25%">C</span><span style="font-size:50%">a</span><span style="font-size:75%">l</span><span style="font-size:90%">i</span><span style="font-size:100%">f</span><span style="font-size:125%">o</span><span style="font-size:133%">r</span><span style="font-size:150%">n</span><span style="font-size:175%">i</span><span style="font-size:200%">a</span></span> |
|
<button value="NM" disabled="disabled">New<br> Mexico</button> |
|
</span> |
|
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ s4.set("disabled", !s4.get("disabled")); }'> |
|
Toggle Disabled |
|
</button> |
|
<span id="ls5">Rich text two:</span> |
|
<span id="s5" data-dojo-id="s5" data-dojo-type="dijit/form/Select" name="s5" aria-labelledby="ls5" value="move"> |
|
<span data-dojo-value=100><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndCopy.png" alt="copy" /> Copy</span> |
|
<span data-dojo-value=101><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndMove.png" alt="move" /> Move</span> |
|
<span data-dojo-value=102><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoCopy.png" alt="no copy" /> No Copy</span> |
|
<span data-dojo-value=103><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" alt="no move" /> No Move</span> |
|
<span data-dojo-value=104><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" alt="very long menu" /> Very Long Menu Entry</span> |
|
</span> |
|
<hr> |
|
<h4 class="testSubtitle" id="ls6">Initially Empty</h4> |
|
<select id="s6" data-dojo-id="s6" data-dojo-type="dijit/form/Select" name="s6" aria-labelledby="ls6" |
|
data-dojo-props='maxHeight:100'> |
|
</select> |
|
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ numOptions++; s6.addOption({value: numOptions + "", label: "Option " + numOptions}); }'> |
|
Add Option |
|
</button> |
|
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ s6.removeOption(0); }'> |
|
Remove Top Option |
|
</button> |
|
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ s6.set("disabled", !s6.get("disabled")); }'> |
|
Toggle Disabled |
|
</button> |
|
<hr> |
|
<h4 class="testSubtitle" id="ls7">Single Item</h4> |
|
<select id="s7" data-dojo-id="s7" data-dojo-type="dijit/form/Select" name="s7" aria-labelledby="ls7"> |
|
<option value="NY">New York</option> |
|
</select> |
|
<hr> |
|
<h4 class="testSubtitle">Long lists</h4> |
|
<span id="ls8a">maxHeight=200:</span> |
|
<select id="s8a" data-dojo-id="s8a" data-dojo-type="dijit/form/Select" name="s8" aria-labelledby="ls8" |
|
data-dojo-props='maxHeight:200'> |
|
<option value="AL">Alabama</option> |
|
<option value="AK">Alaska</option> |
|
<option value="AZ">Arizona</option> |
|
<option value="AR">Arkansas</option> |
|
<option value="CA">California</option> |
|
<option value="CO">Colorado</option> |
|
<option value="CT">Connecticut</option> |
|
<option value="DE">Delaware</option> |
|
<option value="DC">Dist of Columbia</option> |
|
<option value="FL">Florida</option> |
|
<option value="GA">Georgia</option> |
|
<option value="HI">Hawaii</option> |
|
<option value="ID">Idaho</option> |
|
<option value="IL">Illinois</option> |
|
<option value="IN">Indiana</option> |
|
<option value="IA">Iowa</option> |
|
<option value="KS">Kansas</option> |
|
<option value="KY">Kentucky</option> |
|
<option value="LA">Louisiana</option> |
|
<option value="ME">Maine</option> |
|
<option value="MD">Maryland</option> |
|
<option value="MA">Massachusetts</option> |
|
<option value="MI">Michigan</option> |
|
<option value="MN">Minnesota</option> |
|
<option value="MS">Mississippi</option> |
|
<option value="MO">Missouri</option> |
|
<option value="MT">Montana</option> |
|
<option value="NE">Nebraska</option> |
|
<option value="NV">Nevada</option> |
|
<option value="NH">New Hampshire</option> |
|
<option value="NJ">New Jersey</option> |
|
<option value="NM">New Mexico</option> |
|
<option value="NY">New York</option> |
|
<option value="NC">North Carolina</option> |
|
<option value="ND">North Dakota</option> |
|
<option value="OH">Ohio</option> |
|
<option value="OK">Oklahoma</option> |
|
<option value="OR">Oregon</option> |
|
<option value="PA">Pennsylvania</option> |
|
<option value="RI">Rhode Island</option> |
|
<option value="SC">South Carolina</option> |
|
<option value="SD">South Dakota</option> |
|
<option value="TN">Tennessee</option> |
|
<option value="TX">Texas</option> |
|
<option value="UT">Utah</option> |
|
<option value="VT">Vermont</option> |
|
<option value="VA">Virginia</option> |
|
<option value="WA">Washington</option> |
|
<option value="WV">West Virginia</option> |
|
<option value="WI">Wisconsin</option> |
|
<option value="WY">Wyoming</option> |
|
</select> |
|
<span id="ls8b">no maxHeight:</span> |
|
<select id="s8b" data-dojo-id="s8b" data-dojo-type="dijit/form/Select" name="s8b" aria-labelledby="ls8b"> |
|
<option value="AL">Alabama</option> |
|
<option value="AK">Alaska</option> |
|
<option value="AZ">Arizona</option> |
|
<option value="AR">Arkansas</option> |
|
<option value="CA">California</option> |
|
<option value="CO">Colorado</option> |
|
<option value="CT">Connecticut</option> |
|
<option value="DE">Delaware</option> |
|
<option value="DC">Dist of Columbia</option> |
|
<option value="FL">Florida</option> |
|
<option value="GA">Georgia</option> |
|
<option value="HI">Hawaii</option> |
|
<option value="ID">Idaho</option> |
|
<option value="IL">Illinois</option> |
|
<option value="IN">Indiana</option> |
|
<option value="IA">Iowa</option> |
|
<option value="KS">Kansas</option> |
|
<option value="KY">Kentucky</option> |
|
<option value="LA">Louisiana</option> |
|
<option value="ME">Maine</option> |
|
<option value="MD">Maryland</option> |
|
<option value="MA">Massachusetts</option> |
|
<option value="MI">Michigan</option> |
|
<option value="MN">Minnesota</option> |
|
<option value="MS">Mississippi</option> |
|
<option value="MO">Missouri</option> |
|
<option value="MT">Montana</option> |
|
<option value="NE">Nebraska</option> |
|
<option value="NV">Nevada</option> |
|
<option value="NH">New Hampshire</option> |
|
<option value="NJ">New Jersey</option> |
|
<option value="NM">New Mexico</option> |
|
<option value="NY">New York</option> |
|
<option value="NC">North Carolina</option> |
|
<option value="ND">North Dakota</option> |
|
<option value="OH">Ohio</option> |
|
<option value="OK">Oklahoma</option> |
|
<option value="OR">Oregon</option> |
|
<option value="PA">Pennsylvania</option> |
|
<option value="RI">Rhode Island</option> |
|
<option value="SC">South Carolina</option> |
|
<option value="SD">South Dakota</option> |
|
<option value="TN">Tennessee</option> |
|
<option value="TX">Texas</option> |
|
<option value="UT">Utah</option> |
|
<option value="VT">Vermont</option> |
|
<option value="VA">Virginia</option> |
|
<option value="WA">Washington</option> |
|
<option value="WV">West Virginia</option> |
|
<option value="WI">Wisconsin</option> |
|
<option value="WY">Wyoming</option> |
|
</select> |
|
|
|
<hr> |
|
<h4 class="testSubtitle">dojo/data store (legacy API) based</h4> |
|
<span id="ls9">Example 1</span> |
|
<select id="s9" data-dojo-id="s9" data-dojo-type="dijit/form/Select" name="s9" value="CT" |
|
aria-labelledby="ls9" data-dojo-props='store:readStore'> |
|
</select> |
|
<span id="ls10">Example 2</span> |
|
<select id="s10" data-dojo-id="s10" data-dojo-type="dijit/form/Select" name="s10" aria-labelledby="ls10" |
|
data-dojo-props='store:readStore'> |
|
</select> |
|
<span id="ls11">Example 3</span> |
|
<select id="s11" data-dojo-id="s11" data-dojo-type="dijit/form/Select" name="s11" aria-labelledby="ls11" |
|
data-dojo-props='store:writeStore'> |
|
</select> |
|
<span id="ls12_dep">Example 4 Legacy</span> |
|
<select id="s12_dep" data-dojo-id="s12_dep" data-dojo-type="dijit/form/Select" name="s12_dep" |
|
aria-labelledby="ls12_dep" data-dojo-props='store:readStore'> |
|
</select> |
|
|
|
<hr> |
|
<h4 class="testSubtitle">dojo/store based</h4> |
|
<span id="lds9">Example 1</span> |
|
<select id="ds9" data-dojo-id="ds" data-dojo-type="dijit/form/Select" name="ds9" aria-labelledby="lds9" |
|
value="CT" data-dojo-props='store:memoryStore, labelAttr:"label"'> |
|
</select> |
|
<span id="lds10">Example 2</span> |
|
<select id="ds10" data-dojo-id="ds10" data-dojo-type="dijit/form/Select" name="ds10" aria-labelledby="lds10" |
|
data-dojo-props='store:memoryStore, labelAttr:"label"'> |
|
</select> |
|
<span id="lds11">Example 3 (Observable)</span> |
|
<select id="ds11" data-dojo-id="ds11" data-dojo-type="dijit/form/Select" name="ds11" aria-labelledby="lds11" |
|
data-dojo-props='store:memoryStore3, labelType: "text", labelAttr:"label"'> |
|
</select> |
|
<span id="lds11a">Example 3a (Observable, same store as 3)</span> |
|
<select id="ds11a" data-dojo-id="ds11a" data-dojo-type="dijit/form/Select" name="ds11a" aria-labelledby="lds11a" |
|
data-dojo-props='store:memoryStore3, labelAttr:"label"'> |
|
</select> |
|
<span id="lds12">Example 4</span> |
|
<select id="ds12" data-dojo-id="ds12" data-dojo-type="dijit/form/Select" name="ds12" aria-labelledby="lds12" |
|
data-dojo-props='labelType: "text", store:memoryStore, labelAttr:"label"'> |
|
</select> |
|
<span id="lds12_dep">Example 5 Legacy</span> |
|
<select id="ds12_dep" data-dojo-id="ds12_dep" data-dojo-type="dijit/form/Select" name="ds12_dep" |
|
aria-labelledby="lds12_dep" |
|
data-dojo-props='labelType: "text", store:memoryStore, labelAttr:"label"'> |
|
</select> |
|
|
|
<hr> |
|
<h4 class="testSubtitle">Inlined with text (all IE modes except for IE8 Standards)</h4> |
|
<span id="ltxtPrompt">Text Prompt:</span> |
|
<select id="txtPrompt" data-dojo-type="dijit/form/Select" aria-labelledby="ltxtPrompt"> |
|
<option value="SEL" selected="selected">Select</option> |
|
<option value="OTHER">Other</option> |
|
</select> |
|
|
|
<hr> |
|
<h4 class="testSubtitle">More required but blank selects</h4> |
|
<span id="ls13">required s13:</span> |
|
<select id="s13" data-dojo-id="s13" data-dojo-type="dijit/form/Select" name="s13" aria-labelledby="ls13" |
|
style="width: 150px;" required="true"> |
|
<option> </option> |
|
<option value="AL">Alabama</option> |
|
<option value="AK">Alaska</option> |
|
<option></option> |
|
<option value="AZ">Arizona</option> |
|
<option value="AR">Arkansas</option> |
|
<option></option> |
|
<option value="CA">California</option> |
|
</select> |
|
<span id="ls14">required s14:</span> |
|
<select id="s14" data-dojo-id="s14" data-dojo-type="dijit/form/Select" |
|
name="s14" aria-labelledby="ls14" style="width: 150px;" required="true"> |
|
<option> </option> |
|
<option value="AL">Alabama</option> |
|
<option value="AK">Alaska</option> |
|
<option></option> |
|
<option value="AZ">Arizona</option> |
|
<option value="AR">Arkansas</option> |
|
<option></option> |
|
<option value="CA">California</option> |
|
</select> |
|
|
|
<hr> |
|
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"button", onClick:function(){ console.dir(form.getValues()); }'> |
|
Get Values |
|
</button> |
|
<button data-dojo-type="dijit/form/Button" data-dojo-props='id:"submit", type:"submit"'>Submit</button> |
|
</form> |
|
|
|
<h4 class="testSubtitle">Disabled</h4> |
|
<span id="l_testDisabled">Disabled:</span> |
|
<select id='testDisabled' data-dojo-id='testDisabled' data-dojo-type="dijit/form/Select" |
|
disabled name="testDisabled" aria-labelledby="l_testDisabled"> |
|
<option value="foo">foo</option> |
|
<option value="bar">bar</option> |
|
</select> |
|
<hr> |
|
<h4 class="testSubtitle">Programmatic and other tests</h4> |
|
<div id="testProgramatic"></div> |
|
|
|
<!-- testing that tooltip disappears when dialog is closed --> |
|
<div dojoType="dijit/Dialog" id="dlg1"> |
|
<div dojoType="dijit/form/Select" id="dlg1Select"required="true"></div> |
|
<div dojoType="dijit/form/Button" id="dlg1ValidateBtn"> |
|
<script type=dojo/method data-dojo-event="onClick"> |
|
var dlg1 = registry.byId("dlg1"); |
|
if(dlg1.validate()){ |
|
dlg1.hide(); |
|
} |
|
</script> |
|
validate and close |
|
</div> |
|
</div> |
|
<button dojoType="dijit/form/Button" id="dlg1OpenBtn" |
|
onclick="registry.byId('dlg1').show();">show one select dialog</button> |
|
|
|
<div dojoType="dijit/Dialog" id="dlg2"> |
|
<div dojoType="dijit/form/Select" id="dlg2Select1"required="true"></div> |
|
<div dojoType="dijit/form/Select" id="dlg2Select2"required="true"></div> |
|
<div dojoType="dijit/form/Button" id="dlg2ValidateBtn"> |
|
<script type=dojo/method data-dojo-event="onClick"> |
|
var dlg2 = registry.byId("dlg2"); |
|
if(dlg2.validate()){ |
|
dlg2.hide(); |
|
} |
|
</script> |
|
validate and close |
|
</div> |
|
</div> |
|
<button dojoType="dijit/form/Button" id="dlg2OpenBtn" |
|
onclick="registry.byId('dlg2').show();">show two select dialog</button> |
|
<br> |
|
<fieldset class="area"> |
|
<legend>Rendering tests</legend> |
|
<fieldset class="area"> |
|
<legend>unstyled widget</legend> |
|
<fieldset class="area"> |
|
<legend id="lr1">normal</legend> |
|
<select aria-labelledby="lr1" id="r1" data-dojo-type="dijit/form/Select"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="lr2">disabled</legend> |
|
<select aria-labelledby="lr2" id="r2" data-dojo-type="dijit/form/Select" disabled> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="lr3">error</legend> |
|
<select id="r3" aria-labelledby="lr3" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" data-dojo-props="required:true"> |
|
<option data-dojo-value=""></option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="lr4">hover</legend> |
|
<select id="r4" aria-labelledby="lr4" data-dojo-type="dijit/form/Select" class="dijitHover dijitSelectHover"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="lr5">focused</legend> |
|
<select id="r5" aria-labelledby="lr5" data-dojo-type="dijit/form/Select" class="dijitFocused dijitSelectFocused"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="lr6">RTL</legend> |
|
<select id="r6" aria-labelledby="lr6" data-dojo-type="dijit/form/Select" dir="rtl"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="lr7">RTL error</legend> |
|
<select id="r7" aria-labelledby="lr7" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" dir="rtl" data-dojo-props="required:true"> |
|
<option data-dojo-value=""></option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="lr8">styled option</legend> |
|
<span id="r8" aria-labelledby="lr8" data-dojo-type="dijit/form/Select"> |
|
<span data-dojo-value="1"><span style="font-size:200%;color:pink;">Large</span></span> |
|
<span data-dojo-value="2">2</span> |
|
</span> |
|
</fieldset> |
|
</fieldset> |
|
<br> |
|
<fieldset class="area"> |
|
<legend>width:60px;font-family:Arial;font-size:150%;border:2px blue;padding:5px;color:red</legend> |
|
<fieldset class="area customStyled"> |
|
<legend id="lcs1">normal</legend> |
|
<select id="cs1" aria-labelledby="lcs1" data-dojo-type="dijit/form/Select" style="color:red;width:60px;"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lcs2">disabled</legend> |
|
<select id="cs2" aria-labelledby="lcs2" data-dojo-type="dijit/form/Select" style="color:red;width:60px;" disabled> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lcs3">error</legend> |
|
<select id="cs3" aria-labelledby="lcs3" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" style="color:red;width:60px;" data-dojo-props="required:true"> |
|
<option data-dojo-value=""></option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lcs4">hover</legend> |
|
<select id="cs4" aria-labelledby="lcs4" data-dojo-type="dijit/form/Select" class="dijitHover dijitSelectHover" style="color:red;width:60px;"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lcs5">focused</legend> |
|
<select id="cs5" data-dojo-type="dijit/form/Select" aria-labelledby="lcs5" class="dijitFocused dijitSelectFocused" style="color:red;width:60px;"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lcs6">RTL</legend> |
|
<select id="cs6" aria-labelledby="lcs6" data-dojo-type="dijit/form/Select" dir="rtl" style="color:red;width:60px;"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lcs7">RTL error</legend> |
|
<select id="cs7" aria-labelledby="lcs7" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" style="color:red;width:60px;" dir="rtl" data-dojo-props="required:true"> |
|
<option data-dojo-value=""></option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lcs8">styled option</legend> |
|
<span id="cs8" aria-labelledby="lcs8" data-dojo-type="dijit/form/Select" style="color:red;width:120px;"> |
|
<span data-dojo-value="1"><span style="font-size:200%;color:pink;">Large</span></span> |
|
<span data-dojo-value="2">2</span> |
|
</span> |
|
</fieldset> |
|
</fieldset> |
|
<br> |
|
<fieldset class="area dj_a11y"> |
|
<legend>a11y, unstyled</legend> |
|
<fieldset class="area"> |
|
<legend id="la1">normal</legend> |
|
<select id="a1" aria-labelledby="la1" data-dojo-type="dijit/form/Select"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="la2">disabled</legend> |
|
<select id="a2" aria-labelledby="la2" data-dojo-type="dijit/form/Select" disabled> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="la3">error</legend> |
|
<select id="a3" aria-labelledby="la3" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" data-dojo-props="required:true"> |
|
<option data-dojo-value=""></option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="la4">hover</legend> |
|
<select id="a4" aria-labelledby="la4" data-dojo-type="dijit/form/Select" class="dijitHover dijitSelectHover"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="la5">focused</legend> |
|
<select id="a5" aria-labelledby="la5" data-dojo-type="dijit/form/Select" class="dijitFocused dijitSelectFocused"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="la6">RTL</legend> |
|
<select id="a6" aria-labelledby="la6" data-dojo-type="dijit/form/Select" dir="rtl"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="la7">RTL error</legend> |
|
<select id="a7" aria-labelledby="la7" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" dir="rtl" data-dojo-props="required:true"> |
|
<option data-dojo-value=""></option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area"> |
|
<legend id="la8">styled option</legend> |
|
<span id="a8" aria-labelledby="la8" data-dojo-type="dijit/form/Select"> |
|
<span data-dojo-value="1"><span style="font-size:200%;color:pink;">Large</span></span> |
|
<span data-dojo-value="2">2</span> |
|
</span> |
|
</fieldset> |
|
</fieldset> |
|
<br> |
|
<fieldset class="area dj_a11y"> |
|
<legend>a11y styled</legend> |
|
<fieldset class="area customStyled"> |
|
<legend id="lacs1">normal</legend> |
|
<select id="acs1" aria-labelledby="lacs1" data-dojo-type="dijit/form/Select" style="color:red;width:60px;"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lacs2">disabled</legend> |
|
<select id="acs2" aria-labelledby="lacs2" data-dojo-type="dijit/form/Select" style="color:red;width:60px;" disabled> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lacs3">error</legend> |
|
<select id="acs3" aria-labelledby="lacs3" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" style="color:red;width:60px;" data-dojo-props="required:true"> |
|
<option data-dojo-value=""></option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lacs4">hover</legend> |
|
<select id="acs4" aria-labelledby="lacs5" data-dojo-type="dijit/form/Select" class="dijitHover dijitSelectHover" style="color:red;width:60px;"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lacs5">focused</legend> |
|
<select id="acs5" aria-labelledby="lacs5" data-dojo-type="dijit/form/Select" class="dijitFocused dijitSelectFocused" style="color:red;width:60px;"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lacs6">RTL</legend> |
|
<select id="acs6" aria-labelledby="lacs6" data-dojo-type="dijit/form/Select" dir="rtl" style="color:red;width:60px;"> |
|
<option data-dojo-value="1">1</option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lacs7">RTL error</legend> |
|
<select id="acs7" aria-labelledby="lacs7" data-dojo-type="dijit/form/Select" class="dijitError dijitSelectError dijitValidationTextBoxError" style="color:red;width:60px;" dir="rtl" data-dojo-props="required:true"> |
|
<option data-dojo-value=""></option> |
|
<option data-dojo-value="2">2</option> |
|
</select> |
|
</fieldset> |
|
<fieldset class="area customStyled"> |
|
<legend id="lacs8">styled option</legend> |
|
<span id="acs8" aria-labelledby="lacs8" data-dojo-type="dijit/form/Select" style="color:red;width:120px;"> |
|
<span data-dojo-value="1"><span style="font-size:200%;color:pink;">Large</span></span> |
|
<span data-dojo-value="2">2</span> |
|
</span> |
|
</fieldset> |
|
</fieldset> |
|
</fieldset> |
|
|
|
<h4 class="testSubtitle">Toolbar</h4> |
|
<input id="beforeToolbar"> |
|
<div data-dojo-type="dijit/Toolbar"> |
|
<button type="button" data-dojo-type="dijit/form/ToggleButton" id="toggle1"> |
|
toggle 1 |
|
</button> |
|
<select id="toolbarSelect" data-dojo-id="s14" data-dojo-type="dijit/form/Select" |
|
name="s14" style="width: 150px;" required="true"> |
|
<option> </option> |
|
<option value="AL">Alabama</option> |
|
<option value="AK">Alaska</option> |
|
<option></option> |
|
<option value="AZ">Arizona</option> |
|
<option value="AR">Arkansas</option> |
|
<option></option> |
|
<option value="CA">California</option> |
|
</select> |
|
<button type="button" data-dojo-type="dijit/form/ToggleButton" id="toggle2"> |
|
toggle 2 |
|
</button> |
|
</div> |
|
</body> |
|
</html>
|
|
|