jQuery UI is a set of library files that use the jQuery core file for widgets, interactions, effects and themes. jQuery UI library files are in addition to the core jQuery file.

If you are going to use one of jQuery UI files you need to load the jQuery core file and then load the jQuery UI file as well in a separate <script>...</script> line in the <head>...</head> section of your web page. On top of that, many of the UI files require that you also link its specific stylesheet. If you do not include the stylesheet, the UI will not appear correctly and may not function correctly.

Below is an example of how to link to the proper files. You actual file names and locations may vary.

<meta charset="utf-8">
<title>jQuery UI</title>
<link rel="stylesheet" href="/js/ui/1.11.2/themes/smoothness/jquery-ui.css">  // link to the proper jQuery UI stylesheet
<script src="/js/jquery-1.10.2.js"></script>  // load in the jQuery core file FIRST
<script src="/js/ui/1.11.2/jquery-ui.js"></script>  // load in the jQuery UI file
<script>  // your function must be in its own <script>...</script> section
  // call the function here


Getting the right jQuery UI files

You need to have the proper files available for access in order for the jQuery components to look and function properly. Some of the UI components require that other components are available as well. 

Visit jqueryui.com/download and you can customize your jQuery UI download with their download builder. This download builder will select all the necessary files for your project. You also have a option to pick a certain theme. This theme will determine the look of your colors, buttons, etc. that you download.

If you are going to do testing and tutorials, you might want to choose all of the components. If you are downloading them for an actual live website, you might want to be more selective to keep the folder size to a minimum.

Read the instructions for building the download at their site to be sure that you are getting the right build.

With this download is an index.html file with a sampling of the components that you selected. You can cut and paste from this file for your own web pages. You can then do your own styling with a stylesheet that loads after the jQuery .css file.

You do need to assure that the jQuery core file that you reference is compatible with the UI files. Older versions of core may not have the right functionality for some of the newer UI components.


Use Google Hosted Library for your jQuery UI files

You can also have the <script> link to the Google Hosted Library's file for both the core jQuery file and the jQuery UI file. https://developers.google.com/speed/libraries/devguide#jquery-ui

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

Note: you will need to add the http: protocol if you are testing on a local computer.