Tips and Tricks: jQuery User Interface (jQuery UI)

Add the power and flexibility of the jQuery User Interface (jQuery UI) library to your website. It is very similar to the way you can add the jQuery library to your site as shown in the previous article “Add The Power of jQuery” (see “Related articles” below). The quickest and easiest way is to use a CDN like Google. Use the following code:

  1. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

There is one extra step in adding the jQuery UI library. You should also add the jQuery UI theme css stylesheet to the “<head>” of your document. Use the following code as an example:

  1. <link rel="stylesheet"  type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css" media="all" />

Note: Google does not always load the latest stylesheet css. You need to specify the version number. The example above shows version number 1.10.1

There are many themes available. For more information, check the documentation of the CDN you choose to use.

Some jQuery UI examples

Date picker:

  • The datepicker is tied to a standard form input field. Focus on the input (click, or use the tab key) to open an interactive calendar in a small overlay. Choose a date, click elsewhere on the page (blur the input), or hit the Esc key to close. If a date is chosen, feedback is shown as the input’s value.
  • view code

Slider:

  • The basic slider is horizontal and has a single handle that can be moved with the mouse or by ysing the arrow keys.
  • view code

Related articles:

  • Add The Power of jQuery
  • Create a Custom HTML5 Audio Player