Using Multiple Selectors with the Behaviour JavaScript Library - Handling secondary links
(Page 4 of 4 )
As I expressed in the section that you just read, the last example that I plan to include here is aimed at demonstrating the capability offered by the Behaviour library to work with complex CSS selectors.
Below I listed a couple of sample files which illustrate how some secondary links of a specific web page can be handled easily via the library in question, even when they’re deeply nested into the respective web document.
The signatures of these two sample files are as follows:
(definition for “rulelist.js” file)
var rulelist={
'#header #navbar #sublinks 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: 300px;
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="#">Main Link 1</a></li>
<li><a href="#">Main Link 2</a></li>
<li><a href="#">Main Link 3</a></li>
<li><a href="#">Main Link 4</a></li>
<li><a href="#">Main Link 5</a></li>
</ul>
<div id="sublinks">
<ul>
<li><a href="#">Secondary Link 1</a></li>
<li><a href="#">Secondary Link 2</a></li>
<li><a href="#">Secondary Link 3</a></li>
<li><a href="#">Secondary Link 4</a></li>
<li><a href="#">Secondary Link 5</a></li>
</ul>
</div>
</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 demonstrated above, the Behaviour library makes it simple to manipulate any element of a web page, whether the provided CSS selector is complex or not. In the previous case, some secondary links will be removed from the respective web document if a user clicks successively on each of them. Quite simple to achieve, right?
As usual, feel free to modify the source code corresponding to all the examples shown in this series, so you can grasp more quickly how to get the most out of the Behaviour library. It’s really fun, trust me!
Final thoughts
Sadly, we’ve come to the end of this series. In these three consecutive tutorials, I provided you with a good set of hands-on examples, which I’m sure you’ll use as the starting point to create web sites that completely separate their behavioral layers from their visual presentation and structural markup.
See you in the next web development tutorial!
| 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. |
