http://www.developer.com/

Back to article

The Top 10 jQuery Plugins for the JavaScript-Weary


March 3, 2010

jQuery's user-friendly syntax and powerful features are clear evidence of the innovative thinking that has sparked a JavaScript renaissance within the web development community. However, jQuery's popularity is also due in part to the ease with which extensions can be created and shared among the open source project's hyperactive user community. The result is an ecosystem of over 4,250 plugins available through the jQuery Plugins web site alone, and thousands of others hosted on sites such as GitHub.

In this article, I'll introduce you to 10 particularly compelling jQuery plugins, which you can use to enhance your web site in fascinating ways.

1. jQuery Hotkeys

Led by none other than jQuery creator John Resig, jQuery Hotkeys allows you to add hot key capabilities to your web application, much in the same way Google's GMail service allows you to use keyboard shortcuts to manage your e-mail more effectively. Capable of not only recognizing the press of a particular keyboard key, such as S or Shift, jQuery Hotkeys can also detect complex events such as Alt + Ctrl + '.

To install jQuery Hotkeys, use the project's GitHub repository. Of course, as with all of the plugins introduced in this article, you'll need to also install the jQuery library. Once installed, you'll be able to listen for keyup, keydown, and keypress events, like this:

$(document).bind('keydown', 'a',
    function (evt) {alert("You pressed a");});


jQuery Hotkeys seems to be working on all major browsers, with the caveat that some browsers (notably Internet Explorer, Opera, and Safari) will not respond as expected in situations where the developer attempts to override a keyboard shortcut that the browser has already defined for another purpose.

2. EZPZ Hint Plugin

Sometimes it seems no matter the number of visual cues you provide users, they somehow manage to ignore certain fields or provide incorrect information. One way to make your intent abundantly clear is to provide an additional textual cue directly within the form field itself (see Figure 1). So as not to interrupt the user's form interaction, it's useful to clear this text from the field when the user focuses on it.


Figure 1.
Providing Visual Cues Within Form Fields with EZPZ

The EZPZ Hint plugin handles the form fields' textual population and the automatic removal of the text when the user brings the field into focus. It populates the field using the text found in the field element's title attribute. Here's an example:

<input type="text" name="fname" value="" size="25" class="register" title="e.g. John" />


You can then use EZPZ Hint to apply the effect to any fields having, for instance, the register class using the following line:

$("input.register").ezpz_hint()


EZPZ Indeed!

3. jQuery Pagination

jQuery's Pagination plugin makes it trivial to paginate otherwise lengthy content, and it doesn't force the user to endure annoying load times each time a new page is displayed.

The paginated content can originate from a variety of sources, such as a series of hidden DIVs located within the page, or from a JavaScript array (often retrieved from a database using Ajax and JSON; see the Internet.com video tutorial "PHP & JavaScript Using JSON" for more information), with the Pagination plugin splitting the array over a predefined number of pages as determined by the developer. The plugin will create a paging toolbar based upon the predefined number of desired pages, complete with links to each page.

To install Pagination, head over to the project's home page and download the latest release. We'll use an example adapted from one of the Pagination demos found in the code download to create the pagination control displayed in Figure 2.


Figure 2.
Paginating Through the Latest EasyPHPWebsites.com Books

Integrate the JavaScript and CSS files, and add the following JavaScript function to the page:

function pageSelectCallback(page_index){
  var content = $('#books div.book:eq('+page_index+')').clone();
  $('#book-display').empty().append(content);
  return false;
}


The pageSelectCallback() function is responsible for swapping the #book-display content with that found in the #books element's next nested DIV offset. Note how the content is cloned rather than moved in order to allow the user to repeatedly cycle between the various pages.

Because pageSelectCallback() is a callback function, it isn't called directly, but rather by another function. This other function is initPagination(), which is responsible for creating the list of page links (inserting them into the DIV identified by #Pagination, and executing pageSelectCallback() when the user clicks on a page number):

function initPagination() {
  var num_entries = $('#books div.book').length;
  $("#Pagination").pagination(num_entries, {
    callback: pageSelectCallback,
    items_per_page: 1
  });
}


To keep things simple, I've used just two of the available options (callback and items_per_page). However, several other options are at your disposal.

Finally, add the usual $(document).ready() call, triggering initPagination() to execute when the page has loaded.

  $(document).ready(function() {
    initPagination();
  });


Next, you'll add the DIVs used to store the various "pages." The book-display DIV will host the pagination menu, whereas the hidden books DIV holds the three book DIVs that store the page-specific content. For the purposes of space, I've trimmed the page 2 and 3 content.

<h1>The Latest EasyPHPWebsites.com Books</h1>
<div id="Pagination" class="pagination">
</div>
<br style="clear:both;" />
<div id="book-display" style="width: 550px;">
  Page-specific content will be placed here.
</div>
<div id="books" style="display:none;">
  <div class="book">
    <p>
      <img src="22.png" />
      <b>Easy PayPal with PHP</b><br />
      Price: $15<br />
      Book description
    </p>
  </div>
  <div class="book">
    <p>Book Two</p>
  </div>
  <div class="book">
    <p>Book Three</p>
  </div>
</div>


4. jQuery tinyTips

Tooltips such as that shown in Figure 3 can be a convenient way to provide additional information to the user without further cluttering the page. tinyTips is a recently released plugin that makes the addition of tooltips a breeze!


Figure 3.
Creating a Tooltip with tinyTips (screenshot taken from tinyTips demo)

Like EZPZ Hint, tinyTips works by inserting the value of a predefined attribute into the tooltip. Mouseover events are detected by associating the tinyTips() method with an element, as demonstrated here:

