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
221 lines (206 loc) • 8.86 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" >
<title>Form widgets mobile test page</title>
<link href="../../icons/commonIcons.css" rel="stylesheet">
<script type="text/javascript" src="../boilerplate.js"></script>
<script language="JavaScript" type="text/javascript">
require([
"dojo/parser",
"dijit/form/Button",
"dijit/form/DropDownButton",
"dijit/form/ComboButton",
"dijit/form/ToggleButton",
"dijit/DropDownMenu",
"dijit/MenuItem",
"dijit/form/CheckBox",
"dijit/form/RadioButton",
"dijit/form/ValidationTextBox",
"dijit/form/DateTextBox",
"dijit/form/TimeTextBox",
"dijit/form/NumberSpinner",
"dijit/form/FilteringSelect",
"dijit/form/Select",
"dijit/form/MultiSelect",
"dijit/form/HorizontalSlider",
"dijit/form/HorizontalRule",
"dijit/form/HorizontalRuleLabels",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
</head>
<body>
<h1>Buttons</h1>
<button data-dojo-type="dijit/form/Button" id="T1465" data-dojo-props='onClick:function(){ console.log("clicked simple"); }, iconClass:"plusIcon", value:"Create"'>
Button
</button>
<button id="SubmitDropDown" data-dojo-type="dijit/form/DropDownButton" name="DropDown" type="submit" value="DropDown Submit"
data-dojo-props="label: 'DropDown Submit'">
DropDownButton
<span data-dojo-type="dijit/DropDownMenu">
<span id="SubmitDropDownMenuItem" data-dojo-type="dijit/MenuItem">DropDown MenuItem</span>
</span>
</button>
<button id="comboCreate" title="creative title" data-dojo-type="dijit/form/ComboButton" data-dojo-props='optionsTitle:"save options", onClick:function(){ console.log("clicked combo save") },
iconClass:"plusIcon"'>
<span>ComboButton</span>
<span id="createMenu" data-dojo-type="dijit/DropDownMenu">
<span data-dojo-type="dijit/MenuItem" data-dojo-props='iconClass:"dijitEditorIcon dijitEditorIconSave",
onClick:function(){ console.log("not actually saving anything, just a test!"); }'>Create blank</span>
<span data-dojo-type="dijit/MenuItem"
data-dojo-props='onClick:function(){ console.log("not actually saving anything, just a test!"); }'>Create from template</span>
</span>
</button>
<button id="toggle2" data-dojo-type="dijit/form/ToggleButton"
data-dojo-props='onChange:function(val){ console.log("toggled button checked="+val); }, iconClass:"dijitRadioIcon"'>
Toggle me
</button>
<h1>CheckBox, RadioButton</h1>
<fieldset>
<legend>check boxes</legend>
<label for="cb1">cb1:</label>
<input id="cb1" data-dojo-id="cb1" data-dojo-type="dijit/form/CheckBox"
name="cb" value="foo" onClick="console.log('clicked cb1');">
<label for="cb2">cb2</label>
<input id="cb2" data-dojo-id="cb2" data-dojo-type="dijit/form/CheckBox"
name="cb" value="bar" onClick="console.log('clicked rb2');">
</fieldset>
<fieldset>
<legend>radio buttons</legend>
<label for="rb1">rb1</label>
<input id="rb1" data-dojo-id="rb1" data-dojo-type="dijit/form/RadioButton"
name="rb" value="foo" onClick="console.log('clicked rb1');">
<label for="rb2">rb2</label>
<input id="rb2" data-dojo-id="rb2" data-dojo-type="dijit/form/RadioButton"
name="rb" value="foo" onClick="console.log('clicked rb2');">
</fieldset>
<h1>TextBoxes</h1>
<label for="vtb">ValidationTextBox:</label>
<input id="vtb" data-dojo-type="dijit/form/ValidationTextBox" placeHolder="hint text">
<label for="q03">NumberSpinner:</label>
<input id="q03" data-dojo-type="dijit/form/NumberSpinner"
name="age" class="small"
data-dojo-props='
promptMessage:"(optional) Enter an age between 0 and 120",
maxLength:"3",
constraints:{places:0,min:0,max:120},
onChange:function(val){ console.log(val); },
tooltipPosition:["above", "below"]
'>
<label for="date">Date:</label>
<input id="date" data-dojo-type="dijit/form/DateTextBox"
name="date" value="2008-12-31" onChange="console.log(arguments[0]);"
>
<label for="time">Time:</label>
<input id="time" data-dojo-type="dijit/form/TimeTextBox"
name="time" value="T17:45:00" onChange="console.log(arguments[0]);"
>
<h1>Selects</h1>
<label for="s">Select:</label>
<select id="s" data-dojo-type="dijit/form/Select">
<option value="TN">Tennessee</option>
<option value="VA" selected="selected">Virginia</option>
<option value="WA">Washington</option>
<option value="FL">Florida</option>
<option value="CA">California</option>
</select>
<label for="fs">FilteringSelect:</label>
<select id="fs" aria-label="fs" data-dojo-type="dijit/form/FilteringSelect">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<option value="AZ">Arizona</option>
<option value="AR">Arkansas</option>
<option value="AE">Armed Forces Europe</option>
<option value="AP">Armed Forces Pacific</option>
<option value="AA">Armed Forces the Americas</option>
<option value="CA" selected>California</option>
<option value="CO">Colorado</option>
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="DC">District of Columbia</option>
<option value="FM">Federated States of Micronesia</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="GU">Guam</option>
<option value="HI">Hawaii</option>
<option value="ID">Idaho</option>
<option value="IL">Illinois</option>
<option value="IN">Indiana</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="ME">Maine</option>
<option value="MH">Marshall Islands</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NV">Nevada</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NM">New Mexico</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="ND">North Dakota</option>
<option value="MP">Northern Mariana Islands</option>
<option value="OH">Ohio</option>
<option value="OK">Oklahoma</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="PR">Puerto Rico</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="SD">South Dakota</option>
<option value="TN">Tennessee</option>
<option value="TX">Texas</option>
<option value="UT">Utah</option>
<option value="VT">Vermont</option>
<option value="VI">Virgin Islands, U.S.</option>
<option value="VA">Virginia</option>
<option value="WA">Washington</option>
<option value="WV">West Virginia</option>
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label for="ms">ms:</label>
<select id="ms" multiple data-dojo-type="dijit/form/MultiSelect"
name="ms" style="height:100px; width:175px;">
<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>
<h1>HorizontalSlider</h1>
<div id="slider1" data-dojo-type="dijit/form/HorizontalSlider" data-dojo-props='name:"horizontal1",
value:10,
maximum:100,
minimum:0,
pageIncrement:100,
showButtons:true,
intermediateChanges:true,
slideDuration:500,
style:{width:"100%", height:"20px"}
'>
<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"topDecoration", style:{height:"1.2em",fontSize:"75%"}, count:6, numericMargin:1'></ol>
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"topDecoration", count:6, style:{height:"5px"}'></div>
<div data-dojo-type="dijit/form/HorizontalRule" data-dojo-props='container:"bottomDecoration", count:5, style:{height:"5px"}'></div>
<ol data-dojo-type="dijit/form/HorizontalRuleLabels" data-dojo-props='container:"bottomDecoration", style:{height:"1em",fontSize:"75%"}'>
<li>lowest</li>
<li>normal</li>
<li>highest</li>
</ol>
</div>
</body>
</html>