Getting Started with jQuery

by Marc Plotz

October 01, 2009

Introduction

Ok, before we get started here I'd like to admit something, I used to hate Javascript.

It all used to seem like one enormous nightmare to get the simplest of things working properly. Granted, I did not know much about JavaScript a few years ago, but I learned to code with PHP--which to me just makes everything so simple. Now, however, I can live with JavaScript, although we still tend to have our disagreements! (most of these relate to DOM problems, but we'll leave it at that.)

Then long came jQuery and JavaScript became fun. To those reading this who use JavaScript and have never heard about jQuery, let me assure you that your coding life is about to change.

Before we get into it, download the example HERE. The code is not mine--I'm merely showing you examples of how to use it. Luckily jQuery is open-source and thus free to use!

But where did jQuery come from, you may ask? Well, jQuery is a lightweight Javascript library originally written by John Resig and released in 2006. Since then it has grown in such leaps and bounds that Microsoft and Nokia have announced plans to bundle jQuery on their platforms, Microsoft adopting it initially within Visual Studio for use within Microsoft's ASP.NET AJAX framework and ASP.NET MVC Framework whilst Nokia will integrate it into their Web Run- Time platform.

jQuery makes JavaScript do things simply, the way it should be. The way it works is just as simple, but the first thing you need to do is grab a copy of the file from http:// docs.jquery.com. Unzip it and drop the jquery.js file into your JS directory and you are all set to go.

Ok, so I could take you though all the hello world stuff, and we could look at cute examples all day. But let's play with some fun things rather.

Accordion

Probably one of the simplest and best looking effects you could get is an accordion. I have used it more than once as a sidebar navigation tool, and it works amazingly well. JQuery works by reserving the DOM until it is ready to work- -once the page has actually loaded and is fully functional. So to create an accordion with jQuery, we can create a very simple HTML page like this:

Figure One

Have a look at example one in the examples pack you downloaded for the accordion effect. Note the code on line 11. In jQuery, this is the code actually doing the work. Everything you really need to do Javascript-wise is done here. The rest is essentially the HTML bit. We will see as we progress that line 11 features a lot in our work as we start to have some real fun.

Tabs

Tabs are a lot of fun. I have recently built quite a comprehensive administration console employing these tabs to good effect. For a standard tabs interface we start with an HTML page that looks something like this:

Figure Two

Now you will notice that you have three tabs, and these three tabs, when clicked, display the relative content below--as seen in example two of your download pack. But what if we wanted to make those tabs draggable? This is clearly going to be a mission, I hope you have got your thinking caps on because I actually have to add a few characters to our code. Ok, get ready. This is going to take a long time, right? I mean, this is a major effect!

Ok, so line 11 of example2.html is:

$('#tabs').tabs();

And we will now have to alter that line code to read

$('#tabs').tabs().find('.ui-tabs-nav').sortable({axis:'x'});

And that is that. Check out example Three of the download pack. The tabs are now sortable! And it took like 10 seconds to make that happen!

What you are seeing here is that jQuery is extremely simple to use and very easy to change from one effect to another. Sticking with the Tabs, want to make the content in the tabs collapsible as well as having the sortable tabs? We go back to line 11 of our example page, and recall that it now looks like this:

$('#tabs').tabs().find('.ui-tabs-nav').sortable({axis:'x'});

And we simply add the collapsible: true instruction as follows:

$('#tabs').tabs({collapsible: true}).find('.ui-tabs-nav').sortable({axis:'x'});

Thus, you will see that our HTML for example4.html now looks like this:

Figure Three

So, looking at example 4, the tabs are now horizontally sortable and if you click on a tab twice the content collapses. How simple was that? I say very! How long would it have taken you to do this with conventional HTML? A week? Two weeks? I just did it in 5 minutes. And like I said before--Javascript and I are not friends.

AJAX Loading Content

Ok, I'm going to play out with something I think will blow your mind away. AJAX loading content in tabs. So you click on a tab and it loads the content in the div below from another page via AJAX. All pretty much standard stuff when it gets to jQuery. All right, you actually got me on this one though--it requires substantial work. Well, substantial in a jQuery way, which means we have to add some anchor tags.

Let me explain: Look at example 3, which is simply sortable tabs:

Figure Four

What we first need to do is create three HTML pages that will be the content that is AJAX loaded into our tab content areas. I will call these pages tab2.html and tab3.html. For interest sake we are going to only load tab 2 and 3 using AJAX. Now we have to do some really hard grinding. Note Figure Five, below:

Figure Five

You will see that all I did was remove the content divs for tabs 2 and 3 and I just pointed the tab itself to the content that I wanted loaded. Nowhere did I even ask jQuery to use AJAX. It just knows that if it can, it must. Is that power? I think it is.

Conclusion

Alas, the time has come for me to go for now. I hope that you were actually interested in this article. It is just a very small snippet of what jQuery can do and I promise you that once you have done a search for jQuery plug-ins you will never be bored again. They're that much fun!

Until next time...

About the Author

Marc Steven Plotz is a Senior Software Developer for a major South African web development company specializing in the development of enterprise-class web applications and rapid application development frameworks. He is also a technical writer for various developer websites focusing on open source topics like PHP, CSS, HTML and Javascript. He lives in Pretoria, South Africa, with his wife and two children.