O'Reilly logo

jQuery UI by Eric Sarrion

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Which Files Should We Include in Our HTML Pages?

In the previous sections, we have seen that jQuery UI is made up of different CSS and JavaScript files. In addition, some files are compressed, while others are not. Hence the question: which files should we include in our HTML pages to make use of jQuery UI?

Uncompressed Files

Uncompressed files are located in the development-bundle directory, under the jQuery UI installation directory (jqueryui).

The ui-lightness theme

Figure 1-4. The ui-lightness theme

JavaScript files

The ui directory (located under development-bundle) contains the JavaScript files. The jquery.ui.core.js file includes the basic features (mandatory), while other files will be included only if required. The file ending in custom.js (e.g., jquery-ui-1.8.16.custom.js) brings together all the JavaScript files and eliminates the need to include each separately. The minified directory (located under ui) contains the same files in compressed format.

CSS files

The themes directory (located under development-bundle) contains the CSS files. It consists of various directories, each containing themes (e.g., the base, smoothness, and ui-lightness directories). Each theme includes an images directory and other CSS files.

The jquery.ui.core.css file contains basic functionality (required), while other files will be included only if they are required. The jquery.ui.theme.css file contains the definition of the theme itself (required).

The jquery.ui.base.css file includes all of the files in the development-bundle directory except jquery.ui.theme.css. The jquery.ui.all.css file includes all files (that is to say, jquery.ui.base.css and jquery.ui.theme.css).

Finally, the file ending with custom.css (e.g., jquery-ui-1.8.16.custom.css) includes all CSS files and eliminates the need to include each separately (it is identical to jquery.ui.all.css, except that it includes other files via CSS directives, while custom.css physically includes every line of all files).

Sample HTML page including uncompressed files

Here we want to display a simple page with two tabs. The main JavaScript file will be jquery.ui.tabs.js and the main CSS file will be jquery.ui.tabs.css. The main page will include the following base files:

<script src = "jquery.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.core.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.widget.js"></script>
<script src = "jqueryui/development-bundle/ui/jquery.ui.tabs.js"></script>

<link rel=stylesheet type=text/css
      href=jqueryui/development-bundle/themes/smoothness/jquery.ui.core.css />
<link rel=stylesheet type=text/css
      href=jqueryui/development-bundle/themes/smoothness/jquery.ui.theme.css />
<link rel=stylesheet type=text/css
      href=jqueryui/development-bundle/themes/smoothness/jquery.ui.tabs.css />

The jquery.js file is here at the same level as the jqueryui directory. This file is the standard jQuery JavaScript file.

The core.js file is mandatory, while the tabs.js file requires the inclusion of widget.js (as indicated in the tabs.js file).

The core.css file is mandatory, as is the theme.css file. The tabs.css file contains specific tabs definitions.

Now that we have the basic building blocks for the page, let’s create and label two tabs and place some text in each. The following code goes directly below the previous code that calls the base files.

<div id=tabs>
  <ul>
    <li><a href=#tab1>Tab 1</a></li>
    <li><a href=#tab2>Tab 2</a></li>
  </ul>
  <div id=tab1>Contents of first tab</div>
  <div id=tab2>Contents of the second tab</div>
</div>

<script>

$("#tabs").tabs();

</script>

The result of this script (an HTML page with two tabs) is shown in Figure 1-5.

Our first program using jQuery UI

Figure 1-5. Our first program using jQuery UI

Compressed Files

The use of compressed files reduces the load time of HTML pages.

JavaScript files

The js directory (located under the jQuery UI installation directory, here jqueryui) contains the JavaScript files. Only the jquery-ui-1.8.16.custom.min.js file is needed here. The other file in the directory is the compressed version of jQuery.

CSS files

The css directory (located under the jQuery UI installation directory, here jqueryui) contains a subdirectory for each CSS theme installed (e.g., the smoothness and ui-lightness directories).

Each theme includes an images directory and a CSS file to be included in the HTML page. This is the same file ending with custom.css (e.g., jquery-ui-1.8.16.custom.css) as in the compressed version.

Sample HTML page including compressed files

Here, we want to display a simple page with two tabs (as before):

<script src = jquery.js></script>
<script src = jqueryui/js/jquery-ui-1.8.16.custom.min.js></script>

<link rel=stylesheet type=text/css
      href=jqueryui/css/smoothness/jquery-ui-1.8.16.custom.css />

Only two files are now required in addition to the jquery.js file:

  • The jQuery UI JavaScript global file (jquery-ui-1.8.16.custom.min.js)

  • The overall CSS jQuery UI file associated to the style used (smoothness/jquery-ui-1.8.16.custom.css, associated with smoothness theme)

Now add the same HTML code that we used earlier to create, label, and populate the tabs:

<div id=tabs>
  <ul>
    <li><a href=#tab1>Tab 1</a></li>
    <li><a href=#tab2>Tab 2</a></li>
  </ul>
  <div id=tab1>Contents of first tab</div>
  <div id=tab2>Contents of the second tab</div>
</div>

<script>

$("#tabs").tabs();

</script>

The result is the same as before.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required