I know most of the stuff I am going to talk about is available in the other popular javascript libraries, but I also know the philosophy and method behind jQuery is great and that the documentation is superb.
First of all, jQuery has great documentation at jQuery.com and also visualjquery.com. For the most part I do not go to the visuajquery.com site as it is more of a platform to show off what you can do with the library. For those that like fancy presentation that is a great place to go though.
The core jQuery library is very small. If you are not planning on modifying the core code (which you probably shouldn’t in a production environment), then just download the latest compressed version. As of right now, the compressed library is only 19k! It takes the philosophy of Firefox, with a very small footprint and a lot of different plugins you can download. All you need to do to “install” a plugin, is download or write the javascript function and include it in your page along with the core jQuery library. Below are some of my favorite pieces of jQuery along with the plugins I have tested.
The power of the core jQuery library is the DOM selection process. To select any element on a page, is use the $(element) syntax. For the basics, you can select items by ID, name, class, type. For example to select a tag with the id of “test”, you would use $(”#test”). At the bottom of this article I will put a getting a quick start guide on how to get going right away with jQuery.
1. Dimensions - This plugin is essential if you want to use some nifty effects but at the same time want to be cross browser compatible. The coolest part of this library, is it allows you to fix the age old problem of having two “divs” be the same height, and it takes very little code. Here is an example from one of my sites.
$(document).ready(function() {
if($j("#leftContent").height() > $j("#rightColumn").height()) {
$j("#rightColumn").css("height",$j("#leftContent").height() + "px");
$j("#leftContent").css("height",$j("#leftContent").height() + "px");
} else {
$j("#leftContent").css("height",$j("#rightColumn").height() + "px");
$j("#rightColumn").css("height",$j("#rightColumn").height() + "px");
}
});
What it does is use $(document).ready(); which simply runs whatever you put inside the function when the page is ready. In fact, for your site specific code just have one $(document).ready() function and put all of your code inside there. The code above will resize the right and left column to be equal. If you didn’t have dimensions it would take a lot more code to make it cross browser compatible.
2. Thickbox - Really, this is just lightbox with a much smaller footprint and better performance. It also has great documentation from the creator. The creator is a brilliant programmer who regularly mocks the 2.0 movement while at the same time creating libraries for the perpetuation of it. Classic!
3. CurvyCorners - My frustration with corner rounding libraries has always been that it won’t allow you to have a border that is a different color than the background. Well now you don’t have to worry about it. This library is now compressed so it is still really small. To use it all you do is use this syntax $(”.myBox”).curvy(settings). Check out the link to see more details on the settings you can use. The coolest is anti alias so you can actually get smooth corners.
I know there are probably some Scriptaculous users out there saying “Well where are all the fancy effects?!”. Well, never fear, they are here - Interface plugin. The effects include: animate, effects(pulsate, slide, shake, blind, fold, scrollto, scrolltoanchors, drop, open / close / switch, bounce, transfer, grow / shrink, puff, highlight), draggables, droppables, sortables, selectables, resizables, slider, tooltips, slideshow, imagebox, autocompletion, autoscrolling, autoexpander, accordion, tabs in textareas, 3D carousel, fisheye menu. The coolest thing about this plugin is that the download on these pages lets you select whichever pieces you want and then automatically compresses that set of plugins for download so they will still have a small footprint. I haven’t used many of these different effects, so I can’t comment on many of them.
To get started with jQuery, first download the compressed core library and put it wherever you are placing all your javascript files. After you do this, download any of the plugins you want and put them in another file called plugins.js or pick another name if you want. I like putting all the plugins in one file so I don’t have a million includes. Some people have different plugins for different pages, but I tend to think if the plugin is used on only one page I shouldn’t even have it. In general I think that is a good practice. Below is an example from my pages with the includes for the js files.
<script type="text/javascript" src="/includes/jquery/jquery.js"></script> <script type="text/javascript" src="/includes/jquery/plugins.js"></script>
These includes need to be in the head section of your page. Then, create another .js file with all of your page actions. These can be page or section specific if you have a lot of events and want to cut down on the javascript on each page. For example you can have a file called home.js, and include it like this.
<script type="text/javascript" src="/includes/jquery/home.js"></script>
In home.js put all of your code in a $document.ready(function(){}) like below.
$(document).ready(function() {
$("tr:nth-child(even)").addClass("even");
$("#loginExpand").toggle(
function(){$("#loginBox").show(); $("#innerLoginBox").fadeIn("slow");},
function(){$("#innerLoginBox").fadeOut("slow",function() {$("#loginBox").hide();}); }
).css("cursor","pointer");
});
What the above code does, is first waits for the document to be fully loaded in the browser. It then gives every other table row the class of even. That is how easily you can do colored table rows. The code below that makes a link that fades and hides a login box and makes the link have a cursor pointer. These are just a few examples, but you can do a lot more. If you want to use AJAX to load content into a certain element it is trivial, which I really haven’t mentioned it. You simply do something like this $(”#dynamicbox”).load(”mypage.html”). Anything returned from the .html page (or any type of page like php, asp, or whatever) will replace the html currently in the selected element. If you have any questions about the library or are stuck on anything just send an email to tmiskin@gmail.com and I will answer it either on the blog or over email
Leave a Reply