At the Forge - jQuery Plugins

Learn how to use jQuery plugins, one of the secrets to this JavaScript library's success.
Menus

Another common task people want to do in JavaScript is produce menus, including hierarchical menus. Indeed, if I think back several years, menus probably are one of the things for which my clients have most commonly asked. One of the best-known methods for creating menus with CSS is known as Suckerfish, because of the sample data that was used to show the technique.

There are many jQuery-based menu libraries, but one I've grown to enjoy is called Superfish, because it adds functionality to the Suckerfish style of menu. It handles submenus, adds shadows and even tries to be intelligent about when you plan to open the menu and when your mouse is passing by, using a separate plugin known as hoverIntent.

To use Superfish, you need to download and install the plugin. Then, you need to create a menu using a combination of <ul>, <li> and <a> tags. If you need a secondary hierarchy of menus, you can create one with a nested <ul> in an <li> tag. In each <a> tag, the href identifies which div on a page should be displayed when that menu item is clicked on, hiding all of the other divs by default.

You undoubtedly will want to start off with the Superfish CSS file that comes with the plugin. You always can modify it to suit your needs. There are large numbers of definitions, and I've never been able to build the CSS file from scratch. Instead, I've modified the existing one, changing it to suit my needs.

As always in jQuery, you use the plugin by attaching it to an element of the HTML page. Instead of using the element's ID, as you did with DataTable, here you attach it to the <ul> tag with a class of sf-menu:


<script type="text/javascript">
  $(document).ready(function () {
          jQuery('ul.sf-menu').superfish();
      });
</script>

If there were more than one <ul> with that class, Superfish would create menus on all of them. Remember, the jQuery object can return any number of page elements: zero, one or a large number. The full HTML for the example is shown in Listing 2.

Conclusion

Plugins are the secret to jQuery's success, and there are so many plugins for jQuery, it's impossible to describe them all here. But, as you can see from these two examples, using the plugin often requires very little effort. Once you get the hang of it, downloading, installing and using plugins becomes second nature. I've found it can be useful to create a simple, small HTML file with dummy data and use a jQuery plugin with that, just to understand the basics of how to use a plugin.

There are times when plugins clash with one another, in that they're both trying to rewrite the HTML, sometimes in conflicting ways. For example, I recently used DataTable along with with a jQuery tab widget, and it took me a while until I could ensure that everything was visible on the page. As jQuery plugins become increasingly sophisticated, we might have to worry about this more and more.

For now, however, jQuery plugins are a fun and easy way to spruce up your Web application. Next month, I'll explain how to design your own plugin, delving a bit deeper into jQuery's plumbing and understanding how jQuery takes advantage of JavaScript's quirks to give us an extensible platform for client-side programs.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Previous Article on jQuery

Face blogger's picture

The previous article on jQuery is available here - Last month Linux Journal
http://www.linuxjournal.com/article/10335

errtheblog.com/posts/73-the-j

Anonymous's picture

errtheblog.com/posts/73-the-jskinny-on-jquery is a broken link, download something that can't be open

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState