Downloading jQuery UI: Ok, so what part of this mess do I copy to the server?

Question

From the "should be simple, but..." files: Trying to get started with jQuery UI. Went to the site, used their custom builder thingy to assemble the parts I need, made myself a custom theme using the Theme Roller, downloaded the zip file thus produced, unzipped it on my local drive. Ok, so I have 37 folders, 311 files, and a total of 2.4 MB. Ain't no way in hell all this is going on the server. What parts do I need to put there?

• 'css'
  • 'custom-theme': jquery-ui-1.8.custom.css, 'images' subfolder with 12 .png images
• 'development-bundle'
  • 'demos': demos.css, index.html, plus 18 subfolders, but I'm guessing "not needed"
  • 'docs': 17 .html files, but again, I'm guessing "not needed"
  • 'external': 4 .js files, one .css
  • 'themes': 'base' and 'custom-theme' subfolders, each with 8 or 9 .css files and an 'images' subfolder with about a dozen images
  • 'ui': 25 .js files, an 'i18n' subfolder with 53 .js files, and a 'minified' subfolder with 24 .js files
• 'js': jquery-1.4.2.min.js and jquery-ui-1.8.custom.min.js

Also, the file structure. Our server is set up something like this:

• root
  • admin (administrative tools)
  • css
  • forms (the gist of the site lives here)
  • images
  • include (asp code snippets that are used by multiple pages)
  • js (just a few things right now, like an ancient wheezing spelling checker)

As far as I can tell, the jQuery css files assume that (1) each theme is in its own folder, and (2) each folder has its own images subfolder. How can I convince it otherwise? i.e. put the necessary .js files in the 'js' folder, the .css files in the 'css' folder, and the images in the 'images' folder?

Exserviceman

IMO, jQuery has the worst documentation of any project with widespread use. "mess" is the perfect description. +1, only because I can't give you +100 – Proximal

Answer 1

I usually copy jquery-ui-1.8.custom.css and jquery-ui-1.8.custom.min.js along with the images to my server. You'll also need the jquery-1.4.2.min.js file if you do not already have it on your server. The rest I do not use.

If you put the images within your images directory you do not need to change anything.

You really do not need anything in development bundle. It contains a bunch of demos and all the pre-built themes if you want to experiment with them.

This link contains more info on getting started with jQuery UI: http://learn.jquery.com/jquery-ui/getting-started/

Hoff

I did need to change the image paths as Jeduan Cornejo said, but otherwise, you had the answer I needed. Thanks! – Exserviceman

Answer 2

There's no problem in putting the css and js files separated, as you will include them in your html anyway.

For the images, though, you will have to modify the css. Edit the css file and find the references to images like

background: url(path/to/image.jpg) 

and change it to the appropiate location

Danaides

Answer 3

Simply place the jQueryUI js files in your folder of choice(i.e. on your server) then link it in your HTML mark up as shown below (and remember to place it after your jQuery library has been included as well):

<script src="js/vendor/jquery-1.10.2.min.js"></script>
<script src="js/vendor/jquery-ui-1.10.4.custom.min.js"></script>

The tricky part is where the images and jQueryUI css file go. I found that the best location for the images is to copy the entire custom theme folder into your current css folder then link to the jQueryUI css from within the custom theme folder. This way, the jQuery css file will know where to locate the image files it needs as shown below:

<link rel="stylesheet" href="css/custom-theme/jquery-ui-1.10.4.custom.css" />

Wageworker

Answer 4

In my projects I only use the css folder along with its images folder, and the jquery-ui-1.8.custom.min.js. If you're not already using jQuery, you'll of course need to reference that before you reference the jQuery UI .js file. I don't believe you need anything in that dev folder.

Hills

Answer 5

Just copy the whole directory and link to jquery-ui.css within it. Remember that it needs its "images" directory, so keep the structure intact, and if you want to switch themes, just change the directory.

To edit this theme back in Theme-roller

Open said file, the locate the line 4 (YMMV) where it says:

* To view and modify this theme, visit http://jqueryui.com/themeroller/?

Copy the entire line, yes, it's huge, and open it in your browser. Presto, project loaded.

Wayfarer