Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>dojo.behavior example 2</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js.uncompressed.js'></script>
<script type='text/javascript'>
dojo.require("dojo.behavior");
dojo.ready(function() {
//the code below, add onclick handler to radio button.
//it add style to the #myDiv
//it add a common style to all the elements that contains hidden class
dojo.behavior.add({
"input[type=radio], label":{
onclick: function(evt){
dojo.query("#myDiv > div").style("display","none");
//logic to get the index of the selected radio.
thisIndex = dojo.indexOf(dojo.query("input[type=radio]"), evt.target)+1;
//based on the selected radio index the corresponding div will be shown
dojo.query("#myDiv > div:nth-child("+thisIndex+")").style("display","block");
},
//using found keyword to add style to all matches
found:function(evt){
dojo.style(evt,"cursor","pointer");
}
},
".hidden":{
found: function(n){
dojo.query(n).style('display','none');
}
}
});
dojo.behavior.apply();
});
</script>
</head>
<body>
<<p>Click any of the radio buttons to display the respective div blocks</p>
<form id="myform">
<input type="radio" dojoType="dijit.form.RadioButton" name="radios" id="radioOne" value="radioOne" />
<label for="radioOne"> Show Get Name Block</label>
<br />
<input type="radio" dojoType="dijit.form.RadioButton" name="radios" id="radioTwo" value="radioTwo" />
<label for="radioTwo"> Show Get Sex Block</label>
<br />
<input type="radio" dojoType="dijit.form.RadioButton" name="radios" id="radioThree" value="radioThree" />
<label for="radioThree"> Show Notice </label>
<br />
<br />
</form>
<div id="myDiv">
<div class="hidden">Name:<input type="text"></input></div>
<div class="hidden">Age:<input type="text"></input></div>
<div class="hidden">Notice:<br />Understand, this appears on click of Notice</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>dojo.behavior example 2</title>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js.uncompressed.js'></script>
<script type='text/javascript'>
dojo.require("dojo.behavior");
dojo.ready(function() {
//the code below, add onclick handler to radio button.
//it add style to the #myDiv
//it add a common style to all the elements that contains hidden class
dojo.behavior.add({
"input[type=radio], label":{
onclick: function(evt){
dojo.query("#myDiv > div").style("display","none");
//logic to get the index of the selected radio.
thisIndex = dojo.indexOf(dojo.query("input[type=radio]"), evt.target)+1;
//based on the selected radio index the corresponding div will be shown
dojo.query("#myDiv > div:nth-child("+thisIndex+")").style("display","block");
},
//using found keyword to add style to all matches
found:function(evt){
dojo.style(evt,"cursor","pointer");
}
},
".hidden":{
found: function(n){
dojo.query(n).style('display','none');
}
}
});
dojo.behavior.apply();
});
</script>
</head>
<body>
<<p>Click any of the radio buttons to display the respective div blocks</p>
<form id="myform">
<input type="radio" dojoType="dijit.form.RadioButton" name="radios" id="radioOne" value="radioOne" />
<label for="radioOne"> Show Get Name Block</label>
<br />
<input type="radio" dojoType="dijit.form.RadioButton" name="radios" id="radioTwo" value="radioTwo" />
<label for="radioTwo"> Show Get Sex Block</label>
<br />
<input type="radio" dojoType="dijit.form.RadioButton" name="radios" id="radioThree" value="radioThree" />
<label for="radioThree"> Show Notice </label>
<br />
<br />
</form>
<div id="myDiv">
<div class="hidden">Name:<input type="text"></input></div>
<div class="hidden">Age:<input type="text"></input></div>
<div class="hidden">Notice:<br />Understand, this appears on click of Notice</div>
</div>
</body>
</html>
Live Demo:
Awesome! Thanks for the write up..
ReplyDelete