You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
173 lines
7.3 KiB
173 lines
7.3 KiB
<!DOCTYPE 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>
|
|
|