Best jQuery jQuery UI Plugins & Tutorials with Demo

Delta : A Free jQuery UI Theme

Delta : A Free jQuery UI Theme

Kiandra is pleased to announce the open sourcing of a jQuery UI theme we think you’re going to love. We have been using the “Delta” theme for the better part of a year and made the decision to share it with the community. We’re hoping this results in plenty of feedback as well as the continued development of the theme. It’s free for commercial, personal and educational use as part of the MIT or GPL license.

If anything, we think that this theme can act as a starting point for other smart cookies to create their own visually engaging jQuery UI themes.

customSelect : jQuery UI widget to pretty up Select Elements

customSelect : jQuery UI widget to pretty up Select Elements

A simple jQuery UI widget to pretty up <select> elements and input custom ranges. It’s fully unit tested too, you can run the tests if you like.It works by setting the values back in your original select, so you can call the standard jQuery val methods to read the value, bind to the change event, etc right on the native element.

Pop-up Survey with jQuery UI Dialog

Pop-up Survey with jQuery UI Dialog

I was tasked with creating a pop-up survey for a project. Fairly simple whether I used the jQuery dialog or not so I added a “Thank you” dialog that displays the survey results with a lightweight, css-based bar chart just for fun.

Pop-up Behavior

  1. Pop-up survey opens when page loads. Pop-ups on window.unload or window close are being blocked by most browsers due to abuse and overuse.
  2. Cookie is set when survey submitted or user opts out (“No, thanks” click).
  3. Closing dialog will not set cookie

All survey data is stored in a database and jQuery .post is used to shuttle the information back and forth.

SelectBoxIt : jQuery Stylish & Animated Select Box Plugin

SelectBoxIt : jQuery Stylish & Animated Select Box Plugin

A jQuery plugin that progressively enhances an HTML Select Box into a single option dropdown list. The dropdown list can be optionally styled with Twitter Bootstrap or jQueryUI ThemeRoller and optionally animated with jQueryUI show/hide effects.

Features:

  • Styleable with Twitter Bootstrap and jQueryUI Themeroller (optional)
  • Supports all jQuery and jQueryUI show/hide effects (optional)
  • Includes ARIA (Accessible Rich Internet Applications) support
  • Full keyboard search and navigation support
  • An event API triggered on the original select box element that calls the plugin
  • A method API providing methods to interact with the dropdown list (i.e. Search, Open, Disable, Set Options).
  • Passes jsHint with no errors
  • Selected, Disabled, and Optgroup Support
  • Easily extendable to allow developers to create new widgets

Create.js : Make anything editable with jQuery

Create.js : Make anything editable with jQuery

Create.js is a comprehensive web editing interface for Content Management Systems. It is designed to provide a modern, fully browser-based HTML5 environment for managing content. Create can be adapted to work on almost any content management backend.

Features:

  • Making RDFa-annotated content on pages editable
  • Managing collections of content (add, remove)
  • Local, in-browser storage and retrieval of unsaved content
  • Adaptable connector for communicating with the back-end system
  • Running workflows (approval, etc.) for content items
  • Browsing and reverting content history
  • Easy rebranding of the interface with some CSS

SlickGrid : A lightning fast jQuery grid/spreadsheet

SlickGrid : A lightning fast jQuery grid/spreadsheet

SlickGrid is a JavaScript grid/spreadsheet component.
It is an advanced component and is going to be a bit more difficult to learn and configure, but once you realize its full potential, it will blow your mind!

Some highlights:

  • Adaptive virtual scrolling (handle hundreds of thousands of rows with extreme responsiveness)
  • Extremely fast rendering speed
  • Supports jQuery UI Themes
  • Background post-rendering for richer cells
  • Configurable & customizable
  • Full keyboard navigation
  • Column resize/reorder/show/hide
  • Column autosizing & force-fit
  • Pluggable cell formatters & editors
  • Support for editing and creating new rows.
  • Grouping, filtering, custom aggregators, and more!
  • Advanced detached & multi-field editors with undo/redo support.
  • “GlobalEditorLock” to manage concurrent edits in cases where multiple Views on a page can edit the same data.

jQuery Tagit Plugin

jQuery Tagit Plugin

The jQuery Tagit Plugin transforms an html unordered list into a unique tagging plugin.

Features:

  • Convenient way for users to enter a list of items
  • Fully integrated with jQuery ui auto complete
  • Automatically adds current input as tag if input loses focus
  • Easy to use public methods
  • Easy to theme (single css file)
  • Customizable trigger keys
  • Backspace on empty input deletes previous tag
  • Ability to provide initial tags on creation though options
  • Ability to provide initial tags on creation via list items
  • Option to toggle usage of a hidden select so the tags can be sent using a normal form!
  • Ability to re-arrange tags by drag and drop!
  • Optional ThemeRoller compatibility!
  • Fully HTML5 Data-attributes compliant!

Ideal Forms : Responsive Forms with Html5 & jQuery

Ideal Forms : Responsive Forms with Html5 & jQuery

The ultimate framework for building and validating responsive HTML5 forms.

Features:

  • Fully responsive (AKA adaptive, adapts to the container, no css media queries needed).
  • Keyboard support.
  • Every input type can be customized including select, radio, checkbox and file.
  • Custom datepicker using jQuery UI (with fallback)
  • “On the spot” validation.
  • Localization
  • HTML5 placeholder for every browser.

jQuery UI + CSS3 Slide Bar Tutorial

jQuery UI + CSS3 Slide Bar Tutorial

Here is new tutorial to add a nice advanced sliding effect bar to your website with JQuery UI and CSS3.

jQUIT Builder : Build custom jQuery UI themes based on Metro UI

jQUIT Builder : Build custom jQuery UI themes based on Metro UI

jQuit Builder is now available in beta. jQuit Builder is a tool which allows you to create custom jQuery UI themes much like with the jQuery UI ThemeRoller. From experience I have found it difficult to make good looking themes with the ThemeRoller, which is why I have come up with this helpful alternative. The idea of a custom theme builder is great and my implementation is heavily inspired by the jQuery UI ThemeRoller.

jQuery UI ThemeRoller is great, but I find it lacks in certain areas. For example, it allows for too many irrelevant styling possibilities and often the end-result is dull. Lets be honest – only about 2-4 of the prefabricated themes look some what acceptable. The implementation I propose is inspired by Metro UI used by Microsoft in Windows Phone 7 and the upcoming Windows 8. In my opinion Metro UI is nice and clean.