ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Updated

Browse Source
This commit is contained in:
Éric Lemoine
2013-02-20 10:38:25 +01:00
parent 17c3936ab6
commit 5d14b9e2d4
1919 changed files with 559755 additions and 2588 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
master/examples/test_CheckBox.html Normal file
View File

@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html>
<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("doh.runner");
dojo.require("dijit.dijit"); // optimize: load dijit layer
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">
<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'/>
<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]", value:"talk", checked:true'/>
<label for="g1rb2">talk</label>
<input id="g1rb3" data-dojo-type="dijit.form.RadioButton" data-dojo-props='name:"g[1]", value:"weather", disabled:true'/>
<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="myform">
<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>