jQuery — UI

What is jQuery UI?

jQuery UI is a set of UI interactions, effects, widgets, and themes built on top of jQuery.

<link rel="stylesheet" href="jquery-ui.min.css">
<script src="jquery-ui.min.js"></script>

Draggable

$("#box").draggable();

Droppable

$("#dropzone").droppable({
    drop: function(event, ui) {
        $(this).addClass("highlight");
    }
});

Resizable

$("#box").resizable();

Sortable

$("#list").sortable();

Datepicker

$("#date").datepicker({
    dateFormat: "yy-mm-dd",
    minDate: new Date()
});

Accordion

$("#accordion").accordion();

Tabs

$("#tabs").tabs();

Dialog

$("#dialog").dialog({
    title: "Hello",
    buttons: {
        OK: function() { $(this).dialog("close"); }
    }
});

Mini Practice

1. Make an element draggable
2. Create a sortable list
3. Add a datepicker to a form
4. Build a dialog with buttons

Up Next

Continue with Validation — form validation with jQuery.