Scribd
Upload
140 views16 pages

Take Home Assignment 4

This document provides information about creating and using jQuery plugins. It discusses the general structure of plugins, including wrapping the plugin code in an immediately invoked function expression and using the each method to support implicit iteration. It also covers jQuery plugin API standards like supporting chaining, providing default options, and including documentation. The document provides examples of simple plugins, like one to display a text selection, and a more complex menu highlighting plugin. It recommends finding existing plugins when possible rather than recreating functionality.

Uploaded by

a1653180
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
140 views16 pages

Take Home Assignment 4

This document provides information about creating and using jQuery plugins. It discusses the general structure of plugins, including wrapping the plugin code in an immediately invoked function expression and using the each method to support implicit iteration. It also covers jQuery plugin API standards like supporting chaining, providing default options, and including documentation. The document provides examples of simple plugins, like one to display a text selection, and a more complex menu highlighting plugin. It recommends finding existing plugins when possible rather than recreating functionality.

Uploaded by

a1653180
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 16

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);

You might also like