We all love jQuery. Its a simple fact that it provides powerful tools to get your JavaScript done right. However, one of its most powerful features is its extensiblity, and many developers have taken full advantage of this. This has created plenty of plugins to choose from, and today we are going to look at some of our favorite ones to hit the scene.
#10: jQuery UI
Site | Demo
This is one of the most extensive and flexible JavaScript UI frameworks out there. jQuery UI offers up everything from simple yet fancy buttons to complete accordions and autocompletes. It also has a pretty simple and powerful dialog framework that makes popups a snap. However, the best part about the whole deal is that you can create your very own theme right on the website, to fit your style, complete with custom-colored images and all.
Quick Snippet:
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the ‘x’ icon.</p>
</div>
#9: Roundabout
Site | Demo
Sliders are not only one of the most popular ways to fancy up a dull site, but they can be quite a tedious pain to implement. There are plenty of options to choose from when it comes to plugins in this area, but the Roundabout is one of the best. It offers a neat style and is quite easy to get up and get running. It’s also flexible enough to morph into other uses, such as animations or a neat way to pick form values.
Quick Snippet:
<li><span>Block 1</span></li>
<li><span>Block 2</span></li>
<li><span>Block 3</span></li>
<li><span>Block 4</span></li>
<li><span>Block 5</span></li>
</ul>
#8: Slides
Site | Demo
While Roundabout offers a neat, new-age way to rotate through summary-type content, sometimes you need something a bit less fancy. This is where slides comes in. It will give you an easy option for “sliding” between content, but is open enough to give you control over the things you want, such as style and transitions. To top it all off, it gives you paging right out of the box, which is always nice to have for sliders.
Quick Snippet:
<div class="slides_container">
<div>
<h1>Slide 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h1>Slide 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h1>Slide 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<h1>Slide 4</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
</div>
#7: Simple Modal
Site | Demo
One thing that makes Simple Modal attractive is its name sake…its simplicity. Its lightweight and requires very little setup to get going. Some modals out there require a lot of elements to be on the page or complicated style setup, but not Simple Modal. However, like any self-respecting plugin, all of the setup is exposed, so if you really want to go overboard with styles and just animations, you can.
Quick Snippet:
#6: qTip2
Site | Demo
When you need tooltips and mouseovers to be exactly what you want, in the position that you want, the style that you want, qTip2 is your unequivocal answer. It offers not only a comprehensive list of options, but comes with some pretty snazzy styles right out of the box. You can also load all kinds of content inside your tooltips as well, from simple text or images to AJAX retrieved data. If you include qTip2 in your jQuery project, you will probably never need another solution for useful tooltip feedback.
Quick Snippet:
#5: jquery.cookie
Github
Despite the chocolate-chipy goodness we all want to think about right now, web cookies are still an important part of our developer lives. Pretty much any modern website uses them in some capacity. Luckily, using jQuery and the jquery.cookie plugin, accessing them via JavaScript is a breeze. A great example of a simple, effective solution.
Quick Snippet:
$.cookie(‘the_cookie’); // => ‘the_value’
#4: ColorBox
Site | Demo
Lightbox is an extremely powerful popup library for displaying and organizing media, with a lot of different offshoots to choose from. ColorBox is one of the offshoots. The difference is that it is designed to not only be lightweight and work with jQuery, but it is also extremely easy to customize it to the looks you want. Some of these types of plugins can be very complex, but luckily you have ColorBox on your side to simplify things up for you.
Quick Snippet:
<a class="group1" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a>
<a class="group1" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a>
#3: jQuery Mouse Wheel
Github
In straight JavaScript, handling the mouse wheel event can be tricky at best. To make things worst, jQuery does not have native support for getting the mouse wheel event. This is where the mouse wheel plugin comes in. It literally just adds a bindable event to jQuery so you can hook into the mouse wheel scroll event, for all your wheel scrolling pleasure.
Quick Snippet:
console.log(delta, deltaX, deltaY);
});
#2: jQuery Validation
Site | Demo
Validation is one of those necessary things that can require a lot of time. From creating complex regular expressions, to styling things to make errors obvious to the user, it can be quite a task. With all this in mind, it is quite amazing when you see how much of this can be accomplished with jQuery Validation, with a very minimal effort. It even hooks in some custom selectors to help you keep track of all your validated elements. You are not going to find a more comprehensive validation solution for jQuery, hands down.
Quick Snippet:
<fieldset>
<p>
<label for="cname">Name (required, at least 2 characters)</label>
<input id="cname" name="name" class="required" minlength="2" />
</p>
<p>
<label for="cemail">E-Mail (required)</label>
<input id="cemail" type="email" name="email" class="required" />
</p>
<input class="submit" type="submit" value="Submit"/>
</fieldset>
</form>
#1: Tablesorter
Site | Demo
Most solutions for handling tables and the data therein are server/client-side meshes that provide a good way to show and organize data. The only issue with that is speed, which can suffer if you have such a complex solution. Tablesorter helps to aliviate some of this issue by, well, helping you sort your tables on the client-side. It can sort a lot of options for sorting all kinds of data, and has a pleasingly simple design. A great addition to any data-driven interface.
Quick Snippet:
<thead>
<tr>
<th>first name</th>
<th>last name</th>
<th>age</th>
<th>total</th>
<th>discount</th>
<th>date</th>
</tr>
</thead>
<tbody>
<tr>
<td>peter</td>
<td>parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>jul 6, 2006 8:14 am</td>
</tr>
<tr>
<td>john</td>
<td>hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>dec 10, 2002 5:14 am</td>
</tr>
</tbody>
</table>
So there you have it. Ten awesome jQuery plugins that will help you in just about any situation you may find yourself in. That is the beauty of something as robust as jQuery, you can always find an easy to use and quick to implement solution for the problem at hand.
So this wraps it up for now. Just remember, if you need coding help, all you have to do is Switch On The Code.