20 Awesome jQuery UI Resources
jQuery UI has opened many paths for us and you can get many of UI resources free of cost.
We are showcasing some of the best jQuery resources that will be highly useful to you.
If you like this article, you might be interested in some of our other articles on jQuery Content Sliders, jQuery Gallery Plugins, jQuery Tutorials, and jQuery Sliding Tutorials.
Shake Things Up Using jQuery UI’s Shake Effect
jQuery UI has a shake effect which can draw attention to an element.
More Information on Shake Things Up Using jQuery UI’s Shake Effect
jQuery UI 1.9 Milestone 6 – Spinner 2
The sixth milestone release for jQuery UI 1.9 is out, featuring many updates for the Spinner widget. This release also includes updates and bug fixes to existing and new widgets that will not make it into a 1.8.x release.
More Information on jQuery UI 1.9 Milestone 6 – Spinner 2
Optimize Using Modal Window or Dialog Box in JQuery UI
This post explains how to use this Dialog Box on the right way.
More Information on Optimize Using Modal Window or Dialog Box in JQuery UI
jQuery UI Slider plugin
The jQuery UI Slider plugin makes selected elements into sliders. There are various options such as multiple handles, and ranges. The handle can be moved with the mouse or the arrow keys.
More Information on jQuery UI Slider plugin
jQuery Simple UI Slider Tutorial
In this tutorial author is going to teach you how to construct a simple UI slider using jQuery. It’s very effective and can be used for almost anything. You can slide through text, pictures, videos, etc.
More Information on jQuery Simple UI Slider Tutorial
WordPress Sidebar Turned Apple-Flashy Using jQuery UI
This tutorial assumes that you have a wordpress engine running on a server that you have access to upload files, download files and browse to.
More Information on WordPress Sidebar Turned Apple-Flashy Using jQuery UI
Copying jQuery UI styles and Detecting CSS Loading
Copying jQuery UI styles and Detecting CSS Loading
More Information on Copying jQuery UI styles and Detecting CSS Loading
Using Multiple jQuery UI Themes on a Single Page
If you’re using the jQuery UI CSS Framework to design an entire interface, you may find that one theme is not enough.
More Information on Using Multiple jQuery UI Themes on a Single Page
Create HTML tabs using jQuery UI
HTML Tabs have became one of the most used UI components in web design. Tabs are generally used to break content into multiple sections that can be swapped to save space.
More Information on Create HTML tabs using jQuery UI
Using Multiple jQuery UI Themes on a Single Page
This quick tutorial will highlight a new feature in the jQuery UI Download Builder which allows you to easily use multiple themes on a single page.
More Information on Using Multiple jQuery UI Themes on a Single Page
Custom 404 with jQuery and jQuery UI
This tutorial isn’t limited to 404 error pages, you can use this animation technique anywhere. Here’s the premise – a 404 that’s breaking, the page is literally cracking into bits:
More Information on Custom 404 with jQuery and jQuery UI
Progressbar
The progress bar is designed to simply display the current % complete for a process. The bar is coded to be flexibly sized through CSS and will scale to fit inside it’s parent container by default
More Information on Progressbar
Tabs
Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion.
Datepicker
The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.
More Information on Datepicker
Autocomplete
Autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
More Information on Autocomplete
Dialog
A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the ‘x’ icon by default.
Button
Button enhances standard form elements like button, input of type submit or reset or anchors to themable buttons with appropiate mouseover and active styles.
Accordion
Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.
Selectable
The jQuery UI Selectable plugin allows for elements to be selected by dragging a box (sometimes called a lasso) with the mouse over the elements. Also, elements can be selected by click or drag while holding the Ctrl/Meta key, allowing for multiple (non-contiguous) selections.
More Information on Selectable
Subscribe to SloDive (it's free)
Jquery UI is very helpful on any wesbite. I also like using JQuery Tools aswell, that includes some jquery tooltips.
Need more Jquery refrences.
It would be really nice to have a link straight to the demo of these elements. So one can actually decide rather quickly if he/she wants to dive deeper into it.
Great article though, Thanks!
I’m not very well verse in jquery because it’s CSS that i like but I notice that jquery ui is quite popular among web developers. Great post!
I wasn’t aware about most of these resources. And the Progressbar jQuery mentioned here, works like a charm.