+++ /dev/null
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"\r
- "http://www.w3.org/TR/html4/strict.dtd">\r
-<html>\r
- <head>\r
- <title>Dojo Form Widgets Test</title>\r
-\r
- <style type="text/css">\r
- @import "../../dojo/resources/dojo.css";\r
- @import "../themes/tundra/tundra.css";\r
- @import "../themes/tundra/tundra_rtl.css";\r
- @import "../tests/css/dijitTests.css";\r
-\r
- .formQuestion {\r
- background-color:#d0e3f5;\r
- padding:0.3em;\r
- font-weight:900;\r
- font-family:Verdana, Arial, sans-serif;\r
- font-size:0.8em;\r
- color:#5a5a5a;\r
- }\r
- .formAnswer {\r
- background-color:#f5eede;\r
- padding:0.3em;\r
- margin-bottom:1em;\r
- width: 100%;\r
- }\r
- .pageSubContentTitle {\r
- color:#8e8e8e;\r
- font-size:1em;\r
- font-family:Verdana, Arial, sans-serif;\r
- margin-bottom:0.75em;\r
- }\r
- body .short {\r
- width: 5em;\r
- }\r
- body .medium {\r
- width: 10em;\r
- }\r
- body .long {\r
- width: 20em;\r
- }\r
- .firstLabel {\r
- display: inline-block;\r
- display: -moz-inline-box;\r
- width: 10em;\r
- min-width: 10em;\r
- }\r
- .secondLabel {\r
- width: auto;\r
- margin-left: 5em;\r
- margin-right: 1em;\r
- }\r
- fieldset label {\r
- margin-right: 1em;\r
- }\r
- .noticeMessage {\r
- display: block;\r
- float: right;\r
- font-weight: normal;\r
- font-family:Arial, Verdana, sans-serif;\r
- color:#663;\r
- font-size:0.9em;\r
- }\r
- .dj_ie .dijitSlider .dijitRuleContainer {\r
- z-index: 1;\r
- }\r
- </style>\r
- \r
- <script type="text/javascript" src="../../dojo/dojo.js"\r
- djConfig="isDebug: false, parseOnLoad: true"></script>\r
- <script type="text/javascript">\r
- dojo.require("dijit.form.Form");\r
- dojo.require("dijit.form.ValidationTextBox");\r
- dojo.require("dijit.form.ComboBox");\r
- dojo.require("dijit.form.FilteringSelect");\r
- dojo.require("dijit.form.CheckBox");\r
- dojo.require("dijit.form.DateTextBox");\r
- dojo.require("dijit.form.CurrencyTextBox");\r
- dojo.require("dijit.form.NumberSpinner");\r
- dojo.require("dijit.form.Slider");\r
- dojo.require("dijit.form.Textarea");\r
- dojo.require("dijit.Editor");\r
- dojo.require("dijit.form.Button");\r
- dojo.require("dojo.data.ItemFileReadStore");\r
- dojo.require("dojo.parser"); // scan page for widgets and instantiate them\r
-\r
- // make dojo.toJson() print dates correctly (this feels a bit dirty)\r
- Date.prototype.json = function(){ return dojo.date.stamp.toISOString(this, {selector: 'date'});};\r
- </script>\r
- </head>\r
- <body class="tundra">\r
- <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"\r
- url="../tests/_data/states.json"></div>\r
-\r
- <h2 class="pageSubContentTitle">Job Application Form</h2>\r
- <p>This is just a little demo of dijit's form widgets</p>\r
- <form dojoType="dijit.form.Form" id="myForm"\r
- onsubmit="alert('Execute form w/values:\n'+dojo.toJson(this.getValues(),true));return confirm('Show form values in the URL?')">\r
- <div class="formQuestion">\r
- <span class="noticeMessage">\r
- As you type in the text below, notice how your input is auto\r
- corrected and also the auto completion on the state field.\r
- </span>\r
- <span>Name And Address</span>\r
- </div>\r
- <div class="formAnswer">\r
- <label class="firstLabel" for="name">Name *</label>\r
- <input type="text" id="name" name="name" class="medium"\r
- dojoType="dijit.form.ValidationTextBox"\r
- required="true" \r
- ucfirst="true" invalidMessage=""/>\r
- <br>\r
-\r
- <label class="firstLabel" for="address">Address *</label>\r
- <input type="text" id="address" name="address" class="long"\r
- dojoType="dijit.form.ValidationTextBox"\r
- required="true"\r
- trim="true" \r
- ucfirst="true" />\r
- <br>\r
-\r
- <label class="firstLabel" for="city">City *</label>\r
- <select dojoType="dijit.form.ComboBox"\r
- value=""\r
- autocomplete="true"\r
- hasDownArrow="false"\r
- >\r
- <option></option>\r
- <option>Chicago</option>\r
- <option>Los Angeles</option>\r
- <option>New York</option>\r
- <option>San Francisco</option>\r
- <option>Seattle</option>\r
- </select>\r
-\r
- <label class="secondLabel" for="state">State</label>\r
- <input dojoType="dijit.form.FilteringSelect"\r
- store="stateStore" class="medium" id="state" name="state" />\r
-\r
- <label class="secondLabel" for="zip">Zip *</label>\r
- <input type="text" id="zip" name="zip" class="short"\r
- dojoType="dijit.form.ValidationTextBox"\r
- trim="true" \r
- required="true"\r
- regExp="[0-9][0-9][0-9][0-9][0-9]"\r
- invalidMessage="5 digit zipcode (ex: 23245)"/>\r
- <br>\r
-\r
- <label class="firstLabel" for="dob">DOB *</label>\r
- <input id="dob" name="dateOfBirth" dojoType="dijit.form.DateTextBox" required=true/>\r
- \r
- </div>\r
-\r
- <div class="formQuestion">\r
- <span class="noticeMessage">Custom checkboxes and radio buttons...</span>\r
- <span>Desired position</span>\r
- </div>\r
- <div class="formAnswer">\r
- <label class="firstLabel" for="position">Position</label>\r
- <fieldset id="position" class="dijitInline">\r
- <input type="checkBox" name="position" id="it" value="it" dojoType="dijit.form.CheckBox" /> <label for="it">IT</label>\r
- <input type="checkBox" name="position" id="marketing" value="marketing" dojoType="dijit.form.CheckBox" /> <label for="marketing">Marketing</label>\r
- <input type="checkBox" name="position" id="business" value="business" dojoType="dijit.form.CheckBox" /> <label for="business" style="margin-right: 7em;">Business</label>\r
- </fieldset>\r
-\r
- <label class="secondLabel" for="hours">Hours</label>\r
- <fieldset id="hours" class="dijitInline">\r
- <input type="radio" name="hours" id="full" value="full" dojoType="dijit.form.RadioButton" /> <label for="full">Full time</label>\r
- <input type="radio" name="hours" id="part" value="part" dojoType="dijit.form.RadioButton" /> <label for="part">Part time</label>\r
- </fieldset>\r
- </div>\r
-\r
- <div class="formQuestion">\r
- <span class="noticeMessage">slider and spinner ...</span>\r
- <span>Education and Experience</span>\r
- </div>\r
- <div class="formAnswer">\r
- <table class="dijitReset">\r
- <tr>\r
- <td>\r
- <label class="firstLabel" for="school">Education level</label>\r
- </td>\r
- <td style="padding-left: 2em;">\r
- <span dojoType="dijit.form.HorizontalSlider" id="school" name="school"\r
- minimum="1"\r
- value="2"\r
- maximum="4"\r
- discreteValues="4"\r
- showButtons="false"\r
- style="width:200px; height: 40px;"\r
- >\r
- <span dojoType="dijit.form.HorizontalRule" container="bottomDecoration" count=4 style="height:5px;"></span>\r
- <ol dojoType="dijit.form.HorizontalRuleLabels" container="bottomDecoration"style="height:1em;font-size:75%;color:gray;">\r
- <li>high school</li>\r
- <li>college</li>\r
- <li>masters</li>\r
- <li>PhD</li>\r
- </ol>\r
- </span>\r
- </td>\r
- <td>\r
- <label class="secondLabel" for="experience">Work experience (years, 0-40)</label>\r
- </td>\r
- <td>\r
- <input dojoType="dijit.form.NumberSpinner"\r
- id="experience" name="experience" class="short"\r
- value="1"\r
- constraints="{min: 0, max:40, places:0}"\r
- size=3>\r
- </td>\r
- </tr>\r
- </table>\r
- </div>\r
-\r
- <div class="formQuestion">\r
- <span class="noticeMessage">Rich text editor that expands as you type in text</span>\r
- <label for="description">Self description</label>\r
- </div>\r
- <div class="formAnswer">\r
- <textarea dojoType="dijit.Editor" minHeight="5em" id="description" name="description">\r
- Write a brief summary of <i>your</i> job skills... using <b>rich</b> text.\r
- </textarea>\r
- </div>\r
- \r
- <div class="formQuestion">\r
- <span class="noticeMessage">Text area that expands as you type in text</span>\r
- <label for="references">References</label>\r
- </div>\r
- <div class="formAnswer">\r
- <textarea dojoType="dijit.form.Textarea" id="references" name="references">\r
- Write your references here (plain text)\r
- </textarea>\r
- </div>\r
-\r
- <center>\r
- <button dojoType="dijit.form.Button" iconClass="dijitEditorIcon dijitEditorIconSave" type=submit>\r
- OK\r
- </button>\r
- </center>\r
- </form>\r
- </body>\r
-</html>\r
-\r
projects / eow / blobdiff