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. .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 Hover for a tooltip that follows the cursor API Example - Triggering the Tooltip Manually Using Live Events Options className String
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
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
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
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.
jqselecta - Project Hosting on Google Code jqSelecta renders a scrollable tabular view of a <select> HTML element's <option>s. Useful for large data sets (with an arbitrary number of columns, as well as optional select all, select none and invert selection buttons) and also where you'd like the form elements to conform to the UI (i.e. themeroller skin). It's non-destructive, in that the underlying form element isn't destroyed - the plugin maintains the state of the underlying select-option, so plain form submission will work and other JS components can access the select-option's state without tight coupling to the jqSelecta plugin. State optionally persisted using cookies, and, in multi-select mode the cancel button reverts to previous selection. For a full list of features/options see the wiki. Notes: This plugin is themeroller compatible as of jQueryUI 1.7 Currently this is quite a new project, i'll happily fix any bugs reported while it's still fresh =) Release 0.3 is now available
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
don’t look » columnHover Description: A jQuery-plugin that highlights whole columns in a table when hovering over them. It’s supporting tables with colspans and rowspans, too! If you need support for row highlighting through the plugin, please head over to the tableHover plugin page. Demo and Example page. Files: (last update: 2007-08-05 - v 0.1.1) License: The plugin is available under both MIT and GPL licenses (as jQuery itself). Usage and Examples: Please take a look at the demo page and the source of the jquery.columnhover.js file. Available options: hoverClass - string - A CSS class that is set on the cells in the column with the mouse over. Changelog: v 0.1.1 - 2007-08-05 added new option “ignoreCols”, through which columns can be excluded from the highlighting process The plugin was successfully tested on Firefox 2, Opera 9.21 and IE 6/7. Leave a Reply
don’t look » clickMenu Description: A clickable dropdown menu with (theoretically unlimited) submenus made out of an an unordered list. It’s behaviour is like an application menu (click to open, click to close, stays open even after hovering elsewhere). Demo Files: (last update: 2007-09-06 - v 0.1.6) Usage: <script type="text/javascript">$(document).ready(function() { $('#list').clickMenu(); }); </script> <ul id="list"> <li>Item one <ul> <li>Subitem one</li> <li>Subitem two</li> </ul> </li> <li>Item two</li> </ul> <script type="text/javascript">$(document).ready(function() { $('#list').clickMenu(); }); </script><ul id="list"><li>Item one <ul><li>Subitem one</li><li>Subitem two</li></ul></li><li>Item two</li></ul> More Examples: Available options: onClick - function - callback function triggered when a list item is clicked - returning false will stop the default action of the clicked elementarrowSrc - string - url of the image to be used as an arrow indicating a submenu (e.g. Changelog: Known problems:
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. 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 // Calls the selectBoxIt method on your HTML select box and uses the default theme $("select").selectBoxIt(); Bootstrap Theming Support Into this SelectBoxIt is: jQueryUI Theming Support Long Lists
jQuery UI Multiple Select Widget | Eric Hynds This is the successor and port of my original jQuery MultiSelect Plugin to a jQuery UI widget. While both will actively be maintained, I highly recommend you use this version over the plugin version. It has a more robust feature set, is faster, and is much more flexible. MultiSelect turns an ordinary HTML select control into an elegant drop down list of checkboxes with themeroller support. This version inherits all the benefits from the jQuery UI widget factory that are not available in the plugin version. Current version: 1.13 (08/19/2012 - changelog)View demos.Download source or minified, and the CSS file.Follow this project on GitHub.Run the unit tests.Please report any bugs on the issue tracker. Demo See what you're missing out on? Usage Using this widget is simple. jQuery 1.4.2+jQuery UI 1.8 widget factory and effects (if you'd like to use them)A jQuery UI themeThis widget: jquery.multiselect.jsThe CSS file: jquery.multiselect.css Next construct a standard multiple select box. Options
jQuery plugin: Autocomplete Note (2010-06-23): This plugin is deprecated and not developed anymore. Its successor is part of jQuery UI, and this migration guide explains how to get from this plugin to the new one. This page will remain as it is for reference, but won’t be updated anymore. If you’re still using the plugin and can’t upgrade to jQuery UI autocomplete: Someone else is maintaining a GitHub repository with the plugin, including some fixes. There’s also an update to the original version of the standalone plugin in a Google Code project. Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook. Files: