dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
201 lines (176 loc) • 6.65 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing MultiSelect form widget | The Dojo Toolkit</title>
<style type="text/css">
#select, #select2 {
width:255px;
height:300px;
overflow:auto;
}
div#sel1, div#sel2 {
float: left;
}
div#leftRightButtons {
float: left;
padding: 10em 0.5em 0 0.5em;
}
</style>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/query",
"dojo/dom-form",
"dojo/_base/json",
"dojo/_base/array",
"dojo/_base/lang",
"dojo/dom",
"dojo/dom-class",
"dojo/parser",
"dijit/dijit",
"dijit/focus",
"dijit/registry",
"dijit/form/MultiSelect",
"dijit/form/Button",
"dijit/form/Form",
"dijit/tests/helpers",
"dojo/domReady!"
], function(doh, query, domForm, json, array, lang, dom, domClass, parser,
dijit, focus, registry, MultiSelect, Button, Form, helpers){
parser.parse();
// Add mode=test to the URL to run unit tests.
var test = /mode=test/i.test(window.location.href);
// ref a clonable node, then split it between two selects
var c = query(".clone")[0];
var l = -1;
opt = function(){
return dom.byId((++l % 2 == 0 ? "select" : "select2" ));
};
// based on the the 'dijit' object
var count=0;
var select1Values = "dojo._defaultEasing";
for(var i in dijit){
var n = opt().appendChild(lang.clone(c));
n.value = count++;
if(l % 2 == 0){
select1Values += "," + i;
}
n.innerHTML = i;
}
// turn any non-data-dojo-type selects into widgets programatically:
query("select").forEach(function(n){
if(!dijit.byNode(n)){
var foo = new dijit.form.MultiSelect({ name: n.name }, n).startup();
}
});
// listen to the "move items" buttons
query("button.switch")
.on("click",function(e){
switch(e.target.id.toString()){
case "left" : registry.byId("select").addSelected(registry.byId("select2")); break;
case "right" : registry.byId("select2").addSelected(registry.byId("select")); break;
}
});
// listen to the invert buttons
query("button.invert")
.on("click",function(e){
switch(e.target.id.toString()){
case "i1" : registry.byId("select").invertSelection(); break;
case "i2" : registry.byId("select2").invertSelection(); break;
case "i3" : registry.byId("select3").invertSelection(); break;
}
});
// there is only one debug button
query(".debug").on("click",function(e){
console.log('select value:',registry.byId("select").get('value') + '/' + registry.byId("select").value);
console.log('select2 value:',registry.byId("select2").get('value') + '/' + registry.byId("select2").value);
console.log('select3 value:',registry.byId("select3").get('value') + '/' + registry.byId("select3").value);
});
query("#formSubmit").on("click", function(e){
// see what the real form says about our widgets:
var vals = domForm.toJson("test");
console.log(vals);
});
query("#s1").on("click", function(e){
registry.byId('select3').set('value', ['VA', 'WA']);
});
if(test){
doh.register("API", [
function initial(t){
var vals = json.fromJson(domForm.toJson("test"));
t.is(select1Values, query("option", registry.byId('select').containerNode).map(function(n){ return n.innerHTML; }).join(','));
t.is("", registry.byId('select').get('value').join(''), 'easing widget value');
t.is("", registry.byId('select2').get('value').join(''), 'second widget value');
t.is("TN", registry.byId('select3').get('value').join(''), 'select3 widget value');
t.is("", vals.easing, 'easing form value');
t.is("", vals.second, 'second form value');
t.is("TN", vals.select3, 'select3 form value');
t.t(domClass.contains(registry.byId('select2').domNode, "dijitMultiSelect"), 'second base class');
t.t(domClass.contains(registry.byId('select3').domNode, "dijitMultiSelect"), 'select3 base class');
t.t(domClass.contains(registry.byId('select3').domNode, "addedClass"), 'select3 added class');
},
{
name: "set",
timeout: 1000,
runTest: function(t){
var d = new doh.Deferred();
registry.byId('select3').set('value', ['TN','FL']);
setTimeout(d.getTestCallback(function(){
var vals = json.fromJson(domForm.toJson("test"));
t.is("TN,FL", registry.byId('select3').get('value').join(','), "select3 widget value");
t.is("TN,FL", vals.select3, "select3 form value");
}), 500);
return d;
}
}
]);
doh.run();
}
});
</script>
</head>
<body style="padding:20px" role="main">
<h1 class="testTitle">dijit.form.MultiSelect:</h1>
<p>Select one or more items in First or Second list and move them between lists using the buttons provided.</p>
<form action="#" method="get" id="test" onsubmit="return false">
<div>
<div id="sel1" role="presentation">
<label for="select">First list:</label><br>
<select id="select" multiple size="7" name="easing" tabindex="1">
<option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option>
</select>
</div>
<div id="leftRightButtons" role="presentation">
<span>
<button class="switch" id="left" title="Move Items to First list"><</button>
<button class="switch" id="right" title="Move Items to Second list">></button>
</span>
</div>
<div id="sel2" role="presentation">
<label for="select2">Second list:</label><br>
<select id="select2" multiple size="7" name="second">
</select>
</div>
</div>
<br style="clear: both;"/><br>
<button class='invert' id="i1">invert first list</button>
<button class="invert" id="i2">invert second list</button>
<button id="formSubmit" type="submit">Submit</button>
<button class="debug">call get('value')</button>
<h3><label for="select3">markup:</label></h3>
<select class="addedClass" id="select3" multiple data-dojo-type="dijit/form/MultiSelect"
data-dojo-props='name:"select3",style:{height:"200px", width:"175px", border:"5px solid #ededed"}'>
<option value="TN" selected>Tennessee</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
</form>
<br><br>
<button class='invert' id="i3">invert markup list</button>
<button class='set' id="s1">set markup list to [VA, WA]</button>
</body>
</html>