History

Matt Huntington b5c4359936 better labs		8 years ago
..
README.md	jquery UI	8 years ago
lab.md	better labs	8 years ago

README.md

jQuery UI

Lesson Objectives

Describe what jQuery UI is and what makes it unique
Install jQuery UI
Use some common interactions
Use some common widgets
Use some common effects

Describe what jQuery UI is

jQuery UI is an extension if jQuery. Here's how they differ:

jQuery is primarily meant for low level DOM manipulation
jQuery UI is a set of components, very much like Foundation

Here's how jQuery differs from Foundation:

jQuery UI focuses more on functionality, whereas Foundation is mostly visual
jQuery UI's components are easily customizable, so that you can perform unique tasks with them
Foundation's components are mostly copy/paste

Install jQuery UI

Using it is as easy as adding script tags referencing the proper CDNs

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

<!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:

<!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:

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

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