Implementing jQuery UI in your website

NOTE: At the time of this writing, jquery-ui-1.8.9 was the latest available release.

Overview

jQuery UI contains many well tested scripts for UI elements that developers often need (i.e., Date Picker, Tabs). It also contains the core jQuery script. Installing it correctly will allow you to quickly incorporate other jQuery UI elements as needed without any additional work.

Getting Started

  1. Visit the jQuery UI Blog at http://blog.jqueryui.com/ and download the latest version of the following:
    1. Development Bundle (i.e., http://jquery-ui.googlecode.com/files/jquery-ui-1.8.9.zip)
    2. Themes Package (i.e., http://jquery-ui.googlecode.com/files/jquery-ui-themes-1.8.9.zip)
  2. Choose a theme. You can add one or more themes if you wish, but I usually use "smoothness" in all apps.
  3. In your web application, create the following folders (if they do not already exist). The folder structure I use was designed to allow multiple versions of jquery-ui to exist in the same web application and makes upgrading more structured. It also follows the default structure created with a new ASP.NET MVC application (Content & Scripts):
  4. Content
    Content/jquery-ui-themes
    Content/jquery-ui-themes/jquery-ui-themes-1.8.9
    Content/jquery-ui-themes/jquery-ui-themes-1.8.9/themes/smoothness
    Content/jquery-ui-themes/jquery-ui-themes-1.8.9/themes/smoothness/images

    Scripts
    Scripts/jquery-ui
    Scripts/jquery-ui/jquery-ui-1.8.9
    Scripts/jquery-ui/jquery-ui-1.8.9/ui
    Scripts/jquery-ui/jquery-ui-1.8.9/ui/minified

  5. Copy downloaded files into your project's new folder created in the previous step.
  6. Content/jquery-ui-themes/jquery-ui-themes-1.8.9/themes/smoothness/images/ui-*.png
    Content/jquery-ui-themes/jquery-ui-themes-1.8.9/themes/smoothness/jquery.ui.*.css

    Scripts/jquery-ui/jquery-ui-1.8.9/ui/minified/jquery.*.min.js
    Scripts/jquery-ui/jquery-ui-1.8.9/jquery-1.4.4.js

    QUESTION: Why don't we keep jquery-1.4.4.js in a separate jquery folder for all scripts to use? Because keeping it with the jquery-ui-1.8.9 reminds us that jquery-ui-1.8.9 uses jquery-1.4.4.js and we never have to guess or lookup which version it depends on.

  7. You are now ready to use jquery-ui in your web pages.

NOTE: When using <script> tags, be sure to use <script></script> and not <script />. I've run into issues where the script was not recognized using <script />.

datepicker example:

  1. <script type="text/javascript" src="Scripts/jquery-ui/jquery-ui-1.8.9/jquery-1.4.4.js"></script>
  2. <script type="text/javascript" src="Scripts/jquery-ui/jquery-ui-1.8.9/ui/minified/jquery.ui.widget.min.js"></script>
  3. <script type="text/javascript" src="Scripts/jquery-ui/jquery-ui-1.8.9/ui/minified/jquery.ui.core.min.js"></script>
  4. <link rel="Stylesheet" href="Content/jquery-ui-themes/jquery-ui-themes-1.8.7/themes/smoothness/jquery.ui.all.css" />
  5.  
  6. <script type="text/javascript" src="Scripts/jquery-ui/jquery-ui-1.8.9/ui/minified/jquery.ui.datepicker.min.js"></script>
  7.  
  8. <script type="text/javascript">
  9. $(document).ready(function() {
  10. $(".with-datepicker").datepicker();
  11. });
  12.  
  13. </head>
  14. <input type="text" class="with-datepicker" id="EffectiveDate" />
  15. <input type="text" class="with-datepicker" id="ThruDate" />
  16. </form>
  17. </body>

The first four script/link lines (jquery-1.4.4.js, jquery.ui.widget.min.js, jquery.ui.core.min.js and jquery.ui.all.css) are all required to use any ui element.

Any textbox that you want to use the datepicker should have the same class that we registered in the document ready function. This class can be named whatever you like.