Creating dynamic websites using jQuery.
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.
What Is jQuery?
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):
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:
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.
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.
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 (firstname.lastname@example.org) 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.
|Printer friendly Cite/link Email Feedback|
|Publication:||Computers in Libraries|
|Date:||Jul 1, 2010|
|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.|