Install jQuery-ui

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

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


when I open the compressed file, it comes with three folders inside it. I don't know how to link jQuery-UI with 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 the jQuery-UI case, I don’t know which one should be placed on the html page because jQuery-UI comes with three folders in it. Hope someone can help me. Thanks in advance guys

+4
source share
2 answers

Why do not you use files hosted on Google CDN.. , right on your page.

JQuery comes first

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

Then 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 3 folders that you see.

enter image description here

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

In this folder you can use the .js or js.min .

CSS can be used from the CSS folder.

+7
source

The main things you need are as follows:

1. The javascript file for the jquery version that your jquery-ui version 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 are about to include.

There should also be a "ui" folder with a bunch of javascript files in there. Most of them, if they are open, have a list of restrictions that other js files need to run them. This is in case you decide that you do not need all the functions of jquery ui. However, they do have one javascript file that contains the functionality of all the other files. For me, this file is called jquery-ui.custom.js.

If you want it to work faster in the browser and do not need to read it, this directory should also contain the "min" or "minified" folder. The "miniature" folder contains all the same js files, but in a mini form. The minimum form is reduced to the smallest possible segment that the browser can decrypt and it saves browser loading time.

3. You need a link to use css for the jqueryui libraries that you decide to use.

JQuery allows you to load jquery ui with some pre-created themes. If you do this, your css is ideally located in the css / [element_name] folder.

When loading jquery-ui1.10.3 it was CSS / Smoothness / JQuery-ui.1.10.3.custom.css for me

As with javascript, there is also a shortened version that you can choose from. The css directory also has an image directory. when you install, make sure that the link to the image in css is pointed to this image folder. If you put them in the same directory, you should be fine.

After all, the head of your html page needs 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 carefully:

1. The first is my link to jquery code.

2. The second is my link to jquery-ui. The file here includes all jquery functions.

3. The third is a css link to a topic that I decided to use.

Please note: there is no need to use jquery-ui provided css theme as you can write your own. In this case, you will provide a link to your own css file. In most places I have not seen this.

Finally, note that when loading jquery ui with a theme, they allow you to select the css scope. If you leave it blank, css will apply to all matched elements. If you decide to provide it with a css area, then it will only apply to elements in that specific area.

This is my job of updating jquery in my office, so if anyone notices something different than this, let me know.

+3
source

All Articles