Take Home Assignment 4
Issues with a lot of the wording Number of Tickets: textfield, range or number are acceptable answers If you ever have issues please contact me! Always, always put some sort of comment at the top of your source code stating your name, date, and version, etc.
Test 1
Information for the test is posted on LION As outlined in your syllabus, it is worth 20% The test will be open book
Unit 3: jQuery Plugins
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.
Introduction
jQuery plugins are JavaScript applications that extend the functionality of jQuery These plugins require the use of the core jQuery library Plugins are available for hundreds of web functions In general, if you can find a plugin for doing what you want, thats better than writing the jQuery code yourself
Websites for Finding jQuery Plugins
Site name jQuery Plugin Repository jQuery Plugins Google Code GitHub URL http://plugins.jquery.com http://www.jqueryplugins.com http://code.google.com http://github.com
Check out some of the most useful plugins in Figure 11-2 of your textbook
General Steps for Using a Plugin
1. Study the documentation for the plugin. 2. Get the URLs for the plugin files if theyre 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.
Two Cautions
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 wont 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.
Four Useful Plugins
Plugin Name Lightbox Description URL Plugin can be used to open a larger http://lokeshdhakar.co version of a thumbnail image. This plugin m/projects/lightbox2/ works for a single image or set of images. Plugin makes it easy to develop an image http://bxslider.com/ carousel. Plugin makes it easy to develop a slide show. Plugin makes it easy to develop a twocolumn layout without using CSS. Also provides for many other layouts. http://jquery.malsup.c om/cycle/ http://www.bramstein. com/projects/jlayout/j query-plugin.html
bxSlider Cycle jLayout
Create Your Own
One of the features of jQuery is that it provides an API (Application Programming Interface) that lets you create your own plugins Extremely time consuming Dont reinvent the wheel
Structure of a Plugin
The plugin should be wrapped within an Immediately Invoked Function Expression (IIFE):
(function($) { / the plugin goes here })(jQuery);
If a plugin isnt coded this way, it can cause conflicts with other libraries and plugins that use the $ sign
General Structure
(function($){ $.fn.methodName = function() { this.each(function() { // the code for the plugin }); return this; } })(jQuery);
The each method is called for the object that the plugin is applied to, which is referred to by the this keyword If the object consists of more than one element, the plugin function is applied to each element
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(); });
The API Standards for Plugins
The plugin Should support implicit iteration Should preserve chaining by returning the selected object Definitions should end with a semicolon Options should provide reasonable defaults Should be well-documented Which means You use the each method within the plugin function You return the this object ; If your plug offers options Comments and explanations so others can understand how to use it
highlightMenu Plugin
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>
The script element for the plugin
<script src="jquery.highlight.js"></script>
jQuery that uses the plugin
$(document).ready(function() { $("#vecta_menu").highlightMenu(); });
highlightMenu Plugin
(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);
