Chapter 11 How to create and use plugins

Transcription

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

2 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, C , Mike Murach & Associates, Inc. Slide 2

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

4 Web sites for finding jquery plugins Site name jquery Plugin Repository jquery Plugins Google Code GitHub Sourceforge URL Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 4

5 Plugins for displaying images Lightbox Fancybox ThickBox ColorBox Shadowbox.js Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 5

6 Plugins for slide shows, carousels, and galleries bxslider Malsup jquery Cycle jcarousel Nivo Slider Galleria AD Gallery Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 6

7 Plugins for text layout UI Layout Masonry Columnizer jscolumns jlayout columnizer-jquery-plugin jquery-plugin.html Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 7

8 Plugins for forms Malsup jquery Form Ideal Forms Bassistance Validation jquery-plugin-validation jqtransform Niceforms dfc-e.com/metiers/multimedia/ opensource/jqtransform Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 8

9 Plugins for interface design jquery UI Wijmo Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 9

10 Plugins for mobile development jquery Mobile jqtouch Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 10

11 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, C , Mike Murach & Associates, Inc. Slide 11

12 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, C , Mike Murach & Associates, Inc. Slide 12

13 The script elements for the jquery library and the bxslider plugin  <script src=" </script>  <script src="js/jquery.bxslider.min.js"></script> Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 13

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

15 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, C , Mike Murach & Associates, Inc. Slide 15

16 A Lightbox plugin The URL for this plugin 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, C , Mike Murach & Associates, Inc. Slide 16

17 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>  Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 17

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

19 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, C , Mike Murach & Associates, Inc. Slide 19

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

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

22 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, C , Mike Murach & Associates, Inc. Slide 22

23 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, C , Mike Murach & Associates, Inc. Slide 23

24 A jlayout plugin used to create two columns The URL for this plugin 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, C , Mike Murach & Associates, Inc. Slide 24

25 The HTML for the jlayout plugin <div id="layout"> <div class="column1">  </div> <div class="column2">  </div> </div> Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 25

26 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, C , Mike Murach & Associates, Inc. Slide 26

27 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, C , Mike Murach & Associates, Inc. Slide 27

28 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, C , Mike Murach & Associates, Inc. Slide 28

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

30 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, C , Mike Murach & Associates, Inc. Slide 30

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

32 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>  </ul> Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 32

33 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, C , Mike Murach & Associates, Inc. Slide 33

34 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, C , Mike Murach & Associates, Inc. Slide 34

35 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, C , Mike Murach & Associates, Inc. Slide 35

36 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, C , Mike Murach & Associates, Inc. Slide 36

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

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

39 The script elements for the page that uses plugins  <script src=" </script>  <script src="js/jquery.cycle.all.js"></script>  <script src="js/jquery.highlight.js"></script> Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 39

40 The HTML for the plugins <section>  <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>  <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>  </section> Murach's JavaScript and jquery, C , Mike Murach & Associates, Inc. Slide 40

41 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, C , Mike Murach & Associates, Inc. Slide 41

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

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

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

45 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, C , Mike Murach & Associates, Inc. Slide 45