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.
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 survey opens when page loads. Pop-ups on window.unload or window close are being blocked by most browsers due to abuse and overuse.
- Cookie is set when survey submitted or user opts out (“No, thanks” click).
- 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.
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.
- 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 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.
- 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
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!
- 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.
The jQuery Tagit Plugin transforms an html unordered list into a unique tagging plugin.
- 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!
The ultimate framework for building and validating responsive HTML5 forms.
- Fully responsive (AKA adaptive, adapts to the container, no css media queries needed).
- Keyboard support.
- Every input type can be customized including
- Custom datepicker using jQuery UI (with fallback)
- “On the spot” validation.
placeholder for every browser.
Here is new tutorial to add a nice advanced sliding effect bar to your website with JQuery UI and CSS3.
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.