1. www.profburnett.com Master a Skill / Learn for Life
jQuery
Session IV
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
4/21/2019
Copyright © Carl M. Burnett

3. Websites For Finding jQuery Plugins
jQuery Plugin Registry
jQuery Plugins
4/21/2019
Copyright © 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
4/21/2019
Copyright © 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
4/21/2019
Copyright © Carl M. Burnett

6. jQuery Plugins from malsup
BlockUI Plugin
Corner Plugin
Cycle Plugin
Cycle2!
Google Feed Plugin
Form Plugin
HoverPulse Plugin
Media Plugin
Taconite Plugin
4/21/2019
Copyright © Carl M. Burnett

7. jQuery UI Widget Factory
Stateless vs. Stateful Plugins
Consistent API
Extending Widgets with the Widget Factory
Using the classes Option
4/21/2019
Copyright © 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.
4/21/2019
Copyright © 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.
4/21/2019
Copyright © Carl M. Burnett

10. Plugin Examples Accordion Button & Dialog bxSlider Cycle2 Datapicker
Lightbox
Tabs
4/21/2019
Copyright © Carl M. Burnett

11. Student Exercise 1
Complete Chapter 11 - Exercise 11-1 and 11-2 on Page 333 using Dreamweaver.
Students will upload test files to development site.
Students will preview in browser development files.
Students will upload files to live site.
Students will preview in browser live files.
4/21/2019
Copyright © Carl M. Burnett

12. Student Exercise 2 Select a jQuery Displaying Images Plugin.
Include selected jQuery Displaying Images Plugin on a separate webpage.
Students will upload test files to development site.
Students will preview in browser development files.
Students will upload files to live site.
Students will preview in browser live files.
4/21/2019
Copyright © Carl M. Burnett