jQuery-ui install

Question

I wanted to use one of the jQuery plugins from http://lab.smashup.it/flip/

I realized that it requires jQuery-UI to be installed. So, I downloaded jQuery-UI version 1.9.2 from http://jqueryui.com/download/

when I opened the compressed file, It comes with 3 folders inside it. I don't know how to link jQuery-UI to my html page. I remember when I connected jQuery to my html page, I put

<script src="jquery-1.8.3.js">
      </script>

inside my html page. in jQuery-UI case, I don't know which one to be put inside the html page, because jQuery-UI came with 3 folders in it. I hope somebody can help me.
Thank you in advance guys

Answer 1

Why don't you use the files hosted by Google CDN.. directly on your page.

First comes jQuery

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Then the plugins that depend on it .. jQuery UI in this case

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

UPDATE

In the 3 folders that you see ..

Go to the JS file and you will find 3 files..

You can use either the .js or js.min reference from this folder.

CSS can be used from the CSS folder..

Answer 2

The major things you need are as follows to get it working

1 . The javascript file for the version of jquery that your version of jquery-ui requires.

For jquery-ui-1.10.3 this can be found in the root directory of the download. jquery-1.9.1.js.

2 . The javascript file for the jquery libraries you intend to include.

There should also be a "ui" folder with a bunch of javascript files in there. Most of them if opened up have a list of constraints to which other js files are needed to get them to run. This is in case you decide you don't need all jquery ui functionality. However they do have one javascript file that contains functionality of all other files. For me this file is named jquery-ui.custom.js.

If you want it to run faster on the browser and don't need to read it this directory should also contain a "min" or "minified" folder. The "minified" folder contains all the same js files but in a minified form. Minified form is shortened into the smallest possible segment that a browser can decipher and it saves on browser load time.

3 . You need a reference for css to use for the jqueryui libraries you opted to use.

Jquery lets you download jquery ui with some precreated themes. If you do this your css is ideally located in a folder css/[themename].

In downloading jquery-ui1.10.3 this for me was in css/smoothness/jquery-ui.1.10.3.custom.css

As in the case of the javascript there is also a minified version you can choose. In the css directory is also a directory of images. When you install be sure that the image reference in the css is pointed to this image folder. If you drop them in the same directory you should be ok.

In the end, the head of your html page needs something like the following:

<script type="text/javascript" src="/js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery-ui-1.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/smoothness/jquery-ui-1.7.css" media="all" />

If you look closely:

1 . The first is my jquery code reference.

2 . The second is my jquery-ui code reference. The file here includes all jquery features.

3 . The third is a css reference to the theme I decided to use.

Please note it is not necessary to use a jquery-ui provided css theme as you can write your own. In which case you would provide reference to your own css file. In most places I have not seen this done.

Finally note that when downloading jquery ui with a theme they let you pick a css scope. If you leave it blank the css will apply to all matched elements. If you decide to give it a css scope then it will only apply to elements in that particular scope.

It is my job to update jquery at my office so if anyone notices anything different from this let me know.