jQuery UI
Introduction


From the jQuery UI Home Page
jQuery UI is a curated set of user interface
interactions, effects, widgets, and themes
built on top of the jQuery JavaScript Library.
Whether you're building highly interactive
web applications or you just need to add a
date picker to a form control, jQuery UI is the
perfect choice.
Referencing

The steps to reference the jQuery UI library
is the same as the steps to get jQuery
<link rel="stylesheet"
href="//code.jquery.com/ui/1.11.4/themes/smo
othness/jquery-ui.css">
<script src="//code.jquery.com/jquery1.10.2.js"></script>
<script
src="//code.jquery.com/ui/1.11.4/jqueryui.js"></script>
Widgets

There are many widgets but we will only
cover a few





Accordion
Autocomplete
DatePicker
Menu
Tabs
The Accordion Widget
(Introduction)

Displays collapsible content



Use to conserve screen real estate
To implement, use pairs of headers and
content panels
https://jqueryui.com/accordion/
The AutoComplete Widget
(Introduction)

Use with an input widget to enable auto
completion features

Set the source to a list of possible strings
The DatePicker Widget
(Introduction)




Use to create a selectable calendar
It’s possible to set the minimum and
maximum selectable values
It’s possible to change the format of the
calendar
http://api.jqueryui.com/datepicker/
The DatePicker Widget
(Default)
The Menu Widget

A menu can be created from any valid
markup as long as the elements have a strict
parent/child relationship. The most commonly
used element is the unordered list (<ul>)
The Menu Widget

Create a menu using a list
The Tabs widget




Create content that appears on multiple tabs
The tabs themselves must be in either an
ordered (<ol>) or unordered (<ul>) list
Each tab "title" must be inside of a list item
(<li>) and wrapped by an anchor (<a>) with
an href attribute
Each tab panel may be any valid element but
it must have an id which corresponds to the
hash in the anchor of the associated tab