SelectBoxIt - A jQuery Select Box Plugin Turns this Description SelectBoxIt allows you to replace ugly and hard to use HTML select boxes with gorgeous and feature rich drop downs. Twitter Bootstrap, jQueryUI, and jQuery Mobile themes are supported right out of the box. To use SelectBoxIt, you do not have to rewrite any of your existing form validation logic or event handling. The project is hosted on Github, the annotated source code is available, and an online test suite is also available via Travis CI. Fork on Github » Also, if you would like to receive updates about new SelectBoxIt releases, you can subscribe to the SelectBoxIt Mailing List Examples Note: You can try all SelectBoxIt options, events, and methods inside of the HTML editor at the top of the page. Theming Support Default Theme Note: The default theme closely resembles the Twitter Bootstrap theme, but does not require Twitter Bootstrap as a dependency. Example Code Bootstrap Theming Support Into this SelectBoxIt is: jQueryUI Theming Support jQuery Mobile Theming Support
Chosen - makes select boxes better Chosen is a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. Downloads Project Source Contribute Standard Select Turns This Into This Multiple Select <optgroup> Support Single Select with Groups Multiple Select with Groups Selected and Disabled Support Chosen automatically highlights selected options and removes disabled options. Single Select Multiple Select Hide Search on Single Select The disable_search_threshold option can be specified to hide the search input on single selects if there are n or fewer options. Default Text Support Chosen automatically sets the default field text ("Choose a country...") by reading the select element's data-placeholder value. Note: on single selects, the first element is assumed to be selected by the browser. No Results Text Support Setting the "No results" search text is as easy as passing an option when you create Chosen: Limit Selected Options in Multiselect You can easily limit how many options the user can select: Right-to-Left Support
Path Selector Path selector is a breadcrumb bar jquery plugin for selection of hierarchic options (similar to address bar of the windows explorer in Vista and Windows 7). Demo There are three important concepts: Part: The current option selected for each level. Features Options can be static or dynamic. How to use First, import the necessary javascript (including the jquery javascript) and css files. Declare the input element that we want to turn into a path selector. And finally, invoke the plugin in the input element passing the parameter that indicates how the options will be retrieved. Each option object may have a property value (this will be the value of the part) and a label (the text displayed to the user). Options Configuration You have three ways to configure how to retrieve the options shown to the user. Fixed options When the options of each level are always the same, pass an array of arrays of the options: Demo with code Dynamic local options See example Ajax options Aditional settings Events Methods
jQuery TOOLS - The missing UI library for the Web introducing jQuery TOOLS FORM The 20 year wait is over. Now you can build your forms with HTML5 and make them look and behave like you want. HTML5 Form validation jQuery Tools brings form validation to the level that it should have been 20 years ago. HTML5 date input for humans Now you can use HTML5 date inputs in all browsers. HTML5 range input for us all Range inputs simply make your forms easier to use. This imaginary form is constructed with 100% HTML5 standard. Here are all the input fields and scripting for the demo. This form uses CSS3 features such as attribute selectors, rounded borders, RGBA coloring and box shadows. At the time of writing Opera has the best native support for HTML5. Now listen. Let me put this another way. jQuery TOOLS 1.2.0 A typical software project grows in time. Smaller and smaller In JavaScript, file size is a very important quality measure. A completely new Scrollable The new Scrollable gives you complete freedom in "page" design. Toolbox. Smoother Tooltips
jDoubleSelect (Two selects from one with optgroups) plugin: documentation and demo page Demo 1 - Two selects from one with optgroups Selct with an optgroup disable Click here to see how jDoubleSelect() change the select below Click here to unbind jDoubleSelect() Select option: In this page you see 2 select with optgroups (modified by jDoubleSelect) in action! This is the javascript code to launch jDoubleSelect to all select: $().ready(function() { $('select').jDoubleSelect(); }); Demo 2 - Two selects from one with optgroups This select has more than 100 optgroups and 8000 options but is very very fast Select the province: Documentation To use this jquery plugin: download jquery.jDoubleSelect.js and images files download last version of jquery.js include the js in the head section of the page: <head> ... Download You can download the entire archive: jquery.jDoubleSelect.zip - a zip archive containing the plugin source, a minified version of jQuery and a demo page. Release License Dual licensed under the MIT and GPL licenses.
MagicSuggest - auto-complete & more This combo was generated with the default options. With no configuration options set, you have the following behaviour: - the side trigger is visible and the selected items appear within the combo itself. - suggestions will appear as the user starts typing - the user can toggle the suggestions using arrow keys - the user can delete selected items by using backspace - the user can hold the ctrl key to select multiple items - the user is free to enter new input using the enter key after having entered text There are many configuration options that allow you to customize the component. Installation Guide 1. 2. 3. (Requires jQuery 1.8 or higher to work.) 4. $(el).magicSuggest({options}); Configuration Properties Notice for 1.2.5+ users Note that as of version 1.2.5, the component's configuration is also generated from the original DOM element container. The following 2 blocks of code will generate the same component: Config options allowFreeEntries boolean cls string data array / string / function dataUrlParams
Jquery Animated Grid Plugin Dipi Graphics // Denis Pissoort What does this plugin ? The Animated Grid Plugin is a simple bi-dimensional Grid. It was created to be the more flexible as possible to fit into your Html Structure easily without adding extra class. It allow you to manage easily the degradation if javascript is disable with two differents fields in the Css file. Demo This demo using only class / autoCloseCell = true / + funny jumping effect : $(document).ready(function(){ Main Categorie 1 Subtitle 01 Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean mollis lobortis velit, eu dictum odio rhoncus eget. Subtitle 02 Sed interdum pellentesque tellus, sit amet vehicula turpis laoreet ut. Subtitle 03 Fusce in diam et purus ultrices lobortis. Main Categorie 2 Main Categorie 3 Licence Jquery Animated Grid Plugin by Denis Pissoort is shared under the terms of the licence Creative Commons Paternité-Partage des Conditions Initiales à l'Identique 2.0 Belgique. The HTML Structure Add Jquery and the plugin to your page
multiselect2side (multiple select double side) plugin: documentation and demo page Demo Search - Full demo select multiple double side with search option true (1000 elements) Select multiple="multiple" modified by multiselect2side Click here to test the select above Result of a php print_r() function: Click here to hide/show original select This is the javascript code to launch multiselect2side to #searchable select: Demo 1 - Full demo select multiple double side This is the javascript code to launch multiselect2side to #first select: Demo 2 - select multiple double side - moveOptions: false, autoSort: true Move buttons are disabled but is enable autoSort. This is the javascript code to launch multiselect2side to #second select: Demo 3 - select multiple double side - selectedPosition: 'left' Elements selected are in the left, label of move buttoms are modified. This is the javascript code to launch multiselect2side to #third select: Demo 4 - Select multiple double side with limited number of selectionable options Documentation To use this jquery plugin: Options: Methods: Download
Poshy Tip jQuery Plugin Demo Page Usage Examples The default browser tooltip that displays the value of the title attribute is replaced with a "poshier" version: Hover for a tooltip Styles (Classes) Using different tooltip classes is easy. Here are some examples that are included in the download package (in the "src" folder). .tip-yellow .tip-violet View plain code .tip-darkgray .tip-skyblue .tip-yellowsimple (no background-image used for the tooltip body) .tip-twitter (ala Twitter) .tip-green Form Tooltips (with varying positioning) Adding form input field tooltips is simple. Asynchronous Loading of the Content Poshy Tip supports using a function for returning the tooltip content and the script also passes an update callback function as an argument to this function. Simple Example Update content after 1 second Loading Flickr Feeds A more complicated example of loading some Flickr images by tags: flowers, closeup, sunset, architecture, Plovdiv, old, town, Nesebar, depeche Following the Mouse Cursor Using Live Events Options className String
A Plugin Development Pattern I've been developing jQuery plugins for quite a while now, and I've become rather comfortable with a particular style of plugin development for my scripts. This article is meant to share the pattern that I've found especially useful for plugin authoring. It assumes you already have an understanding of plugin development for jQuery; if you're a novice plugin author, please review the jQuery Authoring Guidelines first. There are a few requirements that I feel this pattern handles nicely: Claim only a single name in the jQuery namespace Accept an options argument to control plugin behavior Provide public access to default plugin settings Provide public access to secondary functions (as applicable) Keep private functions private Support the Metadata Plugin I'll cover these requirements one by one, and as we work through them we'll build a simple plugin which highlights text. Claim only a single name in the jQuery namespace This implies a single-plugin script. JavaScript: Putting it All Together
Giva Labs - Linkselect jQuery Plug-in | Giva Overview The jQuery Linkselect plug-in converts <select /> elements into a combination of an anchor tag associated with a dropdown menu. This combination allows you to highly customize the look and feel of the select element, without losing any functionality. While there are many similar plug-ins, the key differentiator with the Linkselect plug-in is that is designed to fit in limited real estate. In a recent project we were working on, we required the functionality of a <select /> element, but had to work within a very confined design area. The Linkselect Plug-in resolves this space by replacing the <select /> element with an anchor tag that provides all the same functionality of a single item select box. Requirements In order to use the Linkselect plug-in, you need the following: jQuery v1.4.3 (or higher)* jquery.linkselect.js Plug-in jquery.bgiframe.js Plug-in (Optional; for fixing overlay issues in IE6) Usage $("select").linkselect([options]); Arguments options Elements id name title tabindex