background preloader

jQuery Plugins

Facebook Twitter

jQuery BlockUI Plugin. The jQuery BlockUI Plugin lets you simulate synchronous behavior when using AJAX, without locking the browser[1].

jQuery BlockUI Plugin

When activated, it will prevent user activity with the page (or part of the page) until it is deactivated. BlockUI adds elements to the DOM to give it both the appearance and behavior of blocking user interaction. Usage is very simple; to block user activity for the page: $.blockUI(); Blocking with a custom message: Blocking with custom style: To unblock the page: $.unblockUI(); If you want to use the default settings and have the UI blocked for all ajax requests, it's as easy as this: $(document).ajaxStart($.blockUI).ajaxStop($.unblockUI); This page demonstrates how to block selected elements on the page rather than the entire page. Test link - click me! Lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo lorem leo consectetuer adipiscing elit sed lorem leo rhoncus sit amet lorem ipsum dolor sit amet consectetuer adipiscing elit sed lorem leo Test link - click me!

Tabs Widget. Description: A single content area with multiple panels, each associated with a header in a list.

Tabs Widget

Tabs are generally used to break content into multiple sections that can be swapped to save space, much like an accordion. Tabs have a particular set of markup that must be used in order for them to work properly: The tabs themselves must be in either an ordered (<ol>) or unordered (<ul>) list Each tab "title" must be inside of a list item (<li>) and wrapped by an anchor (<a>) with an href attribute Each tab panel may be any valid element but it must have an id which corresponds to the hash in the anchor of the associated tab.

The content for each tab panel can be defined in-page or can be loaded via Ajax; both are handled automatically based on the href of the anchor associated with the tab. By default tabs are activated on click, but the events can be changed to hover via the event option. JsTree. 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. Tablesorter. Colorbox - a jQuery lightbox. A lightweight customizable lightbox plugin for jQuery View Demos Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content.Lightweight: 10KB of JavaScript (less than 5KBs gzipped).Appearance is controlled through CSS so it can be restyled.Can be extended with callbacks & event-hooks without altering the source files.Completely unobtrusive, options are set in the JS and require no changes to existing HTML.Preloads upcoming images in a photo group.Currently in use on a million-plus websites.

Colorbox - a jQuery lightbox

Instructions & Help The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. Usage Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element. Settings Public Methods Event Hooks Hey, Flot: Attractive JavaScript plotting for jQuery.