Before starting, you must link JQuery UI's provided stylesheet for any of this to work!

Draggable

Try it out!

How do I do it?

Any element can be made draggable with JQuery. Just use the following JQuery code:

$("selector").draggable();

Selectable

See how
easy it is
to create
a selectable list?
You can
hold CTRL
to select multiple items.

How do I do it?

Step 1:

Set up an ordered list with the ID "selectable"

Step 2:

Create a stylesheet with the following properties:

#selectable .ui-selecting { background: #FECA40; }

#selectable .ui-selected { background: #F39814; color: white; }

#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }

#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }

Step 3:

Now just attach the following JQuery!

$("#selectable").selectable();

Resizable

Any element can be a resizable element!

How do I do it?

Step 1:

Add the "resizable" class to any element

<div id="resizable"><p>Any element can be a resizable element!</p></div>

Step 2:

Use JQuery's built in resize function.

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

Accordion

Summary

This is an accordion! It's used as an efficient way of displaying information in a smaller amount of space.

How do I do it?

Step 1:

Apply the "accordion" id to a parent div element

Step 2:

Use the built-in JQuery function to transform the div element into an accordion

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

Autocomplete

How do I do it?

Step 1:

Create an input and give it an ID like "autocomplete"

Step 2:

Create a table in Javascript for all of the terms you'd like to autocomplete

var availableTags = [

"ActionScript",

"AppleScript",

"Asp",

"BASIC",

"C",

"C++",

"Clojure",

"COBOL",

"ColdFusion",

"Erlang",

"Fortran",

"Groovy",

"Haskell",

"Java",

"Lisp",

"Perl",

"PHP",

"Python",

"Ruby",

"Scala",

"Scheme"

];

Dialog Window

Event

How do I do it?

Step 1:

Create a div container with the ID "dialog," this will be the dialog box itself

<p>Event</p>

</div>

Step 2:

After filling the div container with whatever content you like, use the JQuery UI library to transform it into a dialog box.

$("#dialog").dialog();

BONUS:

You can also hide/show the dialog box on command with a button. Here's a demonstration of how:

JQuery:

$("#dialog").hide();

$(".ui-dialog").hide();

$("#open").click(function() {

$("#dialog").show();

$(".ui-dialog").show();

});

HTML