Friday, June 22, 2012

What is jQuery UI ?


The jQuery UI is a plug-in to the core jQuery library, the jQuery UI plug-in provides a number of additional widgets & visual effects like Progress bar, Scrollbar, Dialogs, Date pickers, Drag and Drop etc

In order to use the jQuery UI library, we need to download the jQuery UI library and add a references to the appropriate files it in our web site.

To know more about the basics of jQuery refer to the post jQuery Getting Started

Installing jQuery UI
The latest version of jQuery UI library at the time of writing this post is 1.8.21, the jQuery UI library can be downloaded from the jQuery UI site.

http://jqueryui.com/download

The downloaded .zip file will contain the core files, supporting documents and sample files. To use the jQuery UI package, we need to add references to the core .js file and .css files as follows.

<script type="text/javascript" src="JavaScript/jquery-ui-1.8.21.custom.min.js"></script>
<link type="text/css" href="css/themename/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />

In the above path the themename, refers to the theme selected while downloading the jQuery UI library. The word themename should be replaced with the appropriate theme downloaded.

For example, I have selected the smoothness theme, hence my path will be.
<link type="text/css" href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="Stylesheet" />

To see a simple jQuery Dialog sample in action refer to the post .



Search Flipkart Products:
Flipkart.com

No comments: