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

   1 <html>
   2         <head>
   3             <script type="text/javascript"
   4                 src="../../../dojo/dojo.js"
   5                 djConfig="isDebug: true, parseOnLoad: true">
   6             </script>
   7             <script type="text/javascript">
   8                         dojo.require("doh.runner");
   9                 dojo.require("dojo.parser");
  10                         dojo.require("dojox.form.DropDownSelect");
  11                         dojo.require("dijit.form.Button");
  12                         dojo.require("dijit.form.Form");
  13
  14                         var numOptions = 0;
  15                         var numChanges = 0;
  16
  17                         dojo.addOnLoad(function(){
  18                                 dojo.connect(s1, "onChange", function(val){
  19                                         console.log("First Select Changed to " + val);
  20                                         numChanges++;
  21                                 });
  22                                 doh.register("tests",
  23                                         [
  24                                                 function test_setValue(t){
  25                                                         t.is({s1:"VA", s2:"CA", s3:"AL", s4: "AK", s5: "move", s6:"", s7:"NY"}, form.getValues());
  26                                                         s1.setAttribute("value", "WA");
  27                                                         t.is("WA", s1.value);
  28                                                         s1.setAttribute("value", "UT");
  29                                                         t.is("TN", s1.value);
  30                                                         t.is(2, numChanges);
  31                                                 }
  32                                         ]
  33                                 );
  34                                 doh.run();
  35                         });
  36                 </script>
  37                 <style>
  38                         @import url(../../../dojo/resources/dojo.css);
  39                         @import url(../../../dijit/themes/tundra/tundra.css);
  40                         @import url(../resources/DropDownSelect.css);
  41                         @import url(../../../dijit/tests/css/dijitTests.css);
  42                 </style>
  43                 <style>
  44                 .ark { text-decoration: underline; }
  45                 </style>
  46         </head>
  47         <body class="tundra">
  48                 <h1 class="testTitle">Test: dojox.form.DropDownSelect</h1>
  49                 <h2>Automated test</h2>
  50                 <form dojoType="dijit.form.Form" jsId="form">
  51                         <h4 class="testSubtitle">Setting Defaults</h4>
  52                         <select jsId="s1" name="s1" dojoType="dojox.form.DropDownSelect">
  53                                 <option value="TN">Tennessee</option>
  54                                 <option value="VA" selected="selected">Virginia</option>
  55                                 <option value="WA">Washington</option>
  56                                 <option value="FL">Florida</option>
  57                                 <option value="CA">California</option>
  58                         </select>
  59                         <select jsId="s2" name="s2" value="CA" dojoType="dojox.form.DropDownSelect">
  60                                 <option value="AL">Alabama</option>
  61                                 <option value="AK">Alaska</option>
  62                                 <option value="AZ">Arizona</option>
  63                                 <option value="AR">Arkansas</option>
  64                                 <option value="CA">California</option>
  65                         </select>
  66                         <select jsId="s3" name="s3" dojoType="dojox.form.DropDownSelect">
  67                                 <option value="AL">Alabama</option>
  68                                 <option value="AK">Alaska</option>
  69                                 <option type="separator"></option>
  70                                 <option value="AZ">Arizona</option>
  71                                 <option value="AR">Arkansas</option>
  72                                 <option type="separator"></option>
  73                                 <option value="CA">California</option>
  74                         </select>
  75                 <hr>
  76                         <h4 class="testSubtitle">Rich Text (Need to use divs and spans - since browsers hack selects to pieces)</h4>
  77                         <div jsId="s4" name="s4" value="AK" dojoType="dojox.form.DropDownSelect">
  78                                 <span value="AL"><b>Alabama</b></span>
  79                                 <span value="AK"><font color="red">A</font><font color="orange">l</font><font color="yellow">a</font><font color="green">s</font><font color="blue">k</font><font color="purple">a</font></span>
  80                                 <span value="AZ"><i>Arizona</i></span>
  81                                 <span value="AR"><span class="ark">Arkansas</span></span>
  82                                 <span 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>
  83                                 <span value="NM">New<br>&nbsp;&nbsp;Mexico</span>
  84                         </div>
  85                         <div jsId="s5" name="s5" value="move" dojoType="dojox.form.DropDownSelect">
  86                                 <span value="copy"><img style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndCopy.png" /> Copy</span>
  87                                 <span value="move"><img  style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndMove.png" /> Move</span>
  88                                 <span value="nocopy"><img  style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoCopy.png" /> No Copy</span>
  89                                 <span value="nomove"><img  style="vertical-align: middle;margin-top: 1px;margin-bottom:1px;" src="../../../dijit/themes/tundra/images/dndNoMove.png" /> No Move</span>
  90                         </div>
  91                 <hr>
  92                         <h4 class="testSubtitle">Empty</h4>
  93                         <select jsId="s6" name="s6" dojoType="dojox.form.DropDownSelect">
  94                         </select>
  95                         <hr>
  96                 <h4 class="testSubtitle">Single Item</h4>
  97                         <select jsId="s7" name="s7" dojoType="dojox.form.DropDownSelect">
  98                                 <option value="NY">New York</option>
  99                         </select>
 100                 <hr>
 101                         <button dojoType="dijit.form.Button">
 102                                 <script type="dojo/method" event="onClick">
 103                                         console.dir(form.getValues());
 104                                 </script>
 105                                 Get Values
 106                         </button>
 107                         <button dojoType="dijit.form.Button">
 108                                 <script type="dojo/method" event="onClick">
 109                                         numOptions++;
 110                                         s6.addOption(numOptions + "", "Option " + numOptions);
 111                                 </script>
 112                                 Add Option
 113                         </button>
 114                         <button dojoType="dijit.form.Button">
 115                                 <script type="dojo/method" event="onClick">
 116                                         s6.removeOption(0);
 117                                 </script>
 118                                 Remove Top Option
 119                         </button>
 120                         <button dojoType="dijit.form.Button">
 121                                 <script type="dojo/method" event="onClick">
 122                                         s4.setAttribute("disabled", !s4.disabled);
 123                                 </script>
 124                                 Toggle Disabled
 125                         </button>
 126                 </form>
 127         </body>
 128 </html>