jQuery

jQuery is a popular, free and open source javascript library used in web development. What this means is that common functionality spanning many lines of javascript code can be written in a few lines using this library. Most of the technicalities for example how to deal with browser differences and coding efficiencies are hidden from you. This is a good example of code reuse. You benefit from code that is expertly written and widely used, tested and fine tuned.

Let's look at an example. In this example I create a modal popup. Modal meaning that it takes control of the window not allowing you to interact with the background page until the popup is closed. To be able to use the jQuery functions you must include the relevant jQuery libraries and stylesheets. Pay attention to the version that you need to use. In this example I used the latest version 1.4.2. You can download and host the library yourself or you can use a publicly accessible library for example from Google. Once you become familiar with the syntax and what the library offers then following the documentation or examples and customising to suit is painless.

<!-- link to jQuery stylesheets -->

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.0/themes/base/jquery-ui.css">

<!-- link to jQuery libraries -->

<script src="http://www.google.com/jsapi?key=YOUR_API_KEY" type="text/javascript"></script>
<script type="text/javascript">
    google.load("jquery", "1.4.2");
    google.load("jqueryui", "1.8.0");
</script>

<!-- display a modal popup when the link is clicked -->

<script type="text/javascript">
$(document).ready(function() {
    var $dialog = $('<div></div>')
        .html('Hello World!')
        .dialog({
            autoOpen: false,
            title: 'HASSANTT.COM',
            modal: true
        });

    $('#my_link').click(function(event) {
        event.preventDefault();
        $dialog.dialog('open');
    });
});
</script>

<a href="#" id="my_link">Click ME</a>

jQuery is a step above javascript in terms of code reuse but it doesn't stop there. You can get pretty sophisticated with jQuery itself and create all sorts of elegant features and then package it as a plugin for resuse by anyone with basic web development/design skills. For example the jQuery LightBox plugin.

No comments:

Post a Comment