parent
cf79a6bfcf
commit
8121bc70e4
@ -0,0 +1,220 @@
|
||||
# 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
|
||||
<head>
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
</head>
|
||||
```
|
||||
|
||||
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
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<style>
|
||||
#draggable { width: 150px; height: 150px; padding: 0.5em; border:1px solid black; }
|
||||
</style>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script>
|
||||
$( function() {
|
||||
$( "#draggable" ).draggable();
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="draggable">
|
||||
Drag me around
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Droppable:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<style>
|
||||
#draggable { border: 1px solid black; width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
|
||||
#droppable { border: 1px solid black; width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
|
||||
.highlight { background: yellow; }
|
||||
</style>
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script>
|
||||
$( function() {
|
||||
$( "#draggable" ).draggable();
|
||||
$( "#droppable" ).droppable({
|
||||
drop: function( event, ui ) {
|
||||
$( this )
|
||||
.addClass( "highlight" )
|
||||
.html( "Dropped!" );
|
||||
}
|
||||
});
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="draggable">
|
||||
Drag me to my target
|
||||
</div>
|
||||
|
||||
<div id="droppable">
|
||||
Drop here
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Use some common widgets
|
||||
|
||||
Widgets are more fleshed out components, containing multiple elements, that have more complex interactions with each other:
|
||||
|
||||
Accordion:
|
||||
|
||||
```html
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<style>
|
||||
#accordion h3, #accordion div {
|
||||
border:1px solid black;
|
||||
margin:0;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
$( function() {
|
||||
$( "#accordion" ).accordion();
|
||||
} );
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="accordion">
|
||||
<h3>Section 1</h3>
|
||||
<div>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Section 2</h3>
|
||||
<div>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
<h3>Section 3</h3>
|
||||
<div>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<ul>
|
||||
<li>List item one</li>
|
||||
<li>List item two</li>
|
||||
<li>List item three</li>
|
||||
</ul>
|
||||
</div>
|
||||
<h3>Section 4</h3>
|
||||
<div>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
|
||||
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
||||
inceptos himenaeos.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Use some common effects
|
||||
|
||||
jQuery UI has some fun visual effects you can run on DOM elements:
|
||||
|
||||
Bounce
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('h1').click(function(){
|
||||
$(this).effect('bounce')
|
||||
});
|
||||
})
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Click me</h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,3 @@
|
||||
# jQuery UI Lab
|
||||
|
||||
Go to [the docs](http://jqueryui.com/demos/) and try out as many interactions, widgets, and effects as you can.
|
||||
Loading…
Reference in new issue