136 lines
6.1 KiB
HTML
136 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<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;
|
|
}
|
|
</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>
|
|
<script type="text/javascript">
|
|
dojo.require("dijit.dijit"); // optimize: load dijit layer
|
|
dojo.require("dijit.form.Button");
|
|
dojo.require("dijit.form.Form");
|
|
dojo.require("dojox.form.TriStateCheckBox");
|
|
function reportChecked(checked){
|
|
dojo.byId("oncheckedoutput").innerHTML = checked;
|
|
}
|
|
function reportValueChanged(value) {
|
|
dojo.byId("onvaluechangedoutput").innerHTML = dijit.byId("cb7").get("value");
|
|
}
|
|
function reportValueChanged2(value) {
|
|
dojo.byId("onvaluechangedoutput2").innerHTML = dijit.byId("cb8").get("value");
|
|
}
|
|
function defaultSubmitHandler(values){
|
|
console.debug('actual submitted values: ' + dojo.toJson(values));
|
|
dojo.byId("submitoutput").innerHTML = dojo.toJson(values);
|
|
}
|
|
submittedValues = defaultSubmitHandler;
|
|
|
|
dojo.addOnLoad(function(){
|
|
var params = {id: "cb6", name: "cb6", checked: true };
|
|
new dojox.form.TriStateCheckBox(params, "cb6");
|
|
});
|
|
</script>
|
|
</head>
|
|
<body class="claro">
|
|
<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">
|
|
cb0: Vanilla (non-dojo) checkbox (for comparison purposes)
|
|
</label>
|
|
<br>
|
|
<input id="cb1" data-dojo-id="cb1" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='name:"cb1", value:"foo", onClick:function(){ console.log("clicked cb1") }'/>
|
|
<label for="cb1">
|
|
cb1: normal TriStateCheckbox, 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="dojox.form.TriStateCheckBox" data-dojo-props='onChange:reportChecked, name:"cb2", checked:true'/>
|
|
<label for="cb2">
|
|
cb2: normal TriStateCheckbox, with default value, initially turned on.
|
|
</label>
|
|
<span>"onChange" handler displays attribute 'checked': [<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="dojox.form.TriStateCheckBox" data-dojo-props='name:"cb3", disabled:true'/>
|
|
<label for="cb3">
|
|
cb3: disabled TriStateCheckbox
|
|
</label>
|
|
<br>
|
|
<input id="cb4" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='name:"cb4", readOnly:true, checked:true'/>
|
|
<label for="cb4">
|
|
cb4: readOnly TriStateCheckbox, turned on
|
|
</label>
|
|
<br>
|
|
<input id="cb5" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='name:"cb5", value:"", onClick:function(){ console.log("clicked cb5"); }'/>
|
|
<label for="cb5">
|
|
cb5: normal TriStateCheckbox, 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" type="text"/>
|
|
<label for="cb6">
|
|
cb6: instantiated from script
|
|
</label>
|
|
<br>
|
|
<input id="cb7" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='onChange:reportValueChanged, name:"cb7" '/>
|
|
<label for="cb7">
|
|
cb7: normal TriStateCheckbox.
|
|
</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();dijit.byId("cb7").set("checked", true);' value='Reset value+checked' />
|
|
<span>"onChange" handler displays 'value': [<span id="onvaluechangedoutput"></span>]</span>
|
|
<br>
|
|
<input id="cb8" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='onChange:reportValueChanged2, name:"cb8", values:["Done", "Half done"]'/>
|
|
<label for="cb8">
|
|
cb8: normal TriStateCheckbox, with specified values=["Done", "Half done"].
|
|
</label>
|
|
<span>"onChange" handler displays 'value': [<span id="onvaluechangedoutput2"></span>]</span>
|
|
<br>
|
|
<input id="cb9" data-dojo-id="cb9" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='name:"cb9", states:["mixed", true, false]'/>
|
|
<label for="cb9">
|
|
cb9: TriStateCheckbox with customized states cycle: ["mixed", true, false]
|
|
</label>
|
|
<br>
|
|
<input id="cb10" data-dojo-id="cb10" data-dojo-type="dojox.form.TriStateCheckBox" data-dojo-props='name:"cb10", states:[true, false]'/>
|
|
<label for="cb10">
|
|
cb10: TriStateCheckbox with customized states cycle: [true, false]
|
|
</label>
|
|
<br>
|
|
<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>
|
|
</div>
|
|
<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>
|