CSC 3084: Web Development and Programming

1. CSC 3084:Web Development and Programming Chapter 11: How to Create and Work with Plugins

2. Chapter Overview • By the end of this chapter, you should be able to: • Use any of these plugins to enhance a web page: Lightbox, bxSlider, Cycle, or jLayout. • Describe the API standards for creating a jQuery plugin in terms of implicit iteration, chaining, and defaults. • Given the specifications for a jQuery plugin, create it.

3. A Few Websites for Finding jQuery Plugins • A jQuery plugin is simply some JavaScript code that extends the functionality of jQuery in some useful way • The easiest way to find plugins for a particular function (e.g., slide shows, tabs, menus, etc.) is a regular Google search, but you can also check out these websites: • jQuery Plugin Repository plugins.jquery.com • jQuery Plugins www.jqueryplugins.com • Google Code code.google.com

4. A Few Plugins for Displaying Images • Here are a few popular plugins for displaying images you could check out. There are lots of others! • Lightboxlokeshdhakar.com/projects/lightbox2/ • Fancyboxfancybox.net • ThickBoxjquery.com/demo/thickbox • ColorBoxwww.jacklmoore.com/colorbox • Shadowbox.js www.shadowbox-js.com

5. Plugins for Slide Shows, Carousels, and Galleries • bxSlider bxslider.com • Malsup jQuery Cycle jquery.malsup.com/cycle • jCarousel sorgalla.com/jcarousel • Nivo Slider nivo.dev7studios.com • Galleria galleria.io • AD Gallery coffeescripter.com/code/ad-gallery • Your textbook lists lots of other plugins for things like text layout, forms, interface design and mobile design. Between these and a Google search for popular jQuery plugins you can find some excellent resources.

6. General Steps for Using a Plugin • Read the documentation and look at examples! Also make sure that the plugin is compatible with the version of jQuery you are using. • In the head of your page, first load jQuery and then load the plugin. • Load any CSS stylesheet(s) that accompany the plugin. • Code the HTML and CSS for the page so it is appropriate for the plugin. • Write the jQuery code that uses the methods and options of the plugin.

7. Example: bxSlider • Head over to bxslider.com • Shrink and expand the browser window. What happens to the carousel? • That’s the main point/benefit of this plugin. • Have a look at the examples and how easy it is to code up a variety of carousels and slide shows with this plugin • Note both the JavaScript and the HTML code

8. Example: Lightbox2 • Head over to lokeshdhakar.com/projects/lightbox2 • Take a look at the examples • Note that it advertises it works on all modern browsers. This is a really key thing to pay attention to when looking for JavaScript/jQuery code and plugins on the web.

9. Example: Cycle2 • Head over to jquery.malsup.com/cycle2 • Click on the Examples link and take a moment to look around

10. Example: jLayout • This is a plugin for creating columns using JavaScript • Note that it is also possible to create columns with CSS • Head over to www.bramstein.com/projects/jlayout/jquery-plugin.html • The examples are at the bottom of the page

11. How to Create a Plugin • The structure of a plugin: (function($){ $.fn.methodName = function() { return this.each(function() { // the code for the plugin }); } })(jQuery); • The notation (function($){ … })(jQuery); defines an immediately invoked function expression, also called a self-executing anonymous function

12. How to Create a Plugin • Such code alters the scope of the jQuery library in a special way • Note that (function($){ … })(jQuery); includes the $, which is a reference to the jQuery library • Other libraries also use the $ to reference themselves, which means that a conflict can arise with $. If we are writing jQuery code, we want $ to refer to jQuery, not the other library • The notation you see above does just that. It makes sure that the scope of jQuery is limited (for now) to just the plugin so that uses of $ outside the plugin will refer to the non-jQuery library/libraries that are using $ for another purpose • We are calling an anonymous function with parameter $ and we are saying that jQuery is the value of that parameter

13. How to Create a Plugin (function($){ $.fn.methodName = function() { return this.each(function() { // the code for the plugin }); } })(jQuery); • The methodName name should reflect the name of the plugin • The code return this.eachindicates that the method is called on each object that the plugin is applied to • By returning the object that the method is called on we can do method chaining

14. How to Create a Plugin (function($){ $.fn.methodName = function() { return this.each(function() { // the code for the plugin }); } })(jQuery); • The fn is shorthand for prototype, which is an internal property every object has in JavaScript and is used to add new properties to objects • $.fn.methodName = function()means we are adding a method to the jQuery library (i.e., $) on-the-fly

15. A Simple Plugin • See JS Textbook Files\book_apps\ch11\selection • The plugin is in jquery.selection.js • This is the naming convention used for jQuery plugin files • In faqs.js, the plugin’s method is called on the #faqsh2 elements when the page is ready • The plugin is very simple: it just prints the text for the selected object

16. The API Standards for Plugins • The plugin should support implicit iteration by using the each method as we saw in the simple plugin. • The plugin should preserve chaining by returning the selected object. • The plugin definitions should end with a semicolon. • The plugin options should provide reasonable defaults. • The plugin should be well-documented.

17. Another Sample Plugin • See JS Textbook Files\book_apps\ch11\highlight • The highlightMenu plugin • Note that the same effects can be provided without JavaScript using just CSS • This plugin lets the user code provideoptions through a parameter(called options in this case) • These options are added to an objectcalled defaults that holds defaultoptions for the plugin