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.