1. Chapter 11 - How to use jQuery plugins and jQuery UI Widgets
Master a Skill / Learn for Life

2. Class Outline Websites For Finding jQuery Plugins
Additional jQuery Widgets
How to Use jQuery Carousels, Slideshows, Images
jQuery Plugins from malsup
jQuery UI Widget Factory
Using a Plugin
Plugin Cautions
Exercises
11/28/2018
Copyright © Carl M. Burnett

3. Websites For Finding jQuery Plugins
jQuery Plugin Registry
jQuery Plugins
11/28/2018
Copyright 2017 © Carl M. Burnett

4. Additional jQuery Widgets
16 Best jQuery Widgets for Developers
UI Controls for Great Web & Mobile Developers
7 JavaScript Libraries for Dashboards
11/28/2018
Copyright 2017 © Carl M. Burnett

5. How to Use jQuery Carousels, Slideshows, Images
jQuery Carousel Plugins
Tiny Carousel
jQuery Slideshows Plugins
Web Designer Depot
JSSOR
Wow Slider
Smashing Apps
jQuery Displaying Images Plugins
Lightbox
Fancybox
ThickBox 3.1
ColorBox
11/28/2018
Copyright © Carl M. Burnett

6. jQuery Plugins from malsup
BlockUI Plugin
Corner Plugin
Cycle Plugin
Cycle2!
Feed Plugin
Form Plugin
HoverPulse Plugin
Media Plugin
Taconite Plugin

7. jQuery UI Widget Factory
Stateless vs. Stateful Plugins
Consistent API
Extending Widgets with the Widget Factory
Using the classes Option
11/28/2018
Copyright 2017 © Carl M. Burnett

8. Using a Plugin Study the documentation for the plugin.
Get the URLs for the plugin files
Download the files and save them in one of the folders of your website.
In the head element of the HTML
Code the link elements for any CSS files.
Code the script elements for the JavaScript files.
Make folder have the right relationship for both the CSS and JavaScript files.
Code the HTML and CSS for the page.
If Necessary, write the jQuery code that uses the methods and options of the plugin.
11/28/2018
Copyright 2017 © Carl M. Burnett

9. Plugin Cautions
Include a script element for jQuery Core and UI Library.
Script element for the plugin comes after it.
Some plugins won’t work with the latest version of jQuery.
Check documentation to see which version of jQuery is required.
11/28/2018
Copyright 2017 © Carl M. Burnett

10. Student Exercise 1 Complete Chapter 11-1 Cycle 2 Plugin on page 333
Complete Chapter 11-2 Accordion Widget on page 334
Create links to your Web4Students Webpage.
Preview updated Web4Students Webpage.
Post Chapter 11 Exercises and update Web4Students Webpage to Live site.
11/28/2018
Copyright 2017 © Carl M. Burnett

11. Student Exercise 2 Select a jQuery Displaying Images Plugin.
Include selected jQuery Displaying Images Plugin on a separate webpage.
Create link to your Web4Students Webpage.
Preview updated Web4Students Webpage.
Post jQuery Displaying Images Plugin Exercise and update Web4Students Webpage to Live site.
11/28/2018
Copyright 2017 © Carl M. Burnett

12. Class Review Websites For Finding jQuery Plugins
Additional jQuery Widgets
How to Use jQuery Carousels, Slideshows, Images
jQuery Plugins from malsup
jQuery UI Widget Factory
Using a Plugin
Plugin Cautions
Exercises
11/28/2018
Copyright © Carl M. Burnett