dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
174 lines (172 loc) • 7.52 kB
HTML
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>TriStateCheckBox Widget Demo</title>
<style type="text/css">
@import "../../../dijit/themes/claro/document.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../resources/TriStateCheckBox.css";
label {
margin-right: 0.80em;
line-height: 25px;
vertical-align: middle;
}
</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">
</script>
<!-- only needed for alternate theme testing: -->
<script type="text/javascript" src="../../../dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
require(["dojo/_base/kernel", "dojo/parser", "dojo/ready", "dojo/dom", "dojo/json", "dijit/registry",
"dojox/form/TriStateCheckBox", "dijit/form/Button", "dijit/form/Form"],
function(kernel, parser, ready, dom, JSON, registry, TriStateCheckBox){
kernel.global["registry"] = registry;
reportChecked = function(checked){
dom.byId("oncheckedoutput").innerHTML = checked;
}
reportValueChanged = function(value){
dom.byId("onvaluechangedoutput").innerHTML = registry.byId("cb7").get("value");
}
reportValueChanged2 = function(value){
dom.byId("onvaluechangedoutput2").innerHTML = registry.byId("cb8").get("value");
}
defaultSubmitHandler = function(values){
console.debug('actual submitted values: ' + JSON.stringify(values));
dom.byId("submitoutput").innerHTML = JSON.stringify(values);
}
submittedValues = defaultSubmitHandler;
ready(function(){
parser.parse();
var params = {id: "cb6", name: "cb6", checked: true };
new TriStateCheckBox(params, "cb6");
new TriStateCheckBox({
id: "cb11",
checked: "mixed"
}, "cb11");
});
});
</script>
</head>
<body class="claro" role="main">
<h1 class="testTitle">Dojox TriStateCheckBoxes Test</h1>
<p>
Here are some TriStateCheckBoxes. 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:"../../../dijit/tests/formAction.html", method:"", target:"formSubmitIframe"'>
<input type="checkbox" id="cb0" checked/>
<label for="cb0" style="vertical-align: top; line-height: 1em;">
cb0: Vanilla (non-dojo) checkbox (for comparison purposes)
</label>
<br/>
<h2>Standard TriStateCheckbox</h2>
<input id="cb1" data-dojo-id="cb1" data-dojo-type="dojox/form/TriStateCheckBox" value="foo" name="cb1" data-dojo-props='onClick:function(){ console.log("clicked cb1") }'/>
<label for="cb1">
cb1: Standard TriStateCheckbox, with value=foo, clicking generates console log messages
</label>
<button data-dojo-type="dijit/form/Button" onclick="alert(dijit.byId('cb1').get('value'));">
get('value')
</button>
<br/>
<input type="checkbox" id="cb2" data-dojo-type="dojox/form/TriStateCheckBox" name="cb2" data-dojo-props='onChange:reportChecked, checked:true'/>
<label for="cb2">
cb2: Standard TriStateCheckbox, with default value, initially turned on.
</label>
<span>"onChange" handler displays attribute 'checked': [<span id="oncheckedoutput"></span>]</span>
<button data-dojo-type="dijit/form/Button" onclick="alert(dijit.byId('cb2').get('value'));">
get('value')
</button>
<br/>
<input type="checkbox" id="cb3" data-dojo-type="dojox/form/TriStateCheckBox" disabled="disabled" name="cb3" />
<label for="cb3">
cb3: Disabled TriStateCheckbox
</label>
<br/>
<input type="checkbox" id="cb4" data-dojo-type="dojox/form/TriStateCheckBox" name="cb4" data-dojo-props='readOnly:true, checked:true'/>
<label for="cb4">
cb4: ReadOnly TriStateCheckbox, turned on
</label>
<br/>
<input type="checkbox" id="cb5" data-dojo-type="dojox/form/TriStateCheckBox" name="cb5" value="" data-dojo-props='onClick:function(){ console.log("clicked cb5"); }'/>
<label for="cb5">
cb5: Standard TriStateCheckbox, with specified value="", clicking generates console log messages
</label>
<button data-dojo-type="dijit/form/Button" onclick="alert(dijit.byId('cb5').get('value'));">
get('value')
</button>
<br/>
<input type="checkbox" id="cb6" type="text"/>
<label for="cb6">
cb6: Instantiated from script
</label>
<br/>
<input type="checkbox" id="cb7" data-dojo-type="dojox/form/TriStateCheckBox" name="cb7" data-dojo-props="onChange:reportValueChanged"/>
<label for="cb7">
cb7: Standard TriStateCheckbox.
</label>
<button type="button" data-dojo-type="dijit/form/Button">
<span>disable</span>
<script type="dojo/on" data-dojo-event="click">
registry.byId("cb7").set("disabled", true);
</script>
</button>
<button type="button" data-dojo-type="dijit/form/Button">
<span>enable</span>
<script type="dojo/on" data-dojo-event="click">
registry.byId("cb7").set("disabled",false);
</script>
</button>
<button type="button" data-dojo-type="dijit/form/Button">
<span>set value to "fish"</span>
<script type="dojo/on" data-dojo-event="click">
registry.byId("cb7").set("value", "fish");
</script>
</button>
<button type="button" data-dojo-type="dijit/form/Button">
<span>Reset value+checked</span>
<script type="dojo/on" data-dojo-event="click">
registry.byId("cb7").reset();
regisrty.byId("cb7").set("checked", true);
</script>
</button>
<span>"onChange" handler displays 'value': [<span id="onvaluechangedoutput"></span>]</span>
<br/>
<h2>Customized TriStateCheckbox</h2>
<input type="checkbox" id="cb8" data-dojo-type="dojox/form/TriStateCheckBox" name="cb8" data-dojo-props='onChange:reportValueChanged2, values:["Done", "Half done"]'/>
<label for="cb8">
cb8: TriStateCheckbox with specified values=["Done", "Half done"].
</label>
<span>"onChange" handler displays 'value': [<span id="onvaluechangedoutput2"></span>]</span>
<br/>
<input type="checkbox" id="cb9" data-dojo-id="cb9" data-dojo-type="dojox/form/TriStateCheckBox" name="cb9" data-dojo-props='states:["mixed", true, false]'/>
<label for="cb9">
cb9: TriStateCheckbox with customized states cycle: ["mixed", true, false]
</label>
<br/>
<input type="checkbox" id="cb10" data-dojo-id="cb10" data-dojo-type="dojox/form/TriStateCheckBox" name="cb10" data-dojo-props="states:[true, false]"/>
<label for="cb10">
cb10: TriStateCheckbox with customized states cycle: [true, false]
</label>
<br/>
<input type="checkbox" id="cb11" name="cb11" />
<label for="cb11">
cb11: TriStateCheckBox created programatically with a value of "mixed"
</label>
<br/>
<button type="submit" data-dojo-type="dijit/form/Button" value="Submit">
Submit
</button>
<button type="reset" data-dojo-type="dijit/form/Button">
HTML Reset
</button>
</form>
<br/>
<span>Actual submitted values: <span id="submitoutput"></span></span>
<iframe name="formSubmitIframe" src="about:blank" onload="if(this.values)submittedValues(this.values)" style="display:none;"></iframe>
</body>
</html>