Working with IDs and Classes with the Behaviour JavaScript Library - Using IDs and classes together
(Page 4 of 4 )
As I expressed previously, the final example that I wish you to learn in this tutorial, is aimed at demonstrating how the Behaviour library's functionality can be used to assign a particular JavaScript function to a specified web page element, according to a CSS selector that includes an ID and a class.
Actually, the library can assign functions by using any CSS selector, but this capacity will be explored in detail in the last part of this series. Now, please pay attention to the following example. It shows how to assign an inline handler to a web page element whose class attribute has a value of "redtext," and also is wrapped by a "header" containing a DIV. The respective code listing looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Example using inline event handler</title>
<style type="text/css">
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
h2{
font: bold 16px Arial, Helvetica, sans-serif;
color: #00f;
}
#header{
height: 200px;
background: #ffc;
border: 1px solid #999;
}
#content{
height: 400px;
background: #f90;
border: 1px solid #999;
}
#footer{
height: 200px;
background: #ffc;
border: 1px solid #999;
}
.redtext{
font: bold 16px Arial, Helvetica, sans-serif;
color: #f00;
}
</style>
</head>
<body>
<h1>Example using inline event handler</h1>
<div id="header"><h2 class="redtext"
onclick="this.parentNode.removeChild(this);">This is the header
section</h2></div>
<div id="content"><h2>This is the content section</h2></div>
<div id="footer"><h2>This is the footer section</h2></div>
</body>
</html>
As shown above, including any inline handlers into a web document is really a bad implementation of a JavaScript layer. However, now that you saw the "ugly" aspect of this process, have a look at the following example, which utilizes the Behaviour library to assign a basic JavaScript function to a web page element that matches a CSS selector with a value of "#header .redtext".
The aforementioned example is as follows:
(definition of "ruleredtext.js file)
var ruleredtext={
'#header .redtext' : function(element){
element.onclick = function(){
this.parentNode.removeChild(this);
}
}
};
Behaviour.register(ruleredtext);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Example Behaviour JavaScript Library</title>
<style type="text/css">
h1{
font: bold 24px Arial, Helvetica, sans-serif;
color: #000;
}
h2{
font: bold 16px Arial, Helvetica, sans-serif;
color: #00f;
}
#header{
height: 200px;
background: #ffc;
border: 1px solid #999;
}
#content{
height: 400px;
background: #f90;
border: 1px solid #999;
}
#footer{
height: 200px;
background: #ffc;
border: 1px solid #999;
}
.redtext{
font: bold 16px Arial, Helvetica, sans-serif;
color: #f00;
}
</style>
<script language="javascript" src="behaviour.js"></script>
<script language="javascript" src="ruleredtext.js"></script>
</head>
<body>
<h1>Example Behaviour JavaScript Library</h1>
<div id="header"><h2 class="redtext">This is the header section</h2></div>
<div id="content"><h2>This is the content section</h2></div>
<div id="footer"><h2>This is the footer section</h2></div>
</body>
</html>
As you can see, the previous pair of sample files demonstrate clearly how easy it is to attach a JavaScript function to a web page element whose class attribute has a value of "redtext," and also is wrapped by another "header" container. In this case, the Behaviour package first looks for the element that matches the specified CSS selector, and finally assigns the respective function to it.
Okay, I believe that all the examples that you learned here on using the Behaviour package will be enough to keep you entertained for a while developing your own code samples. Happy coding!
Final thoughts
In this second article of the series, I provided you with some additional examples on how to use the Behaviour library to work with CSS selectors that include IDs and classes.
However, we're not done yet, since in the last installment I'm going to show you how this excellent JavaScript package can be used in conjunction with multiple CSS selectors. So, I hope to see you there!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 2 
