1 / 17

CSC 3084: Web Development and Programming

CSC 3084: Web Development and Programming. Chapter 11: How to Create and Work with Plugins. 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 .

Download Presentation

CSC 3084: Web Development and Programming

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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

More Related