Upload
morris-garrett
View
218
Download
0
Embed Size (px)
Citation preview
jQuery UI
Slide 2
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.
Slide 3
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/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Slide 4
Widgets There are many widgets but we will only
cover a few Accordion Autocomplete DatePicker Menu Tabs
Slide 5
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/
Slide 6
The AutoComplete Widget (Introduction) Use with an input widget to enable auto
completion features Set the source to a list of possible strings
Slide 7
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/
Slide 8
The DatePicker Widget (Default)
Slide 9
The DatePicker Widget (Configuring)
Slide 10
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>)
Slide 11
The Menu Widget Create a menu using a list
Slide 12
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
Slide 13
The Tabs Widget
Slide 14
The ToolTips Widget xx