📖 jQuery UI
Overview
jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice. You can download from http://jqueryui.com/download/. Be sure to read The jQuery Getting Started Tutorial to get a good understanding of jQuery UI.
- Download entire library or just the components you need.
- Comes with a theme of your choice or you can build your own.
- Go to http://jqueryui.com/themeroller/ to view current themes (gallery tab) or to customize your own theme.
- Select or customize theme before you download the jQuery files.
- Unzip download and save in your web folder.
- Go to https://www.tutorialspoint.com/jqueryui/jqueryui_environment_setup.htm for more information about setting up your jQuery UI environment.
Incorporating jQuery UI using a CDN
Add links in head section:
<link type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/themename/jquery-ui.css" rel="Stylesheet" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Some available themenames
- black-tie
- blitzer
- cupertino
- darkhive
- dot-luv
- eggplant
- excite-bike
- flick
- hot-sneaks
- humanity
- le-frog
- mint-choc
- overcast
- pepper-grinder
- redmond
- smoothness
- south-street
- start
- sunny
- swanky-purse
- trontastic
- ui-darkness
- ui-lightness
- vader
Using a local copy of jQuery UI
To use a local version of jQuery, you must download the files and place them in your web folder. Then add these links in head section:
<link type="text/css" href="css/themename/jquery-ui-1.12.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/jquery-1.12.1.custom.min.js"></script>
- Where themename corresponds to the theme you selected. The jquery version may differ also as new versions are released but should match each other to ensure compatibility.
- jQuery UI is built on top of jQuery so selectors work the same way as they do in jQuery
There are many widgets and interactions in the jQuery UI. We are going to focus on just a few that are widely used and handy. You can reference the documentation and links above for more information on additional jQuery functionality.
Adding jQuery to your page
In the head section of your page after the jQuery source files have been included, add another script tag to include the function calls shown below to include jQuery UI functionality. Once this wrapper has been added there is no reason to repeat it. You can add as many jQuery UI function calls as you wish. You can also add the jQuery code to an external JavaScript file.
<script>
$(document).ready(function() {
// jQuery UI function calls go here...
// accordion...
// datepicker...
// others...
console.log('Ready!'); // debug to verify jQuery working. load page and check the console log (F12)
});
</script>