Chapter 11 How to create and use plugins

Chapter 11 How to create and use plugins Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 1

Objectives Applied 1. Use any of these plugins to enhance a web page: Lightbox, bxslider, Cycle, or jlayout. 2. Given the specifications for a jquery task for which there is a useful plugin, find and use the plugin to do the task. 3. Given the specifications for a jquery plugin, create it. Knowledge 1. In general terms, explain what a plugin is. 2. In general terms, describe the process of finding and using a plugin. 3. Describe the API standards for creating a jquery plugin in terms of implicit iteration, chaining, and defaults. Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 2

A Google search for validation plugins Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 3

Web sites for finding jquery plugins Site name jquery Plugin Repository jquery Plugins Google Code GitHub Sourceforge URL http://plugins.jquery.com http://www.jqueryplugins.com http://code.google.com https://github.com http://sourceforge.net Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 4

Plugins for displaying images Lightbox Fancybox ThickBox ColorBox Shadowbox.js http://lokeshdhakar.com/projects/lightbox2/ http://fancybox.net http://jquery.com/demo/thickbox http://www.jacklmoore.com/colorbox http://www.shadowbox-js.com Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 5

Plugins for slide shows, carousels, and galleries bxslider Malsup jquery Cycle jcarousel Nivo Slider Galleria AD Gallery http://bxslider.com http://jquery.malsup.com/cycle http://sorgalla.com/jcarousel http://nivo.dev7studios.com http://galleria.io http://coffeescripter.com/code/ad-gallery Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 6

Plugins for text layout UI Layout Masonry Columnizer jscolumns jlayout http://layout.jquery-dev.net http://masonry.desandro.com http://welcome.totheinter.net/ columnizer-jquery-plugin http://code.google.com/p/js-columns http://www.bramstein.com/projects/jlayout/ jquery-plugin.html Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 7

Plugins for forms Malsup jquery Form Ideal Forms http://jquery.malsup.com/form http://code.google.com/p/idealforms Bassistance Validation http://bassistance.de/jquery-plugins/ jquery-plugin-validation jqtransform Niceforms http://www. dfc-e.com/metiers/multimedia/ opensource/jqtransform http://www.emblematiq.com/lab/niceforms Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 8

Plugins for interface design jquery UI Wijmo http://plugins.jquery.com http://wijmo.com Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 9

Plugins for mobile development jquery Mobile jqtouch http://www.jquerymobile.com http://www.jqtouch.com Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 10

General steps for using a plugin 1. Study the documentation for the plugin. 2. Get the URLs for the plugin files if they re available via a CDN, or download the files and save them in a folder of your web site. 3. In the head element of the HTML for a page that will use the plugin, code the link elements for any CSS files that are required. Also, code the script elements for the JavaScript files that are required. 4. Code the HTML and CSS for the page so it is appropriate for the plugin. 5. Write the jquery code that uses the methods and options of the plugin. Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 11

Two cautions when using plugins Make sure that you include a script element for jquery and make sure that the script element for the plugin comes after it. Some plugins won t work with the latest version of jquery. So if you have any problems with a plugin, check its documentation to see which version of jquery it requires. Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 12

The script elements for the jquery library and the bxslider plugin <!-- the script element for the core jquery library --> <script src="http://code.jquery.com/jquery-latest.min.js"> </script> <!-- the script element for the downloaded plugin --> <script src="js/jquery.bxslider.min.js"></script> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 13

The HTML used by the bxslider plugin <ul id="slider"> <li><img src="images/building_01_thumb.jpg"></li> <!-- more li elements --> <li><img src="images/building_05_thumb.jpg"></li> </ul> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 14

