Using jQuery UI
Once you download jQuery UI, you will get a zip file containing the following files:
/css/
/development-bundle/
/js/
index.html
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.