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

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

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

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

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

jQuery Plugins from malsup http://jquery.malsup.com/ BlockUI Plugin Corner Plugin Cycle Plugin Cycle2! Feed Plugin Form Plugin HoverPulse Plugin Media Plugin Taconite Plugin

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

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

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

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

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

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