“Whether you think you can or you think you can't; either way you are right.” --Henry Ford

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:

<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:

<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.
Date:
👓 view code

```
<!doctype html>
```
```
<html lang=quot;en">
```
```
<head>
```
```
  <meta charset="utf-8" />
```

  <title>jQuery UI Datepicker - Default Functionality</title>

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

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

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

```
  <script type="text/javascript">
```
```
    $(function() {
```
```
      $("#datepicker").datepicker();
```
```
    });
```
```
  </script>
```
```
</head>
```
```
<body>
```

<p>Date: <input type="text" id="datepicker" /></p>

```
</body>
```
```
</html>
```

Slider:

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

```
<!doctype html>
```
```
<html lang=quot;en">
```
```
  <head>
```
```
    <meta charset="utf-8" />
```

    <title>jQuery UI Datepicker - Default Functionality</title>

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

```
    <style type="text/css">
```
```
      #volume {margin-right: 1.1em;}
```

      #slider {display: inline-block; width: 101px;}

      #amount {border: 0; font-weight: bold; margin-left: 1.1em;}

```
    </style>
```

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

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

```
    <script type="text/javascript">
```
```
      $(function() {
```
```
        $("#slider").slider({
```
```
          range: "min",
```
```
          min: 0,
```
```
          max: 100,
```
```
          value: 70,
```
```
          animate: true,
```
```
          slide: function(event, ui) {
```
```
            $("#amount").val(ui.value)
```
```
          }
```
```
        });
```

        $("#amount").val($("#slider").slider("value"));

```
      });
```
```
    </script>
```
```
  </head>
```
```
  <body>
```

    <label id="volume" for="amount">Volume: </label><div id="slider"></div>

```
    <input id="amount" type="text" />
```
```
  </body>
```
```
</html>
```

jon hall

- Resources and Solutions

“Whether you think you can or you think you can't; either way you are right.” --Henry Ford

Tips and Tricks: jQuery User Interface (jQuery UI)

Some jQuery UI examples

Related articles: