git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/form/test_MultiSelect.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   2         "http://www.w3.org/TR/html4/loose.dtd">
   3 <html>
   4 <head>
   5         <title>Testing MultiSelect form widget | The Dojo Toolkit</title>
   6
   7         <link rel="stylesheet" type="text/css" media="screen"
   8                 href="../../../dijit/themes/tundra/tundra.css">
   9
  10         <style type="text/css">
  11         @import "../../../dijit/tests/css/dijitTests.css";
  12         #select, #select2 {
  13                 width:255px;
  14                 height:300px;
  15                 overflow:auto;
  16         }
  17         </style>
  18
  19         <script type="text/javascript" djConfig="isDebug:true, parseOnLoad: true"
  20                 src="../../../dojo/dojo.js"></script>
  21
  22         <script type="text/javascript">
  23                 var globalVals = null;
  24
  25                 dojo.require("dijit.form.MultiSelect");
  26
  27                 // needed for tests:
  28                 dojo.require("dijit.form.Form");
  29                 dojo.require("dijit.form.Button");
  30                 dojo.require("dijit.layout.SplitContainer");
  31
  32                 dojo.addOnLoad(function(){
  33
  34                         // ref a clonable node, then split it between two selects
  35                         var c = dojo.query(".clone")[0];
  36                         var l = -1;
  37                         opt = function(){
  38                                 return dojo.byId((++l%2 == 0 ? "select":"select2" ));
  39                         }
  40                         // based on the the 'dijit' object
  41                         for(var i in dijit){
  42                                 var n = opt().appendChild(dojo.clone(c));
  43                                 n.value = n.innerHTML = i;
  44                         }
  45
  46                         // turn any non-dojoType selects into widgets programatically:
  47                         dojo.query("select").forEach(function(n){
  48                                 if(!dijit.byNode(n)){
  49                                                 var foo = new dijit.form.MultiSelect({
  50                                                 },n);
  51                                 }
  52                         });
  53
  54                         // listen to the "move items" buttons
  55                         dojo.query("button.switch")
  56                                 .connect("onclick",function(e){
  57                                         switch(e.target.id.toString()){
  58                                                 case "left" : dijit.byId("select").addSelected(dijit.byId("select2")); break;
  59                                                 case "right" : dijit.byId("select2").addSelected(dijit.byId("select")); break;
  60                                         }
  61                         });
  62
  63                         // listen to the invert buttons
  64                         dojo.query("button.invert")
  65                                 .connect("onclick",function(e){
  66                                         switch(e.target.id.toString()){
  67                                                 case "i1" : dijit.byId("select").invertSelection(); break;
  68                                                 case "i2" : dijit.byId("select2").invertSelection(); break;
  69                                                 case "i3" : dijit.byId("select3").invertSelection(); break;
  70                                         }
  71                         });
  72
  73                         // there is only one debug button
  74                         dojo.query(".debug").connect("onclick",function(e){
  75                                 console.log('select getValue:',dijit.byId("select").getValue());
  76                                 console.log('select2 getValue:',dijit.byId("select2").getValue());
  77                                 console.log('select3 getValue:',dijit.byId("select3").getValue());
  78                         });
  79
  80                         // natural form reaction:
  81                         dojo.connect(dojo.byId("test"),"onsubmit",function(e){
  82                                 e.preventDefault();
  83                         });
  84                         dojo.connect(dojo.byId("formSubmit"),"onclick",function(e){
  85                                 // see what the real form says about our widgets:
  86                                 var vals = dojo.formToJson("test");
  87                                 console.log(vals);
  88                         });
  89                 });
  90         </script>
  91 </head>
  92 <body class="tundra" style="padding:20px">
  93
  94                 <h1 class="testTitle">dijit.form.MultiSelect:</h1>
  95
  96                 <form action="null.html" method="get" id="test">
  97
  98                         <select id="select" multiple="true" size="7" name="easing">
  99                                 <option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option>
 100                         </select>
 101
 102                         <span>
 103                                 <button class="switch" id="left">&lt;</button>
 104                                 <button class="switch" id="right">&gt;</button>
 105                         </span>
 106
 107                         <select id="select2" multiple="true" size="7" name="second">
 108                         </select>
 109
 110                         <br><br>
 111
 112                         <button class='invert' id="i1">invert first list</button>
 113                         <button class="invert" id="i2">invert second list</button>
 114                         <button id="formSubmit">Submit</button>
 115
 116                 </form>
 117
 118                 <button class="debug">call getValue()</button>
 119
 120                 <h3>markup:</h3>
 121
 122                 <select id="select3" multiple="true" name="select3"
 123                         dojoType="dijit.form.MultiSelect"
 124                         style="height:200px; width:175px; border:5px solid #ededed;">
 125
 126                         <option value="TN" selected="true">Tennessee</option>
 127                         <option value="VA">Virginia</option>
 128                         <option value="WA">Washington</option>
 129                         <option value="FL">Florida</option>
 130                         <option value="CA">California</option>
 131
 132                 </select>
 133
 134                 <br><br>
 135                 <button class='invert' id="i3">invert markup list</button>
 136                 <button class='set' id="s1" onclick="dijit.byId('select3').setValue(['VA', 'WA']);">set markup list to [VA, WA]</button>
 137 </body>
 138 </html>