background preloader

Jquery

Facebook Twitter

jQuery UI Multiple Select Widget. This is the successor and port of my original jQuery MultiSelect Plugin to a jQuery UI widget.

jQuery UI Multiple Select 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. The most requested feature was the ability to call methods on instances after initialization (e.g., statefullness), and now there are 10 to choose from! 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. 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.

SelectBoxIt - A jQuery Select Box Plugin

Twitter Bootstrap, jQueryUI, and jQuery Mobile themes are supported right out of the box. If you don't want to use these a library theme, then you can use the SelectBoxIt default theme, which closely resembles the Twitter Bootstrap theme. 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).

Path Selector

Demo There are three important concepts: Part: The current option selected for each level. 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.

jDoubleSelect (Two selects from one with optgroups) plugin: documentation and demo page

Jquery Animated Grid Plugin Dipi Graphics // Denis Pissoort. What does this plugin ?

Jquery Animated Grid Plugin Dipi Graphics // Denis Pissoort

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. 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.

multiselect2side (multiple select double side) plugin: documentation and demo page

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.

Poshy Tip jQuery Plugin Demo Page

Here are some examples that are included in the download package (in the "src" folder). .tip-yellow .tip-violet View plain code. 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.

A Plugin Development Pattern

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. jQuery Tooltip Plugin Demo. Giva Labs - Linkselect jQuery Plug-in. Overview The jQuery Linkselect plug-in converts <select /> elements into a combination of an anchor tag associated with a dropdown menu.

Giva Labs - Linkselect jQuery Plug-in

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. One key design issue with the <select /> is that it's hard to control how much screen real estate is taken up by the element. If your <select /> contains options of varying sizes, the width of the <select /> element can quickly get out of hand. 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. Plugins. Jqselecta - Project Hosting on Google Code. JqSelecta renders a scrollable tabular view of a <select> HTML element's <option>s.

jqselecta - Project Hosting on Google Code

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. 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) 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. UI.Layout Plug-in - Home. 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. Plugins. Jmaps - Google Code. jQuery.ScrollTo. Notice I've pretty much stopped updating this blog, but the plugin development is still on-going.

You can find the link to the Github project page at the bottom of the article. Introduction An article about animated scrolling with jQuery inspired me to make a small, customizable plugin for scrolling elements, or the window itself. How to specify what to scroll ? Simple, all the matched elements will be scrolled, for example: $('div.pane').scrollTo(); Plugins. jQuery plugin: Treeview. Lightwof an unordered list into an expandable and collapsable tree, great for unobtrusive navigation enhancements. Supports both location and cookie based persistence. Note as of April 2010: While the plugin still works as it is, it has some shortcomings, and not maintained anymore.

There are now plenty of alternative jQuery tree plugins, like jsTree. Eventually there will be successor as part of jQuery UI. Note October 2010: Despite the above, I’ve moved the plugin to GitHub, fixed a bug when combining persist: “location” and prerendered: true, and released (tagged in Git) 1.4.1. Current version: 1.4.1License: MIT/GPL. The jQuery Tooltip Plugin allows you to easily create ajax tooltips. Usage. Introduction DataTables operates on the principle of progressive enhancement, whereby an enhanced and interactive table will be presented to the end user if their browser has the required capabilities.

Dateslider - Google Code. JdMenu Hierarchical Menu Plugin for jQuery. Seek Attention - jQuery plugin - by James Padolsey. .: Fairway Technologies jQuery FlexBox :. Jquery-datepicker - Google Code. Slider Gallery. This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff. jQuery already has the plugins to create these effects so we don’t have to go about creating them ourselves from scratch. MarkItUp! Universal Markup Editor. jQuery.flyout demo. JQuery Flyout is a simple image viewing plugin with preloading capabilities I developed in 2008 for my own projects. The goal was to provide a simple, yet effective way to view normal image links without leaving the source page by using JQuery to preload the image, show a message or loading animation during that process, and finally explode or 'flyout' the image into full view using JQuery easing animations.

Plugins. Plugins. ClockPick, a jQuery timepicker plugin. jQuery Tip - Getting Select List Values: jQuery, Tutorial. A friend asked me a simple question today, but it is worth noting because I have asked the same before, “How do you get the current value from a select list?” To get the current value is very simple using val() . But sometimes you may need to get the selected option’s text. This is not as straight forward. First, we get the selected option with :selected selector. jQuery datePicker home. Plugins. Plugins. Better Coda Slider. jQuery Form Plugin. The following code controls the HTML form beneath it. Drop Shadow Examples. Highlight Demo. TableFilter.