$('.tTip').tinyTips('title');


5. jQuery Facebox

Facebook's interface has really excelled in its use of floating dialog windows, which allow the user to perform certain tasks (such as send friend requests) without having to tediously navigate multiple pages. The Folks at FamSpam apparently like the effect so much that they created a custom jQuery dialog plugin themed in homage to Facebook. The result is a great looking dialog, complete with curved corners, as shown in Figure 4.


Figure 4.
Using the Facebox Plugin (screenshot of demo on Facebox web site)

Yet Facebox's appeal is more than skin deep; in addition to text, it can display images, remote pages, and even Ajax-initiated content. To give you a taste of just how easy it is to integrate Facebox into your site, we'll consider a simple example involving a warning message.

Using Facebox is incredibly simple; just head over to the project's home page and download the latest release. Then integrate the Facebox JavaScript and CSS file into your site. One caveat: you'll need to place the Facebox directory in your web site's root directory because of path definitions in the CSS file.

Next, define both the content you'd like to appear in the Facebox dialog and the link used to display the dialog.

<a href="#info" rel="facebox">Please read the warning</a>
<div id="info" style="display:none;">
 <b>Warning</b>: You are about to enter a super-duper restricted area.
</div>


Next, add the following JavaScript, which triggers the dialog display. This JavaScript attaches an event listener to all hyperlinks assigned the attribute rel=facebox. You can use the loading_image and close_image attributes to define graphics that inform the user that the information is still loading (as might be the case when pulling data from the server) and as an icon for closing the window, respectively.

<script type="text/javascript">
jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox({
    loading_image : '/facebox/loading.gif',
    close_image   : '/facebox/closelabel.gif'
  })
})
</script>


Executing this example produces the dialog shown in Figure 5.


Figure 5.
Creating a Simple Facebox Dialog

6. jQuery Expandable

By their very nature, textarea fields consume quite a bit of valuable screen real estate. As such, they often force developers to limit the user's ability to review all of the entered text simultaneously. The jQuery Expandable plugin solves this dilemma by allowing the developer to define textareas of any size, while enabling the textarea size to expand as the user begins to exceed the predefined textarea boundaries.

Attaching this behavior to a textarea requires just one line of code:

$('#expandableDemo').expandable();


7. jQuery Timeago

It's often useful to provide users with a temporal reference of the last time they interacted with a form element, last saved their work, or opened a particular page. The team over at Yarp built a very impressive plugin called Timeago, which is capable of doing all of the dirty work for you! Figure 6 illustrates how the plugin is utilized at Yarp, allowing users to keep close tabs on how much time has passed since a comment was posted.


Figure 6.
Keeping Tabs on Elapsed Time at Yarp

To begin using Timeago, just download the latest version from the site and install it per usual. Next, decide what page elements you'll be associating with Timeago, and attach the timeago() method to them, as demonstrated here:

 $(document).ready(function() {
     $("b.timeago").timeago();
 });


Finally, add the page elements and insert an ISO 8601- formatted timestamp within the element title. Timeago will automatically convert these timestamps to the human-friendly phrases, and regularly update them as time passes. Because you're presumably pulling these timestamps from a database such as MySQL, they likely will have an ugly syntax. But don't worry because most languages and databases support an easy conversion feature. Here's an example of what one such page element will look like:

<b class="timeago" title="2010-02-25T014:18:17Z">Last Updated</b>


Rendering a page with this particular timestamp to the browser produces the output displayed in Figure 7.


Figure 7.
Rendering a Timestamp with Yarp

8. jQuery Password Strength

Prompting users to provide sufficiently strong passwords when they create accounts can be a challenge. Of course, you don't want to frustrate the user by repeatedly informing him that the password he's chosen doesn't meet the required level of security. Using the Password Strength plugin, you can provide users with real-time feedback regarding the password strength (see Figure 8)!


Figure 8.
Checking Password Security Level with Password Strength (screenshot taken from Password Strength demo site)

9. jQuery Corner

Have you ever wanted to use rounded corners as element borders but were confounded by CSS and image layout issues? Enter the jQuery Corner plugin, which completely removes all such complexity with a single line of code. For instance, the rounded corners in Figure 9 were created with nothing more than the CSS border attribute and a single call to Corner!


Figure 9.
Creating rounded corners with Corner

To recreate this effect, download jQuery Corner and integrate it per usual into your web page. Then define the element that you will modify to use the rounded corners, as demonstrated here:

<div id="menu">
  <a href="">Google Maps API</a><br />
  <a href="">jQuery</a><br />
  <a href="">MySQL</a><br />
  <a href="">PHP</a><br />
</div>


Next, define the CSS that will be used to specify attributes such as the element width. The only one that really counts to Corner is the border attribute:

#menu {
 border: 1px solid red;
 padding: 5px;
 width: 150px;
};


Finally, add the JavaScript that tells Corner which element(s) to round!

$(document).ready(function() {
$("#menu").corner("round corners 2");
})


10. jQuery Word and Character Counter

You should often limit the number of characters that users can enter within textareas such as blog comments. To help the user keep tabs on his current character count, check out the jQuery Word and Character Counter, which can provide real-time monitoring of this important metric.

Share Your Top Pick

Have you written your own jQuery plugin for UI enhancement, or do you want to mention one not introduced in this article? Tell me about it in the comments!

About the Author

Jason Gilmore is founder of EasyPHPwebsites.com. He is the author of several popular books "Easy PHP websites with the Zend Framework," "Easy PayPal with PHP," and "Beginning PHP and MySQL, Third Edition."

Sitemap | Contact Us

Thanks for your registration, follow us on our social networks to keep up-to-date