September 2, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

The Top 10 jQuery Plugins for the JavaScript-Weary

  • March 3, 2010
  • By Jason Gilmore
  • Send Email »
  • More Articles »

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');



Tags: CSS, JavaScript, jQuery, user-generated content, user interface



Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel