|
Generated by diff2html © Yves Bailly, MandrakeSoft S.A. 2001 diff2html is licensed under the GNU GPL. |
| form.html | formw3c.html | |||
|---|---|---|---|---|
|
243 lines 8263 bytes Last modified : Mon May 12 19:38:49 2008 |
249 lines 8843 bytes Last modified : Fri Jul 11 14:27:31 2008 |
|||
| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" | 1 | <?xml version="1.0" encoding="utf-8"?> | |
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> | 2 | <!DOCTYPE html PUBLIC "-//W3X//DTD XHTML 1.1 plus YADTD.INFO-yadtdeUIWw4-BETA 1.0//EN" "http://yadtd.info/DTD/beta/yadtdeUIWw4-flat.dtd"> | |
| 3 | <html> | 3 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| 4 | <head> | 4 | <head> | |
| 5 | <title>Dojo Form Widgets Test</title> | 5 | <title>Dojo Form Widgets Test</title> | |
| 6 | 6 | |||
| 7 | <style type="text/css"> | 7 | <style type="text/css"> | |
| 8 | @import "../../dojo/resources/dojo.css"; | 8 | @import "../../dojo/resources/dojo.css"; | |
| 9 | @import "../themes/tundra/tundra.css"; | 9 | @import "../themes/tundra/tundra.css"; | |
| 10 | @import "../themes/tundra/tundra_rtl.css"; | 10 | @import "../themes/tundra/tundra_rtl.css"; | |
| 11 | @import "../tests/css/dijitTests.css"; | 11 | @import "../tests/css/dijitTests.css"; | |
| 12 | 12 | |||
| 13 | .formQuestion { | 13 | .formQuestion { | |
| 14 | background-color:#d0e3f5; | 14 | background-color:#d0e3f5; | |
| 15 | padding:0.3em; | 15 | padding:0.3em; | |
| 16 | font-weight:900; | 16 | font-weight:900; | |
| 17 | font-family:Verdana, Arial, sans-serif; | 17 | font-family:Verdana, Arial, sans-serif; | |
| 18 | font-size:0.8em; | 18 | font-size:0.8em; | |
| 19 | color:#5a5a5a; | 19 | color:#5a5a5a; | |
| 20 | } | 20 | } | |
| 21 | .formAnswer { | 21 | .formAnswer { | |
| 22 | background-color:#f5eede; | 22 | background-color:#f5eede; | |
| 23 | padding:0.3em; | 23 | padding:0.3em; | |
| 24 | margin-bottom:1em; | 24 | margin-bottom:1em; | |
| 25 | width: 100%; | 25 | width: 100%; | |
| 26 | } | 26 | } | |
| 27 | .pageSubContentTitle { | 27 | .pageSubContentTitle { | |
| 28 | color:#8e8e8e; | 28 | color:#8e8e8e; | |
| 29 | font-size:1em; | 29 | font-size:1em; | |
| 30 | font-family:Verdana, Arial, sans-serif; | 30 | font-family:Verdana, Arial, sans-serif; | |
| 31 | margin-bottom:0.75em; | 31 | margin-bottom:0.75em; | |
| 32 | } | 32 | } | |
| 33 | body .short { | 33 | body .short { | |
| 34 | width: 5em; | 34 | width: 5em; | |
| 35 | } | 35 | } | |
| 36 | body .medium { | 36 | body .medium { | |
| 37 | width: 10em; | 37 | width: 10em; | |
| 38 | } | 38 | } | |
| 39 | body .long { | 39 | body .long { | |
| 40 | width: 20em; | 40 | width: 20em; | |
| 41 | } | 41 | } | |
| 42 | .firstLabel { | 42 | .firstLabel { | |
| 43 | display: inline-block; | 43 | display: inline-block; | |
| 44 | display: -moz-inline-box; | 44 | display: -moz-inline-box; | |
| 45 | width: 10em; | 45 | width: 10em; | |
| 46 | min-width: 10em; | 46 | min-width: 10em; | |
| 47 | } | 47 | } | |
| 48 | .secondLabel { | 48 | .secondLabel { | |
| 49 | width: auto; | 49 | width: auto; | |
| 50 | margin-left: 5em; | 50 | margin-left: 5em; | |
| 51 | margin-right: 1em; | 51 | margin-right: 1em; | |
| 52 | } | 52 | } | |
| 53 | fieldset label { | 53 | fieldset label { | |
| 54 | margin-right: 1em; | 54 | margin-right: 1em; | |
| 55 | } | 55 | } | |
| 56 | .noticeMessage { | 56 | .noticeMessage { | |
| 57 | display: block; | 57 | display: block; | |
| 58 | float: right; | 58 | float: right; | |
| 59 | font-weight: normal; | 59 | font-weight: normal; | |
| 60 | font-family:Arial, Verdana, sans-serif; | 60 | font-family:Arial, Verdana, sans-serif; | |
| 61 | color:#663; | 61 | color:#663; | |
| 62 | font-size:0.9em; | 62 | font-size:0.9em; | |
| 63 | } | 63 | } | |
| 64 | .dj_ie .dijitSlider .dijitRuleContainer { | 64 | .dj_ie .dijitSlider .dijitRuleContainer { | |
| 65 | z-index: 1; | 65 | z-index: 1; | |
| 66 | } | 66 | } | |
| 67 | </style> | 67 | </style> | |
| 68 | 68 | |||
| 69 | <script type="text/javascript" src="../../dojo/dojo.js" | 69 | <script type="text/javascript" src="../../dojo/dojo.js" | |
| 70 | djConfig="isDebug: false, parseOnLoad: true"></script> | 70 | djConfig="isDebug: false, parseOnLoad: true"></script> | |
| 71 | <script type="text/javascript" src="../../dojo/formw3c.js">/* this layer is just to make the page load faster */</script> | |||
| 71 | <script type="text/javascript"> | 72 | <script type="text/javascript"> | |
| 72 | dojo.require("dijit.form.Form"); | 73 | dojo.require("dijit.form.Form"); | |
| 73 | dojo.require("dijit.form.ValidationTextBox"); | 74 | dojo.require("dijit.form.ValidationTextBox"); | |
| 74 | dojo.require("dijit.form.ComboBox"); | 75 | dojo.require("dijit.form.ComboBox"); | |
| 75 | dojo.require("dijit.form.FilteringSelect"); | 76 | dojo.require("dijit.form.FilteringSelect"); | |
| 76 | dojo.require("dijit.form.CheckBox"); | 77 | dojo.require("dijit.form.CheckBox"); | |
| 77 | dojo.require("dijit.form.DateTextBox"); | 78 | dojo.require("dijit.form.DateTextBox"); | |
| 78 | dojo.require("dijit.form.CurrencyTextBox"); | 79 | dojo.require("dijit.form.CurrencyTextBox"); | |
| 79 | dojo.require("dijit.form.NumberSpinner"); | 80 | dojo.require("dijit.form.NumberSpinner"); | |
| 80 | dojo.require("dijit.form.Slider"); | 81 | dojo.require("dijit.form.Slider"); | |
| 81 | dojo.require("dijit.form.Textarea"); | 82 | dojo.require("dijit.form.Textarea"); | |
| 82 | dojo.require("dijit.Editor"); | 83 | dojo.require("dijit.Editor"); | |
| 83 | dojo.require("dijit.form.Button"); | 84 | dojo.require("dijit.form.Button"); | |
| 84 | dojo.require("dojo.data.ItemFileReadStore"); | 85 | dojo.require("dojo.data.ItemFileReadStore"); | |
| 85 | dojo.require("dojo.parser"); // scan page for widgets and instantiate them | 86 | dojo.require("dojo.parser"); // scan page for widgets and instantiate them | |
| 86 | 87 | |||
| 87 | // make dojo.toJson() print dates correctly (this feels a bit dirty) | 88 | // make dojo.toJson() print dates correctly (this feels a bit dirty) | |
| 88 | Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});}; | 89 | Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});}; | |
| 89 | </script> | 90 | </script> | |
| 90 | </head> | 91 | </head> | |
| 91 | <body class="tundra"> | 92 | <body class="tundra"> | |
| 93 | <p> | |||
| 94 | <a href="http://validator.w3.org/check?uri=referer"><img | |||
| 95 | src="http://www.w3.org/Icons/valid-xhtml11-blue" | |||
| 96 | alt="Valid XHTML 1.1 (plus Dojo attributes)" height="31" width="88" /></a> | |||
| 97 | </p> | |||
| 92 | <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" | 98 | <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore" | |
| 93 | url="../tests/_data/states.json"></div> | 99 | url="../tests/_data/states.json"></div> | |
| 94 | 100 | |||
| 95 | <h2 class="pageSubContentTitle">Job Application Form</h2> | 101 | <h2 class="pageSubContentTitle">Job Application Form</h2> | |
| 96 | <p>This is just a little demo of dijit's form widgets</p> | 102 | <p>This is just a little demo of dijit's form widgets</p> | |
| 97 | <form dojoType="dijit.form.Form" id="myForm" | 103 | <form dojoType="dijit.form.Form" id="myForm" action="javascript:void(0);" | |
| 98 | onsubmit="alert('Execute form w/values:\n'+dojo.toJson(this.getValues(),true));return confirm('Show form values in the URL?')"> | 104 | onsubmit="alert('Execute form w/values:\n'+dojo.toJson(this.getValues(),true));return confirm('Show form values in the URL?')"> | |
| 99 | <div class="formQuestion"> | 105 | <div class="formQuestion"> | |
| 100 | <span class="noticeMessage"> | 106 | <span class="noticeMessage"> | |
| 101 | As you type in the text below, notice how your input is auto | 107 | As you type in the text below, notice how your input is auto | |
| 102 | corrected and also the auto completion on the state field. | 108 | corrected and also the auto completion on the state field. | |
| 103 | </span> | 109 | </span> | |
| 104 | <span>Name And Address</span> | 110 | <span>Name And Address</span> | |
| 105 | </div> | 111 | </div> | |
| 106 | <div class="formAnswer"> | 112 | <div class="formAnswer"> | |
| 107 | <label class="firstLabel" for="name">Name *</label> | 113 | <label class="firstLabel" for="name">Name *</label> | |
| 108 | <input type="text" id="name" name="name" class="medium" | 114 | <input type="text" id="name" name="name" class="medium" | |
| 109 | dojoType="dijit.form.ValidationTextBox" | 115 | dojoType="dijit.form.ValidationTextBox" | |
| 110 | required="true" | 116 | required="true" | |
| 111 | ucfirst="true" invalidMessage=""/> | 117 | ucfirst="true" invalidMessage=""/> | |
| 112 | <br> | 118 | <br /> | |
| 113 | 119 | |||
| 114 | <label class="firstLabel" for="address">Address *</label> | 120 | <label class="firstLabel" for="address">Address *</label> | |
| 115 | <input type="text" id="address" name="address" class="long" | 121 | <input type="text" id="address" name="address" class="long" | |
| 116 | dojoType="dijit.form.ValidationTextBox" | 122 | dojoType="dijit.form.ValidationTextBox" | |
| 117 | required="true" | 123 | required="true" | |
| 118 | trim="true" | 124 | trim="true" | |
| 119 | ucfirst="true" /> | 125 | ucfirst="true" /> | |
| 120 | <br> | 126 | <br /> | |
| 121 | 127 | |||
| 122 | <label class="firstLabel" for="city">City *</label> | 128 | <label class="firstLabel" for="city">City *</label> | |
| 123 | <select dojoType="dijit.form.ComboBox" | 129 | <select id="city" dojoType="dijit.form.ComboBox" | |
| 124 | value="" | 130 | value="" | |
| 125 | autocomplete="true" | 131 | autocomplete="true" | |
| 126 | hasDownArrow="false" | 132 | hasDownArrow="false" | |
| 127 | > | 133 | > | |
| 128 | <option></option> | 134 | <option></option> | |
| 129 | <option>Chicago</option> | 135 | <option>Chicago</option> | |
| 130 | <option>Los Angeles</option> | 136 | <option>Los Angeles</option> | |
| 131 | <option>New York</option> | 137 | <option>New York</option> | |
| 132 | <option>San Francisco</option> | 138 | <option>San Francisco</option> | |
| 133 | <option>Seattle</option> | 139 | <option>Seattle</option> | |
| 134 | </select> | 140 | </select> | |
| 135 | 141 | |||
| 136 | <label class="secondLabel" for="state">State</label> | 142 | <label class="secondLabel" for="state">State</label> | |
| 137 | <input dojoType="dijit.form.FilteringSelect" | 143 | <input dojoType="dijit.form.FilteringSelect" | |
| 138 | store="stateStore" class="medium" id="state" name="state" /> | 144 | store="stateStore" class="medium" id="state" name="state" /> | |
| 139 | 145 | |||
| 140 | <label class="secondLabel" for="zip">Zip *</label> | 146 | <label class="secondLabel" for="zip">Zip *</label> | |
| 141 | <input type="text" id="zip" name="zip" class="short" | 147 | <input type="text" id="zip" name="zip" class="short" | |
| 142 | dojoType="dijit.form.ValidationTextBox" | 148 | dojoType="dijit.form.ValidationTextBox" | |
| 143 | trim="true" | 149 | trim="true" | |
| 144 | required="true" | 150 | required="true" | |
| 145 | regExp="[0-9][0-9][0-9][0-9][0-9]" | 151 | regExp="[0-9][0-9][0-9][0-9][0-9]" | |
| 146 | invalidMessage="5 digit zipcode (ex: 23245)"/> | 152 | invalidMessage="5 digit zipcode (ex: 23245)"/> | |
| 147 | <br> | 153 | <br /> | |
| 148 | 154 | |||
| 149 | <label class="firstLabel" for="dob">DOB *</label> | 155 | <label class="firstLabel" for="dob">DOB *</label> | |
| 150 | <input id="dob" name="dateOfBirth" dojoType="dijit.form.DateTextBox" required=true/> | 156 | <input id="dob" name="dateOfBirth" dojoType="dijit.form.DateTextBox" required="true" /> | |
| 151 | 157 | |||
| 152 | </div> | 158 | </div> | |
| 153 | 159 | |||
| 154 | <div class="formQuestion"> | 160 | <div class="formQuestion"> | |
| 155 | <span class="noticeMessage">Custom checkboxes and radio buttons...</span> | 161 | <span class="noticeMessage">Custom checkboxes and radio buttons...</span> | |
| 156 | <span>Desired position</span> | 162 | <span>Desired position</span> | |
| 157 | </div> | 163 | </div> | |
| 158 | <div class="formAnswer"> | 164 | <div class="formAnswer"> | |
| 159 | <label class="firstLabel" for="position">Position</label> | 165 | <label class="firstLabel" for="position">Position</label> | |
| 160 | <fieldset id="position" class="dijitInline"> | 166 | <fieldset id="position" class="dijitInline"> | |
| 161 | <input type="checkBox" name="position" id="it" value="it" dojoType="dijit.form.CheckBox" /> <label for="it">IT</label> | 167 | <input type="checkbox" name="position" id="it" value="it" dojoType="dijit.form.CheckBox" /> <label for="it">IT</label> | |
| 162 | <input type="checkBox" name="position" id="marketing" value="marketing" dojoType="dijit.form.CheckBox" /> <label for="marketing">Marketing</label> | 168 | <input type="checkbox" name="position" id="marketing" value="marketing" dojoType="dijit.form.CheckBox" /> <label for="marketing">Marketing</label> | |
| 163 | <input type="checkBox" name="position" id="business" value="business" dojoType="dijit.form.CheckBox" /> <label for="business" style="margin-right: 7em;">Business</label> | 169 | <input type="checkbox" name="position" id="business" value="business" dojoType="dijit.form.CheckBox" /> <label for="business" style="margin-right: 7em;">Business</label> | |
| 164 | </fieldset> | 170 | </fieldset> | |
| 165 | 171 | |||
| 166 | <label class="secondLabel" for="hours">Hours</label> | 172 | <label class="secondLabel" for="hours">Hours</label> | |
| 167 | <fieldset id="hours" class="dijitInline"> | 173 | <fieldset id="hours" class="dijitInline"> | |
| 168 | <input type="radio" name="hours" id="full" value="full" dojoType="dijit.form.RadioButton" /> <label for="full">Full time</label> | 174 | <input type="radio" name="hours" id="full" value="full" dojoType="dijit.form.RadioButton" /> <label for="full">Full time</label> | |
| 169 | <input type="radio" name="hours" id="part" value="part" dojoType="dijit.form.RadioButton" /> <label for="part">Part time</label> | 175 | <input type="radio" name="hours" id="part" value="part" dojoType="dijit.form.RadioButton" /> <label for="part">Part time</label> | |
| 170 | </fieldset> | 176 | </fieldset> | |
| 171 | </div> | 177 | </div> | |
| 172 | 178 | |||
| 173 | <div class="formQuestion"> | 179 | <div class="formQuestion"> | |
| 174 | <span class="noticeMessage">slider and spinner ...</span> | 180 | <span class="noticeMessage">slider and spinner ...</span> | |
| 175 | <span>Education and Experience</span> | 181 | <span>Education and Experience</span> | |
| 176 | </div> | 182 | </div> | |
| 177 | <div class="formAnswer"> | 183 | <div class="formAnswer"> | |
| 178 | <table class="dijitReset"> | 184 | <table class="dijitReset"> | |
| 179 | <tr> | 185 | <tr> | |
| 180 | <td> | 186 | <td> | |
| 181 | <label class="firstLabel" for="school">Education level</label> | 187 | <label class="firstLabel" for="school">Education level</label> | |
| 182 | </td> | 188 | </td> | |
| 183 | <td style="padding-left: 2em;"> | 189 | <td style="padding-left: 2em;"> | |
| 184 | <span dojoType="dijit.form.HorizontalSlider" id="school" name="school" | 190 | <div dojoType="dijit.form.HorizontalSlider" id="school" name="school" | |
| 185 | minimum="1" | 191 | minimum="1" | |
| 186 | value="2" | 192 | value="2" | |
| 187 | maximum="4" | 193 | maximum="4" | |
| 188 | discreteValues="4" | 194 | discreteValues="4" | |
| 189 | showButtons="false" | 195 | showButtons="false" | |
| 190 | style="width:200px; height: 40px;" | 196 | style="width:200px; height: 40px;" | |
| 191 | > | 197 | > | |
| 192 | <span dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=4 style="height:5px;"></span> | 198 | <span dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count="4" style="height:5px;"></span> | |
| 193 | <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;color:gray;"> | 199 | <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration" style="height:1em;font-size:75%;color:gray;"> | |
| 194 | <li>high school</li> | 200 | <li>high school</li> | |
| 195 | <li>college</li> | 201 | <li>college</li> | |
| 196 | <li>masters</li> | 202 | <li>masters</li> | |
| 197 | <li>PhD</li> | 203 | <li>PhD</li> | |
| 198 | </ol> | 204 | </ol> | |
| 199 | </span> | 205 | </div> | |
| 200 | </td> | 206 | </td> | |
| 201 | <td> | 207 | <td> | |
| 202 | <label class="secondLabel" for="experience">Work experience (years, 0-40)</label> | 208 | <label class="secondLabel" for="experience">Work experience (years, 0-40)</label> | |
| 203 | </td> | 209 | </td> | |
| 204 | <td> | 210 | <td> | |
| 205 | <input dojoType="dijit.form.NumberSpinner" | 211 | <input dojoType="dijit.form.NumberSpinner" | |
| 206 | id="experience" name="experience" class="short" | 212 | id="experience" name="experience" class="short" | |
| 207 | value="1" | 213 | value="1" | |
| 208 | constraints="{min: 0, max:40, places:0}" | 214 | constraints="{min: 0, max:40, places:0}" | |
| 209 | size=3> | 215 | size="3" /> | |
| 210 | </td> | 216 | </td> | |
| 211 | </tr> | 217 | </tr> | |
| 212 | </table> | 218 | </table> | |
| 213 | </div> | 219 | </div> | |
| 214 | 220 | |||
| 215 | <div class="formQuestion"> | 221 | <div class="formQuestion"> | |
| 216 | <span class="noticeMessage">Rich text editor that expands as you type in text</span> | 222 | <span class="noticeMessage">Rich text editor that expands as you type in text</span> | |
| 217 | <label for="description">Self description</label> | 223 | <label for="description">Self description</label> | |
| 218 | </div> | 224 | </div> | |
| 219 | <div class="formAnswer"> | 225 | <div class="formAnswer"> | |
| 220 | <textarea dojoType="dijit.Editor" minHeight="5em" id="description" name="description"> | 226 | <textarea dojoType="dijit.Editor" minHeight="5em" id="description" name="description" rows="auto" cols="auto"> | |
| 221 | Write a brief summary of <i>your</i> job skills... using <b>rich</b> text. | 227 | Write a brief summary of <i>your</i> job skills... using <b>rich</b> text. | |
| 222 | </textarea> | 228 | </textarea> | |
| 223 | </div> | 229 | </div> | |
| 224 | 230 | |||
| 225 | <div class="formQuestion"> | 231 | <div class="formQuestion"> | |
| 226 | <span class="noticeMessage">Text area that expands as you type in text</span> | 232 | <span class="noticeMessage">Text area that expands as you type in text</span> | |
| 227 | <label for="references">References</label> | 233 | <label for="references">References</label> | |
| 228 | </div> | 234 | </div> | |
| 229 | <div class="formAnswer"> | 235 | <div class="formAnswer"> | |
| 230 | <textarea dojoType="dijit.form.Textarea" id="references" name="references"> | 236 | <textarea dojoType="dijit.form.Textarea" id="references" name="references" rows="auto" cols="auto"> | |
| 231 | Write your references here (plain text) | 237 | Write your references here (plain text) | |
| 232 | </textarea> | 238 | </textarea> | |
| 233 | </div> | 239 | </div> | |
| 234 | 240 | |||
| 235 | <center> | 241 | <center> | |
| 236 | <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave" type=submit> | 242 | <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave" type="submit"> | |
| 237 | OK | 243 | OK | |
| 238 | </button> | 244 | </button> | |
| 239 | </center> | 245 | </center> | |
| 240 | </form> | 246 | </form> | |
| 241 | </body> | 247 | </body> | |
| 242 | </html> | 248 | </html> | |
| 243 | 249 |