The jquery for using the bxslider plugin $(document).ready(function(){ $("#slider").bxslider( { displayslideqty: 2, // a plugin option moveslideqty: 2 // another plugin option } ); }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 15

A Lightbox plugin The URL for this plugin http://lokeshdhakar.com/projects/lightbox2/ The link and script elements for the plugin <link href="lightbox.css" rel="stylesheet"> <script src="js/lightbox.js"></script> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 16

The HTML for the Lightbox plugin <a href="images/building_01.jpg" rel="lightbox[vecta]" title="front of building"> <img src="images/building_01_thumb.jpg"></a> <a href="images/building_02.jpg" rel="lightbox[vecta]" title="left side of building"> <img src="images/building_02_thumb.jpg"></a> <!-- more img elements within <a> elements --> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 17

A bxslider plugin used for a carousel The URL for this plugin http://bxslider.com The script element for the plugin <script src="js/jquery.bxslider.min.js"></script> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 18

The HTML for the bxslider plugin <ul id="slider"> <li><img src="images/building_01_thumb.jpg"></li> <li><img src="images/building_02_thumb.jpg"></li> <li><img src="images/building_03_thumb.jpg"></li> <li><img src="images/building_04_thumb.jpg"></li> <li><img src="images/building_05_thumb.jpg"></li> </ul> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 19

The jquery for using the bxslider plugin $(document).ready(function(){ $("#slider").bxslider( { displayslideqty:2, moveslideqty:2 } ); }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 20

A Cycle plugin used for a slide show The URL for this plugin http://jquery.malsup.com/cycle/ The script element for the plugin <script src="js/jquery.cycle.all.js"></script> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 21

The HTML for the Cycle plugin <div id="slideshow"> <img src="images/building_01.jpg" width="420" height="315"> <img src="images/building_02.jpg" width="420" height="315"> <img src="images/building_03.jpg" width="420" height="315"> </div> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 22

The jquery for using the Cycle plugin $(document).ready(function(){ $("#slideshow").cycle({ fx: "scrollhorz", // sets the transition effect speed: 500, // sets speed of transition timeout: 2000, // sets time between slides pause: 1 // pauses slide during mouseover }); }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 23

A jlayout plugin used to create two columns The URL for this plugin http://www.bramstein.com/projects/jlayout/jquery-plugin.html The script elements for the plugin <script src="js/jquery.sizes.js"></script> <script src="js/jlayout.grid.js"></script> <script src="js/jquery.jlayout.js"></script> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 24

The HTML for the jlayout plugin <div id="layout"> <div class="column1"> <!-- the content for the first column goes here --> </div> <div class="column2"> <!-- the content for the second column goes here --> </div> </div> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 25

The jquery for using the jlayout plugin $(function() { $("#layout").layout({ type: "grid", hgap: 27, items: [$(".column1").width(210), $(".column2").width(210)] }); }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 26

The structure of a plugin One way to code this structure (function($){ $.fn.methodname = function() { this.each(function() { // the code for the plugin }); return this; } })(jquery); The way most professionals code this structure (function($){ $.fn.methodname = function() { return this.each(function() { // the code for the plugin }); } })(jquery); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 27

A simple Selection plugin The jquery for a plugin in a file named jquery.selection.js (function($){ $.fn.displayselection = function() { return this.each(function() { alert("the text for the selection is '" + $(this).text() + "'"); }); } })(jquery); The script element for this plugin <script src="jquery.selection.js"></script> The jquery for using this plugin $(document).ready(function(){ $("#faqs h2").displayselection(); }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 28

Naming conventions for plugin files jquery.pluginname.js Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 29

The API standards for plugins The plugin should support implicit iteration. 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. Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 30

A menu that is highlighted by the highlightmenu plugin Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 31

The HTML for the menu <ul id="vecta_menu"> <li><a href="index.html">home</a></li> <li><a href="aboutus.html">about Us</a></li> <!-- the rest of the links for the menu --> </ul> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 32

The highlightmenu plugin in a file named jquery.highlight.js (function($){ $.fn.highlightmenu = function() { return this.each(function() { var items = $("li a"); items.css('font-family', 'arial, helvetica, sans-serif').css('font-weight', 'bold').css('text-decoration', 'none').css('background-color', '#dfe3e6').css('color', '#cc1c0d').css('width', '125px'); items.mouseover(function() { $(this).css('background-color', '#000').css('color', '#fff'); }); items.mouseout(function() { $(this).css('background-color', '#dfe3e6').css('color', '#cc1c0d'); }); }); } })(jquery); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 33

Code for using the highlightmenu plugin The script element for the plugin <script src="jquery.highlight.js"></script> jquery that uses the plugin $(document).ready(function() { $("#vecta_menu").highlightmenu(); }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 34

The highlightmenu plugin with options (function($){ $.fn.highlightmenu = function(options) { var defaults = $.extend({ 'bgcolor' : '#000000', 'color' : '#ffffff', 'hoverbgcolor' : '#cccccc', 'hovercolor' : '#000000', 'linkwidth' : '125px', }, options); return this.each(function() { var items = $("li a"); var o = defaults; items.css('font-family', 'arial, helvetica, sans-serif').css('font-weight', 'bold').css('text-decoration', 'none').css('background-color', o.bgcolor).css('color', o.color).css('width', o.linkwidth); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 35

The highlightmenu plugin with options (cont.) items.mouseover(function() { $(this).css('background-color', o.hoverbgcolor).css('color', o.hovercolor); }); }); } })(jquery); items.mouseout(function() { $(this).css('background-color', o.bgcolor).css('color', o.color); }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 36

jquery that sets two options of the highlightmenu plugin $(document).ready(function() { $("#vecta_menu").highlightmenu({ bgcolor: '#dfe3e6', color: '#cc1c0d', }); }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 37

The page layout for a page that uses two plugins Slide show Highlighted menu Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 38

The script elements for the page that uses plugins <!-- script element for the latest jquery library --> <script src="http://code.jquery.com/jquery-latest.min.js"> </script> <!-- script element for the Cycle plugin --> <script src="js/jquery.cycle.all.js"></script> <!-- script element for the custom highlightmenu plugin --> <script src="js/jquery.highlight.js"></script> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 39

The HTML for the plugins <section> <!-- the slides used by the Cycle plugin --> <div id="slideshow"> <img src="images/rotator01.jpg" width="697" height="240" alt="vprospect 2.0"> <img src="images/rotator02.jpg" width="697" height="240" alt="vconcert 2.0"> <img src="images/rotator03.jpg" width="697" height="240" alt="vretain 1.0"> </div> <!-- the menu used by the custom highlightmenu plugin --> <nav> <ul id="vecta_menu"> <li><a href="index.html">home</a></li> <li><a href="aboutus.html">about Us</a></li> <li><a href="solutions.html">solutions</a></li> <li><a href="support.html">support</a></li> <li><a href="contactus.html">contact Us</a></li> </ul> </nav> <!-- the rest of the html --> </section> Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 40

The jquery that uses the plugins $(document).ready(function() { // set up the Cycle plugin $('#slideshow').cycle({ fx: 'fade', speed: 1000, pause: 1 }); }); // set up the highlightmenu plugin $("#vecta_menu").highlightmenu({ bgcolor: '#dfe3e6', color: '#cc1c0d', hoverbgcolor: '#cc1c0d', hovercolor: '#fff', linkwidth: '125px' }); Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 41

Extra 11-1: Modify the Carousel application Set options of the bxslider plugin. Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 42

Extra 11-2: Create a rollover plugin Convert existing jquery code to a plugin. Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 43

Extra 11-3: Create an image swap plugin Convert existing jquery code to a plugin that uses tree traversal. Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 44

Short 11-1: Create a FAQs plugin Estimated time: 10 to 15 minutes. Convert existing jquery code to a plugin. Murach's JavaScript and jquery, C11 2012, Mike Murach & Associates, Inc. Slide 45