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.

Shake Things Up Using jQuery UI’s Shake Effect

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.

jQuery UI 1.9 Milestone 6 – Spinner 2

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.

Optimize Using Modal Window or Dialog Box in JQuery UI

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.

jQuery UI Slider plugin

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.

jQuery Simple UI Slider Tutorial

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.

WordPress Sidebar Turned Apple-Flashy Using jQuery UI

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

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.

Using Multiple jQuery UI Themes on a Single Page

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.

Create HTML tabs using jQuery UI

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.

Using Multiple jQuery UI 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:

Custom 404 with jQuery and jQuery UI

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

Progressbar

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.

Tabs

More Information on Tabs

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.

Datepicker

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.

Autocomplete

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.

Dialog

More Information on Dialog

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.

Button

More Information on Button

Accordion

Click headers to expand/collapse content that is broken into logical sections, much like tabs. Optionally, toggle sections open/closed on mouseover.

Accordion

More Information on Accordion

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.

Selectable

More Information on Selectable

Sharing is Caring
  • http://www.paulund.co.uk Paul

    Jquery UI is very helpful on any wesbite. I also like using JQuery Tools aswell, that includes some jquery tooltips.

  • http://fortunerealestate.in sudeep

    Need more Jquery refrences.

  • Bhavik

    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!

  • Jai

    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!

  • http://www.satyathakur.com Satya Thakur

    I wasn’t aware about most of these resources. And the Progressbar jQuery mentioned here, works like a charm.

  • https://www.facebook.com/nikhil.sharma.982845 Nikhil Sharma

    This is a very useful resource. Bloggers do search for a post like this in the net. It’s great you have it here. Great share!

  • Kamal

    Great Resources of “Awesome jQuery UI “,need more interesting posts like this,thanks a lot for sharing…