Sunday, December 27, 2015

Add the jQueryUI to your web site in 5 minutes

In this Step by step Add the jQueryUI to your web site in 5 minutes  post,  we see how to add the jQueryUI style and javascript to your web in 2 short steps.
This is how a web site using jQueryUI is displayed:



And this is how the site looks like in Nexus Galaxy devices :    



Add the jQueryUI to your web site in 5 minutes  

If you are in a hurry and need to add say a nice Calendar to your web, just take a look here at how to add the jQueryUI style and javascripts to your web in this 2 short steps:

1) download the jQueryUI
2) add only this 3 elements to your Web : 1 file CSS - 1 JS and the Images folder. (and discard all the  other files and folders)



1) Download the jQueryUI files:

Browse to  http://jqueryui.com/themeroller/    and select your favorite Theme : 


Click on "Download" and there click again on "Download" :




Save the .zip file somewhere and unzip it.

2) Add only this 3 elements to your Web:

Next, we select only the following 3 files :

 1) The file CSS : jquery-ui.css
 2) The JS file :    jquery-ui.js
 3) The Images folder   "images" :


Paste the files inside your web site project :


Then, import the links to the web page where you want to enable the jQuery components and style :



The style reference must be located in the <head> element.
The scripts will go by the end of the <body> tag, thus ensuring that all HTML5 elements were created , when the compiler will read the scripts.
However, be careful to :
1) referencing the file scripts before you start coding your own javascript code;
2) the "jquery-ui.js" script file must follow the jQuery code "jquery.js" (or "jquery-X.X.X.js") [where "X" is the current version]




That's all. The web site will be shown like this:


1- In Mobile devices : 





2- On Medium and Big desktops:





      by Carmel Schvartzman


כתב: כרמל שוורצמן

No comments:

Post a Comment