It is an easy way to bind many events on a single go to many nodes. Also it can publish a topic. It provides the flexibility of adding behaviors any number of times. Just keep in mind the two APIs used
Here is the code that is explained using comments.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dojo.behavior</title>
<!--I have placed my dojo module inside js folder. so my htmls are outside the js folder and I can drill it using path as js/dojo...-->
<script language="javascript" type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad: true" ></script>
<script type="text/javascript">
dojo.require("dojo.NodeList-manipulate");
dojo.require("dojo.behavior");//import the behavior class inside dojo module
dojo.ready(function( ) {
//defined a subscribe with topic name /first
dojo.subscribe("/first", function(evt) {
dojo.query(".result").innerHTML("1. Executed by /first, on click of "+evt.item+"<br /><br />");
});
//defined a subscribe with topic name /second
dojo.subscribe("/second", function(evt) {
dojo.query(".result").append("2. Executed because of the behavior added for the second time <br />");
});
//I am storing the events, functions, publish on various nodes to a variable, which I will add to the behavior later.
var myBehavior = ({
".container, .result" : function(node) { // a direct function can be defined to the selected node.
dojo.style(node, {
width:"250px",
border : "solid 1px",
background : "#ccc"
});
},
"#subject > li" : { //applies for all the li elements within node with id as subject
onmouseover : function(evt) {//event actions are defined
dojo.style(evt.target,
"background", "yellow");},
onmouseout : function(evt) {
dojo.style(evt.target,
"background", "");},
onclick : function(evt){
dojo.publish("/first", [{item:evt.target.innerHTML}]);//publishes the topic with the value of the list on which the even occurred
},
found : function(node) {//found is a key word used to just mention that whereever this particular element is found it will perform this function on it.
dojo.style(node, "cursor", "pointer");
}
}
});
dojo.behavior.add(myBehavior); // here I add the defined set of codes to dojo.behavior
//After it is added to dojo.behavior, remember to apply it to your page.
dojo.behavior.apply(); // This will print in the results of /first using myBehavior, for the same onclick event.
/* in some other place on the go if you need to add another onclick event handler to the same list you can again define it and add to the behavior. The code below demonstrates it. */
var myBehavior2 = ({
"#subject > li" : {
onclick : "/second"
}
});
dojo.behavior.add(myBehavior2);// This will print in the results of /second using myBehavior2, for the same onclick event.
dojo.behavior.apply();
});
</script>
<head>
<body>
<div class="container"> Subjects:
<ul id="subject">
<li>English</li>
<li>Math</li>
<li>Environment Science</li>
</ul>
</div>
<br />
<div class="result">Behavior Results <br /></div>
</body>
</html>
Live Demo:
- dojo.behavior.add()
- dojo.behavior.apply()
Here is the code that is explained using comments.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dojo.behavior</title>
<!--I have placed my dojo module inside js folder. so my htmls are outside the js folder and I can drill it using path as js/dojo...-->
<script language="javascript" type="text/javascript" src="js/dojo/dojo.js" djConfig="parseOnLoad: true" ></script>
<script type="text/javascript">
dojo.require("dojo.NodeList-manipulate");
dojo.require("dojo.behavior");//import the behavior class inside dojo module
dojo.ready(function( ) {
//defined a subscribe with topic name /first
dojo.subscribe("/first", function(evt) {
dojo.query(".result").innerHTML("1. Executed by /first, on click of "+evt.item+"<br /><br />");
});
//defined a subscribe with topic name /second
dojo.subscribe("/second", function(evt) {
dojo.query(".result").append("2. Executed because of the behavior added for the second time <br />");
});
//I am storing the events, functions, publish on various nodes to a variable, which I will add to the behavior later.
var myBehavior = ({
".container, .result" : function(node) { // a direct function can be defined to the selected node.
dojo.style(node, {
width:"250px",
border : "solid 1px",
background : "#ccc"
});
},
"#subject > li" : { //applies for all the li elements within node with id as subject
onmouseover : function(evt) {//event actions are defined
dojo.style(evt.target,
"background", "yellow");},
onmouseout : function(evt) {
dojo.style(evt.target,
"background", "");},
onclick : function(evt){
dojo.publish("/first", [{item:evt.target.innerHTML}]);//publishes the topic with the value of the list on which the even occurred
},
found : function(node) {//found is a key word used to just mention that whereever this particular element is found it will perform this function on it.
dojo.style(node, "cursor", "pointer");
}
}
});
dojo.behavior.add(myBehavior); // here I add the defined set of codes to dojo.behavior
//After it is added to dojo.behavior, remember to apply it to your page.
dojo.behavior.apply(); // This will print in the results of /first using myBehavior, for the same onclick event.
/* in some other place on the go if you need to add another onclick event handler to the same list you can again define it and add to the behavior. The code below demonstrates it. */
var myBehavior2 = ({
"#subject > li" : {
onclick : "/second"
}
});
dojo.behavior.add(myBehavior2);// This will print in the results of /second using myBehavior2, for the same onclick event.
dojo.behavior.apply();
});
</script>
<head>
<body>
<div class="container"> Subjects:
<ul id="subject">
<li>English</li>
<li>Math</li>
<li>Environment Science</li>
</ul>
</div>
<br />
<div class="result">Behavior Results <br /></div>
</body>
</html>
Live Demo:
No comments:
Post a Comment
Please post your comments to help you and others better.