including Jquery UI

The first step is to visit the jQuery ThemeRoller online application at http://jqueryui.com/themeroller/.

Using the ThemeRoller

The jQuery UI CSS Framework is a set of classes covering a wide range of user interface requirements. Using the ThemeRoller tool, you can build your own interface styles, either from scratch or based on any of the extensive collection of examples available in the gallery at http://jqueryui.com/themeroller/.

Once you’ve decided on a style, jQuery UI provides a download builder that packages only the components you need. It also handles any dependencies for your selected items, so you can’t download a widget or interaction without all the ancillary files it requires. All you need to do is then download and unpack the zip file.

Once you’ve unpacked the download, you have the following directories:

/css/
/development-bundle/
/js/                 
                 

The development-bundle directory holds the jQuery UI source code, demos, and documentation. If you don’t intend to change any of the jQuery UI code, you can safely delete it.

Generally, you need to include from the remaining files your theme, jQuery, and jQuery UI on any page that is to use jQuery UI widgets and interactions:

<link rel="stylesheet" type="text/css" href="jquery-ui.min.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>                 
                 

If you use one of the standard gallery themes, you can alternatively link to all of the files you need on a Content Delivery Network:

<link rel="stylesheet" type="text/css"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/
jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://codeorigin.jquery.com/ui/1.10.3/jquery-ui.min.js">
</script>