Using Multiple Selectors with the Behaviour JavaScript Library - Working with nested elements of a web page
(Page 3 of 4 )
As you may have guessed, handling different list items via the Behaviour library is very similar to manipulating any other elements of a web document. But in this case, I’m going to demonstrate how simple it is to handle the aforementioned list items. They will be wrapped not only by the list in question, but also by another containing DIV.
That being said, have a look at the “inline” version of the example, and then examine the second code listing, which does the same thing using the Behaviour package.
Here is the first code listing, where inline handlers are used to manipulate some simple list items:
<!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;
}
</style>
</head>
<body>
<h1>Example using inline event handler</h1>
<div id="header">
<h2>This is the header section</h2>
<div id="navbar">
<ul>
<li><a href="#" onclick="this.parentNode.removeChild
(this)">Link 1</a></li>
<li><a href="#" onclick="this.parentNode.removeChild
(this)">Link 2</a></li>
<li><a href="#" onclick="this.parentNode.removeChild
(this)">Link 3</a></li>
<li><a href="#" onclick="this.parentNode.removeChild
(this)">Link 4</a></li>
<li><a href="#" onclick="this.parentNode.removeChild
(this)">Link 5</a></li>
</ul>
</div>
</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>
That was very inefficient, right? Now, take a look at the following example, which uses the functionality provided by Behaviour to handle the same list items that you saw before.
The files that comprise this new example are included below:
(definition for “rulelist.js” file)
var rulelist={
'#header #navbar li' : function(element){
element.onclick=function(){
this.parentNode.removeChild(this);
}
}
};
Behaviour.register(rulelist);
<!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 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;
}
</style>
<script language="javascript" src="behaviour.js"></script>
<script language="javascript" src="rulelist.js"></script>
</head>
<body>
<h1>Example using Behaviour JavaScript Library</h1>
<div id="header">
<h2>This is the header section</h2>
<div id="navbar">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
</ul>
</div>
</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, assigning a custom JavaScript function to a few list items to remove them from the pertinent web document is indeed a straightforward procedure that can be performed with minor problems, something that’s clearly demonstrated by the pair of files defined a few lines above.
Well, at this point I’m pretty sure that you already acquired an intimate grounding in how the Behaviour library does its business. Nonetheless, in this case I’d like to show you a final working example in which this package is used in conjunction with a rather complex CSS selector.
To find out more on how this last example will be created, go to the following section and keep reading.
Next: Handling secondary links >>
More JavaScript Articles
More By Alejandro Gervasio
