# jQuery UI ## Lesson Objectives 1. Describe what jQuery UI is and what makes it unique 1. Install jQuery UI 1. Use some common interactions 1. Use some common widgets 1. Use some common effects ## Describe what jQuery UI is jQuery UI is an extension if jQuery. Here's how they differ: 1. jQuery is primarily meant for low level DOM manipulation 1. jQuery UI is a set of components, very much like Foundation Here's how jQuery differs from Foundation: 1. jQuery UI focuses more on functionality, whereas Foundation is mostly visual 1. jQuery UI's components are easily customizable, so that you can perform unique tasks with them 1. Foundation's components are mostly copy/paste ## Install jQuery UI Using it is as easy as adding script tags referencing the proper CDNs ```html ``` Note that jQuery requires jQuery as a dependency. [The docs](http://jqueryui.com/demos/) for jQuery UI have great sample code. Check out all the possibilities! ## Use some common interactions An interaction, is just an ability the user has with a certain DOM element. jQuery UI just adds some extra functions onto the standard jQuery object, so creating these interactions is easy: Draggable: ```html
Drag me around
``` Droppable: ```html
Drag me to my target
Drop here
``` ## Use some common widgets Widgets are more fleshed out components, containing multiple elements, that have more complex interactions with each other: Accordion: ```html

Section 1

Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.

Section 2

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

Section 3

Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.

Section 4

Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.

Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

``` ## Use some common effects jQuery UI has some fun visual effects you can run on DOM elements: Bounce ```html

Click me

```