jQuery UI usage

jQuery UI uses

This section describes the simple use of the jQuery UI.

When you download the jQuery UI, you will get a zip package that contains the following files:

• /css/
• /development-bundle/
• /js/
• index.html

Use the jQuery UI on a Web page

When you open index in the index.html you'll see references to some external files: theme, jQuery, and jQuery UI. Typically, you need to reference these three files on the page in order to use the form widgets and interaction parts of the jQuery UI:

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

Once you reference these necessary files, you can add some jQuery widgets to your page. For example, to make a datepicker widget, you need to add a text input box to the page .datepicker() as follows:

Html:

<input type="text" name="date" id="date" />

Javascript:

$( "#date" ).datepicker();

To view an example demonstration of jQuery UI widgets and interactive parts, visit jQuery UI Instances.