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?

Answer 1

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.

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

Answer 3

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://jqueryui.com/docs/Getting_Started