jQuery_Chapter 7

how its CSS works

Before you use a plugin, you have to know all but one of the following. Which one is it? the options that it provides the HTML that it requires the methods that it provides how its CSS works

a) The group name for the set of elements

Code example 7-1 The HTML that is used by a Lightbox plugin <a href="images/book_01a.jpg" data-lightbox="Murach" data-title="HTML5 and CSS3"> <img src="images/book_01b.jpg"> </a> <a href="images/book_02a.jpg" data-lightbox="Murach" data-title="PHP and MySQL"> <img src="images/book_02b.jpg"> </a> <a href="images/book_03a.jpg" data-lightbox="Murach" data-title="JavaScript"> <img src="images/book_03b.jpg"> </a> <a href="images/book_04a.jpg" data-lightbox="Murach" data-title="SQL Server 2012"> <img src="images/book_04b.jpg"> </a> (Refer to code example 7-1) What does "Murach" in the data-lightbox attributes of the <a> elements represent? The group name for the set of elements The name of the array where the images for the lightbox will be stored The name that's used in the JavaScript to refer to the lightbox The text that will be displayed at the top of the lightbox

b) The image specified by the href attribute of the <a> element is displayed in a dialog box

Code example 7-1 The HTML that is used by a Lightbox plugin <a href="images/book_01a.jpg" data-lightbox="Murach" data-title="HTML5 and CSS3"> <img src="images/book_01b.jpg"> </a> <a href="images/book_02a.jpg" data-lightbox="Murach" data-title="PHP and MySQL"> <img src="images/book_02b.jpg"> </a> <a href="images/book_03a.jpg" data-lightbox="Murach" data-title="JavaScript"> <img src="images/book_03b.jpg"> </a> <a href="images/book_04a.jpg" data-lightbox="Murach" data-title="SQL Server 2012"> <img src="images/book_04b.jpg"> </a> (Refer to code example 7-1) What happens when one of the links in this code is clicked? The image specified by the href attribute of the <a> element is displayed in another window The image specified by the href attribute of the <a> element is displayed in a dialog box The image specified by the src attribute of the img element is displayed in another window The image specified by the src attribute of the img element is displayed in a dialog box

b) 10

Code example 7-2 A plugin that highlights items in a menu (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); items.mouseover(function() { $(this).css("background-color", o.hoverBgColor) .css("color", o.hoverColor); }); items.mouseout(function() { $(this).css("background-color", o.bgColor) .css("color", o.color);; }); }); } })(jQuery); (Refer to code example 7-2) If this plugin is used with a menu that contains 10 items, how many elements is the plugin function applied to? 1 10 0 30

a) 1

Code example 7-2 A plugin that highlights items in a menu (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); items.mouseover(function() { $(this).css("background-color", o.hoverBgColor) .css("color", o.hoverColor); }); items.mouseout(function() { $(this).css("background-color", o.bgColor) .css("color", o.color);; }); }); } })(jQuery); (Refer to code example 7-2) If this plugin is used with a menu that contains 10 items, how many objects will the plugin return? 1 10 30 0

d) The $.extend method in the plugin replaces the default options with the values that are passed to it.

Code example 7-2 A plugin that highlights items in a menu (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); items.mouseover(function() { $(this).css("background-color", o.hoverBgColor) .css("color", o.hoverColor); }); items.mouseout(function() { $(this).css("background-color", o.bgColor) .css("color", o.color);; }); }); } })(jQuery); (Refer to code example 7-2) What happens when the following jQuery is used to call the plugin? $("#menu").highlightMenu( { bgColor: "#dfe3e6", color: "#cc1c0d" }); The options in the braces are passed to the plugin as the options parameter so they automatically replace the default options. The options in the braces are passed to the plugin and stored in an array variable. The each method in the plugin replaces the default options with the values that are passed to it. The $.extend method in the plugin replaces the default options with the values that are passed to it.

c) search the Internet

In most cases, the best way to find a jQuery plugin that performs a specific task is to a) look on the jQuery website b) look on websites that contain plugins written in a variety of languages c) search the Internet d) look on websites that provide just jQuery plugins

c) div element

The slides for a Cycle 2 plugin are typically coded as a series of img or div elements within a/an ul element section element div element ol element

a link element for the plugin's CSS file

To use a plugin, you must code all but one of the following: a link element for your own CSS file a script element for the plugin a script element for the jQuery library a link element for the plugin's CSS file

c) an each method

o provide for implicit iteration, a plugin should use a for loop the this keyword an each method a while loop