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

2. 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

3. 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.
jQuery UI Accordion
jQuery UI Tabs
jQuery UI Images API’s
jQuery UI Carousels
12/3/2018
Copyright © Carl M. Burnett

4. 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

5. 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

6. 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

7. 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

8. 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

9. 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

10. 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

11. 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

12. 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

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

14. 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

15. 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