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
169 lines (151 loc) • 7.92 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>CheckBox Widget Demo</title>
<style type="text/css">
@import "../../themes/claro/document.css";
@import "../css/dijitTests.css";
label { margin-right: 0.80em; }
</style>
<!-- required: the default dijit theme: -->
<link id="themeStyles" rel="stylesheet" href="../../../dijit/themes/claro/claro.css"/>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../dojo/dojo.js"
data-dojo-config="isDebug: true, parseOnLoad: true"></script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dijit.form.CheckBox");
dojo.require("dijit.form.RadioButton");
dojo.require("dijit.form.Form");
function defaultSubmitHandler(values){
console.debug('actual submitted values: ' + dojo.toJson(values));
}
submittedValues = defaultSubmitHandler;
function reportChecked(checked){
dojo.byId("oncheckedoutput").innerHTML = checked;
}
function reportValueChanged(value){
dojo.byId("onvaluechangedoutput").innerHTML = value;
}
dojo.ready(function(){
var params = {id: "cb6", name: "cb6", checked: true };
new dijit.form.CheckBox(params, "cb6");
new dijit.form.RadioButton({
checked: true,
value: "tea",
name: "drink"
}, "g4rb1");
new dijit.form.RadioButton({
value: "coffee",
name: "drink"
}, "g4rb2");
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">Dijit CheckBox Test</h1>
<p>
Here are some checkboxes. Try clicking, and hovering, tabbing, and using the space bar to select:
</p>
<!-- to test form submission, you'll need to create an action handler similar to
http://www.utexas.edu/teamweb/cgi-bin/generic.cgi -->
<form id="myForm" data-dojo-type="dijit/form/Form" data-dojo-props='action:"../formAction.html", method:"", target:"formSubmitIframe"'>
<input type="checkbox" id="cb0" checked/>
<label for="cb0">cb0: Vanilla (non-dojo) checkbox (for comparison purposes)</label>
<br>
<input id="cb1" data-dojo-id="cb1" data-dojo-type="dijit/form/CheckBox" data-dojo-props='name:"cb1", value:"foo", onClick:function(){ console.log("clicked cb1") }'/>
<label for="cb1">cb1: normal checkbox, with value=foo, clicking generates console log messages</label>
<button type=button onclick="alert(dijit.byId('cb1').get('value'));">get('value')</button>
<br>
<input id="cb2" data-dojo-type="dijit/form/CheckBox" data-dojo-props='onChange:reportChecked, name:"cb2", checked:true'/>
<label for="cb2">cb2: normal checkbox, with default value, initially turned on.</label>
<span>"onChange" handler updates: [<span id="oncheckedoutput"></span>]</span>
<button type=button onclick="alert(dijit.byId('cb2').get('value'));">get('value')</button>
<br>
<input id="cb3" data-dojo-type="dijit/form/CheckBox" data-dojo-props='name:"cb3", disabled:true'/>
<label for="cb3">cb3: disabled checkbox</label>
<br>
<input id="cb4" data-dojo-type="dijit/form/CheckBox" data-dojo-props='name:"cb4", readOnly:true, checked:true, value:"" '/><!-- blank value => "on" -->
<label for="cb4">cb4: readOnly checkbox, turned on</label>
<br>
<input id="cb5" data-dojo-type="dijit/form/CheckBox" data-dojo-props='name:"cb5", value:"", onClick:function(){ console.log("clicked cb5"); }'/>
<label for="cb5">cb5: normal checkbox, with specified value="", clicking generates console log messages</label>
<button type=button onclick="alert(dijit.byId('cb5').get('value'));">get('value')</button>
<br>
<input id="cb6"/>
<label for="cb6">cb6: instantiated from script</label>
<br>
<input id="cb7" data-dojo-type="dijit/form/CheckBox" data-dojo-props='onChange:reportValueChanged, name:"cb7" '/>
<label for="cb7">cb7: normal checkbox.</label>
<input type="button" onclick='dijit.byId("cb7").set("disabled",true);' value="disable" />
<input type="button" onclick='dijit.byId("cb7").set("disabled",false);' value="enable" />
<input type="button" onclick='dijit.byId("cb7").set("value", "fish");' value='set value to "fish"' />
<input type="button" onclick='dijit.byId("cb7").reset();' value='Reset value+checked' />
<span>"onChange" handler updates: [<span id="onvaluechangedoutput"></span>]</span>
<br>
<p>
Here are some radio buttons. Try clicking, and hovering, tabbing, and arrowing
</p>
<p>
<span>Radio group #1:</span>
<input id="g1rb1" data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"g[1]", value:"news" '/>
<label for="g1rb1">news</label>
<input id="g1rb2" data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"g[1]", checked:true'/><!-- no value => "on" -->
<label for="g1rb2">talk</label>
<input id="g1rb3" data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"g[1]", value:"", disabled:true'/><!-- blank value => "" -->
<label for="g1rb3">weather</label>
<input type="button" id="enableWeatherButton" onclick='dijit.byId("g1rb3").set("disabled",false);' value="enable weather" />
<input type="button" onclick='dijit.byId("g1rb3").set("disabled",true);' value="disable weather" />
</p>
<p>
<span>Radio group #2: (no default value, and has breaks)</span><br>
<input id="g2rb1" data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"g2", value:"top40" '/>
<label for="g2rb1">top 40</label><br>
<input id="g2rb2" data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"g2", value:"oldies" '/>
<label for="g2rb2">oldies</label><br>
<input id="g2rb3" data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"g2", value:"country" '/>
<label for="g2rb3">country</label><br>
(Note if using keyboard: tab to navigate, and use arrow or space to select)
</p>
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"submit", value:"Submit"'>Submit</button>
<button data-dojo-type="dijit/form/Button" data-dojo-props='type:"reset"'>HTML Reset</button>
</form>
<p>
<span>Radio group #3 (native radio buttons):</span>
<input type="radio" name="g3" id="g3rb1" value="rock"/>
<label for="g3rb1">rock</label>
<input type="radio" name="g3" id="g3rb2" value="jazz" disabled="disabled"/>
<label for="g3rb2">jazz</label>
<input type="radio" name="g3" id="g3rb3" value="classical" checked="checked"/>
<label for="g3rb3">classical</label>
</p>
<div style='border:1px solid gray;'>
These 6 radio buttons have the same name but are in separate forms so they can be selected independently.
<form>
1:
<input id='b1' data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"a1", value:"1"'/><label for='b1'>b1</label>
<input id='b2' data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"a1", value:"2"'/><label for='b2'>b2</label>
</form>
<form>
2:
<input id='c1' data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"a1", value:"1"'/><label for='c1'>c1</label>
<input id='c2' data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"a1", value:"2"'/><label for='c2'>c2</label>
</form>
<div>
3:
<input id='d1' data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"a1", value:"1"'/><label for='d1'>d1</label>
<input id='d2' data-dojo-type="dijit/form/RadioButton" data-dojo-props='name:"a1", value:"2"'/><label for='d2'>d2</label>
</div>
</div>
<div>
<span>Programmatic radio buttons:</span>
<form id="radioForm">
<input type="radio" name="drink" id="g4rb1" checked value="tea"/> <label for="g4rb1">Tea</label> <br />
<input type="radio" name="drink" id="g4rb2" checked value="coffee"/> <label for="g4rb2">Coffee</label> <br />
</form>
</div>
<iframe name="formSubmitIframe" src="about:blank" onload="if(this.values)submittedValues(this.values)" style="display:none;"></iframe>
</body>
</html>