HTML Level II (CyberAdvantage) Session II Chapter 16 - How to Use jQuery UI and jQuery Plugins to Enhance Your Web Pages www.profburnett.com

Class Outline Introduction to jQuery UI How to Use jQuery Widgets – Accordion, Tabs How to Use JQuery Plugins – Images, Carousels, Cycles 12/3/2018 Copyright © Carl M. Burnett

How to Use jQuery UI Features jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. http://jqueryui.com/ jQuery UI Accordion jQuery UI Tabs jQuery UI Images API’s jQuery UI Carousels 12/3/2018 Copyright © Carl M. Burnett

jQuery UI for Accordion The script element for the accordion <script> $(function() { $("#accordion").accordion(); }); </script> The HTML for the accordion <div id="accordion"> <h3><a href="#">Book description</a></h3> <div> <!-- panel contents --> </div> <h3><a href="#">About the author</a></h3> <h3><a href="#">Who this book is for</a></h3> </div> Example 12/3/2018 Copyright © Carl M. Burnett

jQuery UI for Auto-Completion The script element for auto-completion The HTML for the text box <script> $(function() { var murachBooks = ["ASP", "ASP.NET", "C#", "C++", "CICS", "CSS", "COBOL", "DB2", "HTML", "IMS", "Java", "JavaScript", "LINQ", "OS/390", "PHP", "VB", "VB.NET", "Visual Basic", "Web Development", "Web Programming", "XHTML", "z/OS JCL"]; $("#books").autocomplete({ source: murachBooks }); </script> <h1>Search our Book Database</h1><br> <div class="ui-widget"> <label for="books">Book: </label> <input id="books"> </div> Example 12/3/2018 Copyright © Carl M. Burnett

jQuery UI for a Dialog Box The script element for the dialog box <script> $(function() { $("#book").click(function(event){ $("#dialog").dialog({width:300}); }); </script> The HTML for the dialog box <h1>Featured Book</h1> <img src="images/javascriptbook.jpg" id="book" width="159" height="192"> <div id="dialog" title="JavaScript and DOM Scripting" style="display:none;"> <img src="images/javascriptbook_300.jpg" width="250" height="313"> </div> Example 12/3/2018 Copyright © Carl M. Burnett

jQuery UI for a Sortable List The script element for the sortable list The CSS for the sortable list <script> $(function() { $("#sortable").sortable(); $("#sortable").disableSelection(); }); </script> /* the styles for the sortable list */ #sortable { list-style-type: none; margin: 0; padding: 0; width: 80%; } #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; height: 18px; #sortable li span { position: absolute; margin-left: -1.3em; The HTML for the sortable list <ul id="sortable"> <li class="ui-state-default"> <span class="ui-icon ui-icon-arrowthick-2-n-s"> </span>JavaScript and DOM Scripting</li> </span>Visual Basic 2010</li> <!-- Add as many list items as you want --> </ul> Example 12/3/2018 Copyright © Carl M. Burnett

How to Use jQuery Carousels and Slideshows jQuery Carousel Plugins PixelzDesign Tiny Carousel jQuery Slideshows Plugins Web Designer Depot JSSOR Wow Slider Smashing Apps 12/3/2018 Copyright © Carl M. Burnett

jQuery for Carousels The script element for the carousel 12/3/2018 $(function() { var $slider = $('.panel-inner'); var liW = 101; var liFW = parseInt(liW * ($slider.find('li').length + 1)); $slider.css('width', liFW + 'px'); $('.button').click(function() { var leftX = (this.id == 'right') ? parseInt($slider.css('left').toString().replace( '-', '')) : parseInt($slider.css('left')); var leftY = (this.id == 'right') ? ( (leftX + 404) == liFW) ? 0: - (leftX + liW) : (leftX < 0) ? – (parseInt(leftX.toString().replace( '-', '')) - liW) : 0; rotate(leftY); }); var rotate = function(leftY) {$slider.animate({ left: leftY},500);} </script> 12/3/2018 Copyright © Carl M. Burnett

jQuery for Carousels The HTML for the carousel <div id="carousel"> <div class="button" id="left"> <img src="images/left.jpg"> </div> <div class="panel"> <ul class="panel-inner"> <li><img src="images/book1.jpg" alt="SQL Server 2008"></li> <li><img src="images/book2.jpg" alt="PHP and MySQL"></li> <!-- add as many images as you want --> </ul> <div class="button" id="right"> <img src="images/right.jpg"> 12/3/2018 Copyright © Carl M. Burnett

jQuery for Carousels Example /* the styles for the carousel */ margin: 10px 0 0 0; padding: 0; width: 400px; height: 125px; } .button { margin: 45px 10px 0 10px; float: left; height: 25px; width: 25px; } .panel { margin: 0; overflow: hidden; position: relative; width: 300px; .panel-inner { position: absolute; left: 0; height: 125px; list-style: none; margin: 0; padding: 0; } .panel-inner li { text-align: center; padding: 0; margin: 1px 1px 0 0; float: left; width: 100px; background: #FFF; } .panel-inner li img { margin: 1px 0 0 1px; } Example 12/3/2018 Copyright © Carl M. Burnett

jQuery for Slideshows The script element for the slide show The CSS for the slide show <script> $(function(){ $('.fadein img:gt(0)').hide(); setInterval(function(){ $('.fadein :first-child').fadeOut(1000) .next('img').fadeIn(1000) .end().appendTo('.fadein');}, 5000); }); </script> .fadein { position: relative; width: 200px; height: 250px; } .fadein img { position: absolute; } The HTML for the slide show <div class="fadein"> <img src="images/book1.jpg" alt="SQL Server 2008 for Developers"> <img src="images/book2.jpg" alt="PHP and MySQL"> <img src="images/book3.jpg" alt="Visual Basic 2010"> </div> Example 12/3/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

Student Exercise 2 Complete Exercise 16-1 and 16-2 on page 555 using Dreamweaver. Upload your HTML pages and CSS files to the live site to preview. 12/3/2018 Copyright © Carl M. Burnett

Class Review JavaScript Frameworks Intro to jQuery How to Use jQuery Carousels How to Use jQuery UI Features Next – Session 3 HTML5 APIs & Introduction to Web Application Vulnerability Testing 12/3/2018 Copyright © Carl M. Burnett