Printer Friendly

Creating dynamic websites using jQuery.

[ILLUSTRATION OMITTED]

As e-resource systems and web coordinator for Southern Oregon University, I am deeply involved with the university library's website. In the latest revision of this website, I knew I needed to jazz it up a little. With screen real estate on our main page at a premium, I hoped to use a tabbed box and an accordion-style control to keep things findable without overcrowding the page.

Implementing both the tabbed panels and the accordion control proved more difficult than I had anticipated. I began by using Dreamweaver's Spry Widgets, which provide "plug and play"-style widgets with just a few clicks of the mouse. Unfortunately, this attempt was plagued by technical difficulties. So I took stock of alternative approaches. Luckily, there are several JavaScript libraries that provide similar widgets. These include MooTools, Prototype, Dojo, script.aculo.us, and Yahoo! User Interface. Ultimately, however, I chose jQuery to help me.

[ILLUSTRATION OMITTED]

What Is jQuery?

So what's jQuery? It's a powerful set of JavaScript libraries for selecting elements and then operating on them using a CSS-like syntax. Basically, it allows you to use JavaScript at a macro level so that you don't have to do all the microcoding. This makes it significantly easier to use. Also, a number of Ajax-style plug-ins have been developed and are out there to share, making it even easier. It was originally developed by John Resig and released in early 2006. Since then, it has gained a fair amount of traction among web developers. Several major websites use it, including Google, Mozilla, WordPress, and Netflix.

Why use jQuery? I've already mentioned that it's relatively easy to use. It's also open source, so it's free too (although you should keep the original copyright statements intact in the code). Unlike some of the other JavaScript libraries, it has excellent documentation. It has cross-browser support, which, if you've done any web work at all, you know is essential. It's lightweight, so it won't bog your site down. And it's customizable, so you can alter the look and feel of the widgets to match your website. Finally, it provides an opportunity to have that "Web 2.0" look on your website without necessarily having all the expertise to do it yourself.

That being said, you do need to know a few things. You need to feel pretty comfortable using HTML and CSS. Of course, it would be a bonus to know some JavaScript (and some developers say it's a requirement). But I found that you can use some of the widgets that are already developed by writing a minimal amount of JavaScript. To learn more about jQuery, go to its website at http://jquery.com.

How to Work jQuery

So let's get down to specifics. Here's what you need to do to get jQuery up and running on your website. The first step is to find a widget or plug-in that you want to use. I'd recommend jQuery UI (user interface) as a place to start (http://jqueryui.com). Next, read the documentation for that widget and see how you need to set up your HTML and CSS. You have a choice for the next step: You can either download the code and host it on your web server or link to it elsewhere. What I did, and what I would recommend doing, was to link to it on the Google AJAX Libraries API server. It is still very quick and reliable. You can learn more about it at http://code.google.com/apis/ajaxlibs. If you're not sure whether this is the way to go, try reading Dave Ward's reasoning at http://encosia.com/2008/12/10/3-reasons-why-you -should-let-google-host-jquery-for-you. If you do decide to go with the Google linking, this needs to be placed in the head section (although you may want to check to see whether these are still the most recent versions):

<script type="text/javascript" src="h.ttp://ajax.googleapis.com/ ajax/libs/jquery/1.4.2/jquery.min.js"></soript>

<script type="text/javascript" src="h.ttp://ajax.googleapis.com/ ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Note that the first script tag is loading jQuery itself. The second script is loading the jQuery UI library--which is necessary if you are using a widget from that library.

jQuery Widgets, Interactions, and Effects

Now the widget that you want to use needs to be called. My accordion widget came from the jQuery UI library. I needed my widgets to display as soon as the page was loaded, so here is the code I used:
<script type="text/javascript">
$(document).ready(function(){
$("#accordion").accordion({ active: 2 ));
});
</script>


Other widgets may require you to call them from within the body of the HTML document, so read the documentation carefully.

Keep in mind that you don't have to use the UI library to find jQuery widgets. There are many third-party plug-ins. I ended up getting my tabbed box code from the Sohtanaka Designer & Front-End Developer blog at www.sohtanaka.com/web-design/simple-tabs-w-css-jquery.

To give you a feel for what's available, here is the list of widgets in the jQuery UI as of this writing: accordion, auto-complete, button, datepicker, dialog, progressbar, slider, and tabs. For those of you with a little more JavaScript expertise, there are also "interactions" and "effects" available. The interactions include draggable, droppable, resizable, selectable, and sortable. The effects include effect, show, hide, toggle, color animation, add class, remove class, toggle class, and switch class. Visit the jQuery UI website to learn more about what these widgets, interactions, and effects can do. And remember, this is a major jQuery widget library, but there are others out there if you don't see exactly what you want.

The final step is to customize the look and feel of your widgets. Depending on what you're doing, you may be able to just work with the CSS that you have to get your desired look. However, there's also a great tool that can help you design the look of widgets from the UI library. It's called ThemeRoller (http://jqueryui.com/themeroller). This user-friendly website will let you design the look and feel of your widgets. Then, you can download the theme and use it. It's pretty slick.

[ILLUSTRATION OMITTED]

So if you're getting ready to revise your website, consider adding jQuery to your toolkit. It may be just the thing to give a little pizzazz to your interface.

Emily Miller-Francisco (millere@sou.edu) is the e-resource systems and web coordinator at Southern Oregon University in Ashland, Ore. She has shepherded the library's website through several major revisions over the past 9 years.
COPYRIGHT 2010 Information Today, Inc.
No portion of this article can be reproduced without the express written permission from the copyright holder.
Copyright 2010 Gale, Cengage Learning. All rights reserved.

 
Article Details
Printer friendly Cite/link Email Feedback
Author:Miller-Francisco, Emily
Publication:Computers in Libraries
Geographic Code:1USA
Date:Jul 1, 2010
Words:1106
Previous Article:Using video in your next presentation: a baker's dozen of ideas and tips.
Next Article:RSS made easy with engaged patrons and Yahoo! Pipes.
Topics:

Terms of use | Privacy policy | Copyright © 2018 Farlex, Inc. | Feedback | For webmasters