602 lines
23 KiB
HTML
602 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
<title>dijit.form.ComboBox Unit Test</title>
|
|
|
|
<style>
|
|
@import "../../themes/claro/document.css";
|
|
@import "../../../util/doh/robot/robot.css";
|
|
@import "../css/dijitTests.css";
|
|
</style>
|
|
|
|
<!-- required: the default dijit theme: -->
|
|
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
|
|
|
|
<!-- required: dojo.js -->
|
|
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
data-dojo-config="isDebug: true, parseOnLoad: false"></script>
|
|
|
|
<!-- only needed for alternate theme testing: -->
|
|
<script type="text/javascript" src="../_testCommon.js"></script>
|
|
|
|
<script type="text/javascript">
|
|
var testWidget = "dijit.form.ComboBox";
|
|
var qstr = window.location.search.substr(1);
|
|
if(qstr.length){
|
|
var qparts = qstr.split("&");
|
|
for(var x=0; x<qparts.length; x++){
|
|
var tp = qparts[x].split("=");
|
|
if(tp[0] == "testWidget"){
|
|
testWidget = tp[1];
|
|
document.title = testWidget + " Unit Test";
|
|
}
|
|
}
|
|
}
|
|
dojo.require("dojo.data.ItemFileReadStore");
|
|
dojo.require("dijit.tests._data.SlowStore");
|
|
dojo.require("dijit.dijit"); // optimize: load dijit layer
|
|
dojo.require(testWidget);
|
|
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
|
|
|
function setVal2(val){
|
|
dojo.byId('value2').value=val;
|
|
var w = dijit.byId('datatest');
|
|
var item = w.item;
|
|
console.debug("Value changed to ["+val+"] in second box (#1652): datastore item label = " + (item?w.store.getLabel(item):'no item'));
|
|
}
|
|
function setVal3(val){
|
|
dojo.byId('value3').value=val;
|
|
}
|
|
function setVal4(val){
|
|
dojo.byId('value4').value=val;
|
|
}
|
|
var combo;
|
|
function myLabelFunc(item, store){
|
|
var label=store.getValue(item, 'name');
|
|
// DEMO: uncomment to chop off a character
|
|
//label=label.substr(0, label.length-1);
|
|
// DEMO: uncomment to set to lower case
|
|
label = label.toLowerCase();
|
|
return label;
|
|
}
|
|
|
|
function init(){
|
|
var testClass = dojo.getObject(testWidget);
|
|
// substitute testWidget for each data-dojo-type=$testWidget
|
|
dojo.query('[data-dojo-type="$testWidget"]').forEach(function(node){
|
|
node.setAttribute('data-dojo-type', testWidget);
|
|
});
|
|
dojo.parser.parse(dojo.body());
|
|
store = new dojo.data.ItemFileReadStore({url: dojo.moduleUrl("dijit.tests._data", "states.json")});
|
|
combo = new testClass({
|
|
name:"prog",
|
|
title: "title attribute used for label",
|
|
autoComplete:false,
|
|
store: store,
|
|
searchAttr:"name"
|
|
}, dojo.byId("progCombo"));
|
|
store2 = new dojo.data.ItemFileReadStore({url: dojo.moduleUrl("dijit.tests._data", "countries.json")});
|
|
combo = new testClass({
|
|
name:"prog2",
|
|
autoComplete:false,
|
|
store:store2,
|
|
query:{type:'country'},
|
|
searchAttr:"name"
|
|
}, dojo.byId("progCombo2"));
|
|
|
|
new testClass({
|
|
name:"prog3",
|
|
autoComplete:false,
|
|
store:store2,
|
|
query:{type:'country'},
|
|
searchAttr:"name",
|
|
fetchProperties: {sort:[{attribute: 'name', descending: true}]}
|
|
}, dojo.byId("progCombo3"));
|
|
}
|
|
dojo.ready(init);
|
|
|
|
function toggleDisabled(button, widget){
|
|
widget = dijit.byId(widget);
|
|
button = dojo.byId(button);
|
|
widget.set('disabled',!widget.disabled);
|
|
button.innerHTML= widget.disabled ? "Enable" : "Disable";
|
|
}
|
|
|
|
function getValue(){
|
|
var f = document.getElementById("form1");
|
|
var s = "";
|
|
for(var i = 0; i < f.elements.length; i++){
|
|
var elem = f.elements[i];
|
|
if(elem.nodeName.toLowerCase() == "button" || elem.type=="submit" || elem.type=="button") { continue; }
|
|
s += elem.name + ": " + elem.value + "\n";
|
|
}
|
|
return s;
|
|
}
|
|
|
|
// formSubmitted flag is for benefit of DOH test harneess
|
|
formSubmitted = false;
|
|
function onFormSubmit(){
|
|
formSubmitted = true;
|
|
console.log(getValue());
|
|
return false;
|
|
}
|
|
</script>
|
|
</head>
|
|
|
|
<body class="claro">
|
|
|
|
<h1 class="testTitle" id="title"></h1>
|
|
<script>dojo.byId('title').appendChild(document.createTextNode(testWidget+" Unit Test"))</script>
|
|
<form id="form1" action="#" method="GET" onsubmit="return onFormSubmit();">
|
|
|
|
<!--
|
|
Need a submit button like this (rather than onsubmit handler on <form>) to get
|
|
IE to submit when the ENTER key is pressed.
|
|
|
|
And (at least on IE8) when ComboBox_a11y.html is run via runTests.html,
|
|
it only seems to work if the button is at the top of the form, not at the bottom.
|
|
-->
|
|
<button type="reset">reset</button>
|
|
<button type="submit">fake submit</button><br/>
|
|
<hr>
|
|
|
|
<p>Option tags, autoComplete=false, selectOnClick=true, default value of California, pageSize=30, custom labelFunc method</p>
|
|
<label for="setvaluetest">US State test 1 (200% Courier font):</label>
|
|
<script type="text/javascript">
|
|
function setValueTestOnChange(newValue){
|
|
if(this.lastlabelFuncMsg){
|
|
this.lastlabelFuncMsg = '';
|
|
}
|
|
dojo.byId('oc1').value = newValue;
|
|
var itemLabel;
|
|
if(this.item === null){
|
|
itemLabel = "null";
|
|
if(testWidget != "dijit.form.ComboBox" && this.isValid() && this.textbox.value != ''){
|
|
console.error(this.id + ' has a null item, onChange value = ' + newValue + ', widget value = ' + this.value + ', displayed Value = ' + this.textbox.value);
|
|
this.itemError = true;
|
|
}
|
|
}else if(typeof this.item === "undefined"){
|
|
itemLabel = "undefined";
|
|
console.error(this.id + ' has an undefined item, onChange value = ' + newValue + ', widget value = ' + this.value + ', displayed Value = ' + this.textbox.value);
|
|
this.itemError = true;
|
|
}else{
|
|
itemLabel = this.item[this.searchAttr].toString();
|
|
}
|
|
dojo.byId('i1').value = itemLabel;
|
|
}
|
|
function setValueTestLabelFunc(item, store){
|
|
var label = item[this.searchAttr];
|
|
var value = item.value;
|
|
if(!this.labelFuncCount){ this.labelFuncCount = 0; }
|
|
if(!this.labelFuncCounts){ this.labelFuncCounts = []; }
|
|
if(!this.labelFuncCounts[value]){ this.labelFuncCounts[value] = 0; }
|
|
this.labelFuncCount++;
|
|
this.labelFuncCounts[value]++;
|
|
this.lastlabelFuncMsg = 'my labelfunc ' + label + ' (' + value + '), count = ' + this.labelFuncCounts[value];
|
|
return label + ' (' + value + ')';
|
|
}
|
|
</script>
|
|
<select id="setvaluetest" data-dojo-type="$testWidget"
|
|
data-dojo-props='name:"state1",
|
|
style:{width:"50%", fontSize:"200%", fontFamily:"Courier"},
|
|
autoComplete:false,
|
|
selectOnClick:true,
|
|
onBlur:function(){ dojo.byId("b1").value=dijit.byId("setvaluetest").value },
|
|
onClick:function(){ console.log("onclick"); },
|
|
pageSize:30,
|
|
labelFunc:setValueTestLabelFunc,
|
|
onChange:setValueTestOnChange
|
|
'>
|
|
<option value="AL">Alabama</option>
|
|
<option value="AK">Alaska</option>
|
|
<option value="AS">American Samoa</option>
|
|
<option value="AZ">Arizona</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="AE">Armed Forces Europe</option>
|
|
<option value="AP">Armed Forces Pacific</option>
|
|
<option value="AA">Armed Forces the Americas</option>
|
|
<option value="CA" selected>California</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="DC">District of Columbia</option>
|
|
<option value="FM">Federated States of Micronesia</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="GU">Guam</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="MH">Marshall Islands</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="MP">Northern Mariana Islands</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="PR">Puerto Rico</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="VI">Virgin Islands, U.S.</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>
|
|
<br>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"/>
|
|
<br>value:<input id="v1" disabled value="not fired yet!" autocomplete="off"/>
|
|
<br>blur:<input id="b1" disabled value="not fired yet!" autocomplete="off"/>
|
|
<br>this.item:<input id="i1" disabled value="no onChange yet!" autocomplete="off"/>
|
|
<input type="button" id="sv1_1" value="Set displayed value to Kentucky" onClick="dijit.byId('setvaluetest').set('displayedValue', 'Kentucky')"/>
|
|
<input type="button" id="sv1_2" value="Set displayed value to Canada" onClick="dijit.byId('setvaluetest').set('displayedValue', 'Canada')"/>
|
|
<input type="button" id="sv1_3" value="Set value to null" onClick="dijit.byId('setvaluetest').set('value', null)"/>
|
|
<input type="button" id="sv1_4" value="Get value" onClick="dojo.byId('v1').value=dijit.byId('setvaluetest').get('value')"/>
|
|
|
|
<hr>
|
|
|
|
<div data-dojo-id="stateStore" data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props='url:"../_data/states.json"'></div>
|
|
<div data-dojo-id="slowStateStore" data-dojo-type="dijit.tests._data.SlowStore" data-dojo-props='url:"../_data/states.json"'></div>
|
|
|
|
<div data-dojo-id="dijitStore" data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props='url:"../_data/dijits.json"'></div>
|
|
|
|
<p>Data store, autoComplete=true:</p>
|
|
<label for="datatest">US State test 2 (8pt font):</label>
|
|
<input id="datatest" data-dojo-type="$testWidget"
|
|
data-dojo-props='value: (testWidget == "dijit.form.ComboBox") ? "California" : "CA",
|
|
store:stateStore,
|
|
searchAttr:"name",
|
|
style:{width:"200px", fontSize:"8pt"},
|
|
name:"state2",
|
|
onChange:setVal2
|
|
'/>
|
|
<br>onChange:<input id="value2" disabled value="not fired yet!" autocomplete="off"/>
|
|
<hr>
|
|
<p>Artificially slowed-down data store, autoComplete=true:</p>
|
|
<label for="slow">US State test slow:</label>
|
|
<input id="slow" data-dojo-type="$testWidget"
|
|
data-dojo-props='value: (testWidget == "dijit.form.ComboBox") ? "California" : "CA",
|
|
store:slowStateStore,
|
|
searchAttr:"name",
|
|
name:"stateSlow",
|
|
onChange:function(val){ dojo.byId("ocSlow").value = val; }
|
|
'/>
|
|
<br>onChange:<input id="ocSlow" disabled value="not fired yet!" autocomplete="off"/>
|
|
<button id="slowDestroy" type="button" onclick="dijit.byId('slow').destroy();return false">Destroy widget to test in-flight query cancel</button>
|
|
<hr>
|
|
|
|
<label for="datatestDijit">Dijit List test #1 (150% font):</label>
|
|
<input id="datatestDijit" data-dojo-type="$testWidget"
|
|
data-dojo-props='value:"dijit.Editor",
|
|
store:dijitStore,
|
|
searchAttr:"className",
|
|
style:{width:"200px",fontSize:"150%"},
|
|
name:"dijitList1"
|
|
'/>
|
|
<span>Hey look, this one is kind of useful.</span>
|
|
<hr>
|
|
|
|
<p>Initially disabled, url, autoComplete=false:</p>
|
|
<label for="combo3">US State test 3:</label>
|
|
<input id="combo3" data-dojo-type="$testWidget"
|
|
data-dojo-props='value:(testWidget == "dijit.form.ComboBox") ? "California" : "CA",
|
|
store:stateStore,
|
|
searchAttr:"name",
|
|
style:{width:"300px"},
|
|
name:"state3",
|
|
autoComplete:false,
|
|
onChange:setVal3,
|
|
disabled:true
|
|
'/>
|
|
<br>onChange:<input id="value3" disabled value="not fired yet!" autocomplete="off"/>
|
|
<div>
|
|
<button id="combo3_disable" type="button" onclick='toggleDisabled("combo3_disable", "combo3"); return false;' tabIndex="-1">Enable</button>
|
|
</div>
|
|
<hr>
|
|
<p>Data store, autoComplete=false required=true and highlightMatch="none"</p>
|
|
<label for="combobox4">US State test 4:</label>
|
|
<input id="combobox4" data-dojo-type="$testWidget"
|
|
data-dojo-props='value:"",
|
|
store:stateStore,
|
|
searchAttr:"name",
|
|
style:{width:"300px"},
|
|
name:"state4",
|
|
onChange:setVal4,
|
|
autoComplete:false,
|
|
required:true,
|
|
highlightMatch:"none"
|
|
'/>
|
|
<br>onChange:<input id="value4" disabled value="not fired yet!" autocomplete="off"/>
|
|
<hr>
|
|
<p>test that title used as label is preserved on input</p>
|
|
<select id="preservetitletest" data-dojo-type="$testWidget"
|
|
data-dojo-props='name:"titletest",
|
|
style:{width:"50%", fontFamily:"Courier"},
|
|
autoComplete:false,
|
|
selectOnClick:true,
|
|
pageSize:5,
|
|
title:"New England States"
|
|
'>
|
|
<option value="ct">Connecticut</option>
|
|
<option value="me">Maine</option>
|
|
<option value="ma">Massachusetts</option>
|
|
<option value="nh">New Hampshire</option>
|
|
<option value="vt">Vermont</option>
|
|
</select>
|
|
<hr>
|
|
<p>No arrow, data store which searches and highlights matches anywhere in the string</p>
|
|
<input id="arrowless" data-dojo-type="$testWidget"
|
|
data-dojo-props='value: (testWidget == "dijit.form.ComboBox") ? "California" : "CA",
|
|
store:stateStore,
|
|
searchAttr:"name",
|
|
queryExpr:"*${0}*",
|
|
name:"state5",
|
|
autoComplete:false,
|
|
hasDownArrow:false,
|
|
highlightMatch:"all"
|
|
'/>
|
|
<hr>
|
|
<p>Created programmatically</p>
|
|
<input id="progCombo"/>
|
|
<hr>
|
|
<p>Created programmatically with an initial query. (Limits list to items with type = country.)</p>
|
|
<input id="progCombo2"/>
|
|
<hr>
|
|
<p>Created programmatically with an ItemFileReadStore and a descending sort. (Limits list to items with type = country.)</p>
|
|
<input id="progCombo3"/>
|
|
<hr>
|
|
<p>With option tags, autoComplete=true, pageSize=30, and a descending sort.</p>
|
|
<select id="descending" data-dojo-type="$testWidget"
|
|
data-dojo-props='name:"descending",
|
|
style:{width:"50%",fontSize:"200%",fontFamily:"Courier"},
|
|
autoComplete:true,
|
|
pageSize:30,
|
|
fetchProperties:{sort:[{attribute: "name", descending: true}]}
|
|
'>
|
|
<option value="AL">Alabama</option>
|
|
<option value="AK">Alaska</option>
|
|
<option value="AS">American Samoa</option>
|
|
<option value="AZ">Arizona</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="AE">Armed Forces Europe</option>
|
|
<option value="AP">Armed Forces Pacific</option>
|
|
<option value="AA">Armed Forces the Americas</option>
|
|
<option value="CA" selected>California</option>
|
|
<option value="CO">Colorado</option>
|
|
<option value="CT">Connecticut</option>
|
|
<option value="DE">Delaware</option>
|
|
<option value="DC">District of Columbia</option>
|
|
<option value="FM">Federated States of Micronesia</option>
|
|
<option value="FL">Florida</option>
|
|
<option value="GA">Georgia</option>
|
|
<option value="GU">Guam</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="MH">Marshall Islands</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="MP">Northern Mariana Islands</option>
|
|
<option value="OH">Ohio</option>
|
|
<option value="OK">Oklahoma</option>
|
|
<option value="OR">Oregon</option>
|
|
<option value="PA">Pennsylvania</option>
|
|
<option value="PR">Puerto Rico</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="VI">Virgin Islands, U.S.</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>
|
|
<p>Special characters</p>
|
|
<p>The drop down list should be:</p>
|
|
<ul>
|
|
<li>sticks & stones</li>
|
|
<li>rags --> riches</li>
|
|
<li>more\less</li>
|
|
<li>3 * 5</li>
|
|
</ul>
|
|
<label for="specialchars">Special chars:</label>
|
|
<select id="specialchars" data-dojo-type="$testWidget"
|
|
data-dojo-props='name:"specialchars"
|
|
'>
|
|
<option value="sticks" selected>sticks & stones</option>
|
|
<option value="rags">rags --> riches</option>
|
|
<option value="more">more\less</option>
|
|
<option value="times">3 * 5</option>
|
|
</select>
|
|
<hr>
|
|
<p>Japanese</p>
|
|
<p>Try typing 東区 (East), 西区 (West), 北区 (North), 南区 (South) and a few choices will pop up.</p>
|
|
<label for="japanese">Japanese list:</label>
|
|
<select id="japanese" data-dojo-type="$testWidget" data-dojo-props='name:"japanese", style:{width:"300px"}, autoComplete:true, required:true, value:""'>
|
|
<option value="nanboku">南北 (Nanboku)</option>
|
|
<option value="touzai">東西 (Touzai)</option>
|
|
<option value="toukyou">東京 (Tokyo)</option>
|
|
<option value="higashiku">東区 (East)</option>
|
|
<option value="nishiku">西区 (West)</option>
|
|
<option value="minamiku">南区 (South)</option>
|
|
<option value="kitaku">北区 (North)</option>
|
|
</select>
|
|
<hr>
|
|
<p>Custom labelFunc (labels in lowercase), autoComplete=true, prompt message when field is blank:</p>
|
|
<label for="labelFunc">custom label function</label>
|
|
<input id="labelFunc" data-dojo-type="$testWidget"
|
|
data-dojo-props='value: (testWidget == "dijit.form.ComboBox") ? "Oregon" : "OR",
|
|
labelFunc:myLabelFunc,
|
|
store:stateStore,
|
|
name:"labelFunc",
|
|
autoComplete:true,
|
|
labelAttr:"label",
|
|
labelType:"html",
|
|
promptMessage:"Please enter a state",
|
|
invalidMessage:"Invalid state name."
|
|
'/>
|
|
<input type="button" onclick="dijit.byId('labelFunc').set('readOnly',false);" value="Remove readOnly"/>
|
|
<input type="button" onclick="dijit.byId('labelFunc').set('readOnly',true);" value="Set readOnly"/>
|
|
<input type="button" onclick="dijit.byId('labelFunc').set('disabled',false);" value="Remove disabled"/>
|
|
<input type="button" onclick="dijit.byId('labelFunc').set('disabled',true);" value="Set disabled"/>
|
|
<hr>
|
|
|
|
<p>Rich text label</p>
|
|
<label for="richtexttest">Rich text labels in drop down:</label>
|
|
<select id="richtexttest" data-dojo-type="$testWidget"
|
|
data-dojo-props='name:"richtexttest",
|
|
autoComplete:false,
|
|
selectOnClick:true,
|
|
value:"h1",
|
|
labelType:"html",
|
|
labelFunc:function(item){ var txt = item.value; return "<"+txt+">"+txt+"</"+txt+">"; }
|
|
'>
|
|
<option value="h1">h1</option>
|
|
<option value="h2">h2</option>
|
|
<option value="p">p</option>
|
|
<option value="pre">pre</option>
|
|
</select>
|
|
<hr>
|
|
|
|
<input type="button" value="Create one in a window" onclick="var win=window.open(window.location);"/>
|
|
|
|
</form>
|
|
|
|
<hr>
|
|
<p>test placeholder</p>
|
|
<select id="placeholdertest" data-dojo-type="$testWidget"
|
|
data-dojo-props='name:"placetest",
|
|
style:{width:"50%",fontFamily:"Courier"},
|
|
autoComplete:false,
|
|
selectOnClick:true,
|
|
pageSize:5,
|
|
placeHolder:"Select a New England State",
|
|
value:""
|
|
'>
|
|
<option value="ct">Connecticut</option>
|
|
<option value="me">Maine</option>
|
|
<option value="ma">Massachusetts</option>
|
|
<option value="nh">New Hampshire</option>
|
|
<option value="vt">Vermont</option>
|
|
</select>
|
|
<p>
|
|
This is some text below the boxes. It shouldn't get pushed out of the way when search results get returned.
|
|
A native select tag to test IE bleed through problem:
|
|
</p>
|
|
|
|
<select id="native">
|
|
<option>test for</option>
|
|
<option>IE bleed through</option>
|
|
<option>problem</option>
|
|
</select>
|
|
|
|
Destroy test:<div id="destroyDiv"
|
|
><select id="combo_01" data-dojo-type="$testWidget"
|
|
data-dojo-props='name:"state",
|
|
disabled:true,
|
|
style:{width:"300px"},
|
|
autoComplete:false'>
|
|
<option value="AL">Alabama</option>
|
|
<option value="AK">Alaska</option>
|
|
<option value="AS">American Samoa</option>
|
|
<option value="AZ">Arizona</option>
|
|
<option value="AR">Arkansas</option>
|
|
<option value="AE">Armed Forces Europe</option>
|
|
<option value="AP">Armed Forces Pacific</option>
|
|
</select
|
|
></div>
|
|
|
|
<br>
|
|
<fieldset style="position:relative;border:1px solid black;display:inline;">
|
|
<span style="position:absolute;">Highlight test</span>
|
|
<div style="border:0;margin:1.5em;">
|
|
<span style='white-space:nowrap;'>
|
|
ignoreCase:<select onchange="dijit.byId('highlight').set('ignoreCase', this.value=='true')">
|
|
<option value="true" selected>true</option>
|
|
<option value="false">false</option>
|
|
</select>
|
|
highlightMatch:<select onchange="dijit.byId('highlight').set('highlightMatch', this.value)">
|
|
<option value="first" selected>first</option>
|
|
<option value="all">all</option>
|
|
<option value="none">none</option>
|
|
</select>
|
|
queryExpr:<select onchange="dijit.byId('highlight').set('queryExpr', this.value)">
|
|
<option value="${0}*" selected>${0}*</option>
|
|
<option value="*${0}*">*${0}*</option>
|
|
<option value="*${0}">*${0}</option>
|
|
</select>
|
|
</span>
|
|
<br>
|
|
<span style='white-space:nowrap;'>
|
|
Highlight test:<select id="highlight" data-dojo-type="$testWidget"
|
|
data-dojo-props='ignoreCase:true,
|
|
highlightMatch:"first",
|
|
autoComplete:false,
|
|
required:false,
|
|
labelType:"text",
|
|
onBlur:function(){ this.set("value",null) },
|
|
value:""'>
|
|
<option value="AA">AA</option>
|
|
<option value="Aa">Aa</option>
|
|
<option value="aA">aA</option>
|
|
<option value="aa">aa</option>
|
|
</select>
|
|
</span>
|
|
</div>
|
|
</fieldset>
|
|
|
|
<div id="debugbox"></div>
|
|
</body>
|
|
</html>
|