Easy Tutorial
❮ Ref Theming Jqueryui Intro ❯

Using jQuery UI

Once you download jQuery UI, you will get a zip file containing the following files:

Using jQuery UI on Your Webpage

Open index.html in a text editor, and you will see references to some external files: the theme, jQuery, and jQuery UI. Typically, you need to reference these three files in your page to use jQuery UI's widgets and interactions:

<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 have referenced these necessary files, you can add some jQuery widgets to your page. For example, to create a datepicker widget, you need to add a text input to your page and then call .datepicker(), as shown below:

HTML:

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

JavaScript:

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

For examples of jQuery UI widgets and interactions, visit the jQuery UI Examples.

❮ Ref Theming Jqueryui Intro ❯