Designing simple navigation using jQuery
jQuery is a development framework that allows us to use JavaScript in our HTML document. Now we will build a simple navigation using the basic jQuery features.
Getting ready
Before we can begin, we need to include the latest jQuery library. We can download it from the download section at www.jquery.com. We will save it in our JavaScript folder named js, in the root of our HTML document, for example, cookbook.
All libraries mentioned in this book are also available in an online cache such as http://code.google.com/apis/libraries/.
Note
You can download the example code fles for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the fles e-mailed directly to you.
How to do it...
Now, we can start coding our task1.html page. We'll place it in the cookbook folder.
<!doctype html>
<html>
<head>
<title>Example 1</title>
</head>
<body>
<ul id="navigation">
<li id="home"><a href="#">Home</a></li>
<li class="active"><a href="#">Our Books</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Blog</a></li>
</ul>
<div id="placeHolder">
<!-- our content goes here -->
</div>
<script src=js/jquery.min.js></"></script>
<script>
$(document).ready(function(){
$('#navigation li a').each(function(){
var $item = $(this);
$item.bind('click',function(event){
event.preventDefault();
var title = $item.html();
var html = title + ' was selected.';
$('#placeHolder').html(html);
});
});
$.get('ajax/test.html', function(data) {
$('.result').html(data);
alert('Load was performed.');
});
});
</script>
</body>
</html>How it works...
Now, let's explain what we have done in the preceding code snippet. The main idea of our script is to find each hyperlink <a> in the document, prevent its default functionality, and display the hyperlink content in our placeHolder. From the beginning, we started with doctype and the main HTML layout. The body of the page contains a navigation and a placeholder element for the dynamic content.
The most important part for jQuery functionality is to include our jQuery library. Let's place it before the closing <body> tag. This will allow the HTML of a page to load first:
<script src="js/jquery.min.js"></script>
After loading our HTML page and when the document is ready, we can define our JavaScripts scripts in the $(document).ready() function:
<script>
$(document).ready(function(){
alert("Hello jQuery!");
});
</script>This can be also shortened to $():
<script>
$(function(){
alert("Hello jQuery!");
});
</script>The dollar sign $()
represents an alias to the jQuery() factory
function. Within this function we can use all the CSS selectors like ID, class, or exact tag names. For example:
$('a'): Selects all hyperlinks in our document$('#myID'): Selects the element with this ID$('.myID'): Selects all elements with this class
In our case, we are selecting all hyperlinks in the navigation <div> and defining their own functionality with an event handler for click events:
$item.bind('click',function(event){
// prevent default functionality
event.preventDefault();
// here goes the rest
});And the last step of our example is creating the title VAR and HTML string, which goes to the placeHolder:
var title = $(this).html();
var html = title + ' was selected.';
$('#placeHolder').html(html);There's more...
The preceding example was really simple. But there is a lot more that jQuery can offer to us. This includes special selectors, effects, DOM manipulation, or AJAX functionality.
We can specify our selectors more precisely. For example, we can specify which hyperlinks should be affected based on their href attributes:
$('a[href^=mailto:]').addClass('mailto);
$('a[href$=.pdf]').addClass('pdf');
$('a[href^=http] [href*=milan]').addClass('milan');jQuery also covers all possible events (click, blur, focus, dblclick, and so on), visual effects (hide, show, toggle, fadeIn, fadeOut, and so on), or DOM manipulations (appendTo, prependTo, and so on). It has a full suite of AJAX capabilities, which are really easy to use, such as:
$.get('test.html', function(data) {
$('.result').html(data);
});But we will have a better look at more jQuery features in further tasks and chapters.
See also
Chapter 1, Ajax using jQuery
Chapter 2, jQuery UI
Chapter 3, Useful tools using jQuery
