Besides jQuery itself, JQueryPlugin comes with a selection of third party plugins that are thought to be essential for modern web applications.
These are integrated into Foswiki either by means of a special macro, by means of "minimal markup", or initialized using
a custom javascript initializer. This way the set of Foswiki macros that comes with JQueryPlugin is kept rather low compared to the features available
in third party plugins. "Minimal markup" is a way to avoid the need to write javascript code to initialize the interface. Instead, a special
css class is added to an html element that triggers its initialization. See JQueryMetadata for an example.

Use JQREQUIRE to make use of a specific jQuery plugin on a page. This will prepare the page by loading the required javascript
and css components. If you need to make a feature available on each and every page of your site, you may add this plugin to the list of default plugins
loaded automatically. See configure.

Those plugins coming with their own macro will take care of loading their javascript and css by themselves. So you won't need to
call JQREQUIRE explicitly for those listed below.

TAB{"text" ...} -- tab inside a tabpane widget

when switching tabs, this is the javascript fragment to be executed just before the tab is displayed

after

this javascript handler is to be executed after the tab has been made visible

afterload

this javascript handler will be called when content loaded asynchronously (using the url parameter, below) has finished loading; depending on the network latency, this can be significantly later than execution of the after handler above

id

id of this tab; this id can be used in the TABPANEs select parameter to display this tab; this id is also added to the class attribute of the html element representing the tab button

url

link from where to load the content of the tab asynchronously when selecting this tab; the result of the addressed handler will replace the content area; if no url is set the content of the TAB ... ENDTAB area will be shown when the tab is selected

width

width of the tab area

auto

height

height of the tab area

auto

container

element where ajax content will be loaded; this is only used together with url

JQREQUIRE{"plugin, plugin, ... "} -- enable a plugin on the current page

This macro will load a list of plugins to be added to the current page. Use JQPLUGINS to display the list of available and active plugins. While loading a plugin, additional plugins it may depend on are loaded as well. Information about these dependencies is stored within the plugins themselves and can't be changed. Dependencies also make sure the javascript code is added to the html page in the right order. It uses ADDTOZONE to aggregate javascript and css at the right place on the html page.

JQTHEME{"name" ...} -- switch jQuery UI theme

Foswiki's default UI theme is configured in $Foswiki::cfg{JQueryPlugin}{JQueryTheme} and defaults to base. Use configure to change this site wide. Use JQTHEME if you decide to use a different theme on the current page.

Note: some Foswiki skins may come with their own jQuery UI matching the overall user experience of the web design.

Available jQuery plugins

The jQuery BlockUI Plugin lets you simulate synchronous behavior when using
AJAX, without locking the browser. 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.

This is a simple way to render nice buttons in Foswiki.
It can be used to replace submit and reset buttons of html forms as well.
FamFamFamContrib is recommended to display nice icons
on buttons. Note, that this widget does not participate on the jquery
theme roller. This is independent.

The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation
is based on the JQueryInnerFade Plugin by Torsten Baldes, the Slideshow Plugin by
Matt Oakes, and the jqShuffle Plugin by Benjamin Sterling. It supports
pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and
many transition effects. It also supports, but does not require, the Metadata
Plugin and the Easing Plugin.

Farbtastic is a jQuery plug-in that can add one or more color picker widgets
into a page. Each widget is then linked to an existing element (e.g. a text
field) and will update the element's value when a color is selected.
Farbtastic uses layered transparent PNGs to render a saturation/luminance
gradient inside of a hue circle. No Flash or pixel-sized divs are used.

There's a color formfield for easy integration into Foswiki DataForms.

The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML
forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather
information from the form element to determine how to manage the submit
process. Both of these methods support numerous options which allows you to
have full control over how the data is submitted. Submitting a form with AJAX
doesn't get any easier than this!

This is plugin takes care of loading the jQuery core and default plugins and
performs any initialization steps specific to Foswiki, For instance, it reads
all <meta> tags from the html head as they have been set by Foswiki and
constructs the foswiki javascript object to be used by other javascript
plugins.

In addition it adds some basic Foswiki tags to make life easier using jQuery
plugins, most notably %JQREQUIRE{"pluginName"}% to load a subsequent
jQuery plugin and all of its dependencies, taking care where and how it
is added to the html page.

hoverIntent is similar to jQuery's built-in "hover" function except that
instead of firing the onMouseOver event immediately, hoverIntent checks
to see if the user's mouse has slowed down (beneath the sensitivity
threshold) before firing the onMouseOver event.

InnerFade is a small plugin for the jQuery-JavaScript-Library. It's designed to
fade you any element inside a container in and out. These elements could be
anything you want, e.g. images, list-items, divs. Simply produce your own
slideshow for your portfolio or advertisings. Create a newsticker or do an
animation.

This plugin will animate a regular anchor navigation.
It will allow your visitors to navigate your site with a smooth scrolling effect.

Each time a link is clicked, the element you decide(can be the whole screen), will gradually scroll to the targeted element, instead of "jumping" as it'd normally do.
JQueryScrollTo is used for the animation.

This is a masked input plugin for the jQuery javascript library. It allows a
user to more easily enter fixed width input where you would like them to enter
the data in a certain format (dates,phone numbers, etc). It has been tested on
Internet Explorer 6/7, Firefox 1.5/2/3, Safari, Opera, and Chrome. A mask is
defined by a format made up of mask literals and mask definitions. Any
character not in the definitions list below is considered a mask literal. Mask
literals will be automatically entered for the user as they type and will not
be able to be removed by the user.

Masonry is a layout plugin for jQuery. Think of it as the flip side of CSS
floats. Whereas floating arranges elements horizontally then vertically,
Masonry arranges elements vertically then horizontally according to a grid. The
result minimizes vertical gaps between elements of varying height, just like a
mason fitting stones in a wall.

This extension creates a singleton query string object for quick and
readable query string modification and creation. This plugin provides a
simple way of taking a page's query string and creating a modified
version of this with little code.

The Star Rating Plugin is a plugin for the jQuery Javascript library that
creates a non-obstrusive star rating control based on a set of radio input
boxes.

It turns a collection of radio boxes into a neat star-rating control. It
creates the interface based on standard form elements, which means the basic
functionality will still be available even if Javascript is disabled.

Shrinks all urls in a given container whose link text exceeds
a given size and have no white spaces in it, that is don't
wrap around nicely. If the text is skrunk, the original text
is appended to the title attribute of the anchor.

Show images in a lightbox. Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very small, efficient, standards-friendly, fully customizable, more convenient and 100% compatible with the original Lightbox 2.

Suckerfish-style hover support for IE6. The class added is sfHover by default but can be changed via the options object,

Timed delay on mouseout to be more forgiving of mouse-piloting errors. Default is 800 milliseconds but can be changed via the options object

Animation of sub-menu reveal. uses a fade-in by default but can be given a custom object to be used in the first argument of the animate function. The animation speed is also customisable but is set to ?normal? by default

Keyboard accessibility. Tab through the links and the relevant sub-menus are revealed and hidden as needed

Supports the hoverIntent plugin. Superfish automatically detects the presence of Brian Cherne?s hoverIntent plugin and uses its advanced hover behaviour for the mouseovers (mouseout delays are handled by Superfish regardless of the presence of hoverIntent). Using this is only an option, but a nice one. The examples on this page are using hoverIntent. If for some reason you want to use hoverIntent on your page for other plugins but do not want Superfish to use it you can set the option disableHI to true.

Indicates the presence of sub-menus by automatically adding arrow images to relevant anchors. Arrows are fully customisable via CSS. You can turn off auto-generation of the arrow mark-up via the ?autoArrows? option if required.

Can show the path to your current page while the menu is idle. The easiest way to understand this is to view the nav-bar example.

Optional callback functions. The 'this' keyword within the handlers you attach will refer to the animated ul sub-menu. From version 1.4 there are now three other optional callbacks allowing for further enhancements and functionality to be added without needing to alter the core Superfish code.

See supersubs companion Javascript to automatically resize menus to fit their contents.

Note: The jQuery team has decided not to take this plugin past beta. It is no longer being actively developed or maintained. The docs remain here for the time being (for reference) until a suitable replacement template plugin is ready.

Display a customized tooltip instead of the default one for every selected
element. Tooltips can be added automatically to any element that has got
at title attribute thus replacing the standard tooltip as displayed by
the browsers with a customizable one.

Content can be reloaded using AJAX. For example, this can be used to
display an image preview in a tooltip. Have a look at the thumbnail REST
service of Foswiki:Extensions/ImagePlugin how to load the thumnail from the
backend dynamically.

Lightweight and flexible transformation of an unordered list into an
expandable and collapsable tree, great for unobtrusive navigation enhancements.
Supports both location and cookie based persistence.

42. Twisty

44. UI::Accordion

Autocomplete, when added to an input field, enables users to quickly find and
select from a pre-populated list of values as they type, leveraging searching
and filtering.

By giving an Autocomplete field focus or entering something into it, the plugin
starts searching for entries that match and displays a list of values to choose
from. By entering more characters, the user can filter down the list to better
matches.

46. UI::Button

47. UI::Datepicker

A dialog is a floating window that contains a title bar and a content area. The dialog window can be moved, resized and closed with the 'x' icon by default.

If the content length exceeds the maximum height, a scrollbar will automatically appear.

A bottom button bar and semi-transparent modal overlay layer are common options that can be added.

A call to $(foo).dialog() will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with:
$(foo).dialog({ autoOpen: false }) and open it with $(foo).dialog('open'). To close it, use $(foo).dialog('close').

49. UI::Draggable

50. UI::Progressbar

51. UI::Resizable

52. UI::Slider

53. UI::Tabs

This plugin allows to create a WikiWord on the base of a set of
input elements. The value of these are concatenated and the result is
normalized to be a valid WikiWord. For example, this can be used
to derive a topic name from a free-form topic title text.

Using compressed javascript and css files

All jQuery plugins are shipped with uncompressed js and css files, as well as minified and gzip compressed.
For instance the jquery.form plugin comes with the following set:

There is a Makefile in the /wiki/pub/System/JQueryPlugin root directory that ensures all these
files are up to date. By default all files in the JQueryPlugin package are up to date, so you only have to
issue a make in the root directory if you wish to
modify one of the files underneath. This will update
all minified and gzipped files as required. Enable the {JQueryPlugin}{Debug} flag in configure,
to use the uncompressed files right away to omit the make step during development of new javascript components.

Apache can be configured to automatically use the .gz files if present using mod_rewrite as follows:

So whenever the browser accepts encoding the file as gzip and the file with the .gz exists
in the filesystem, then there will be an internal redirect in the server while still enforcing the original mime-type.
The browser on the client side will unzip the css and js files automatically. This will drastically
reduce bandwidth and speed up interactive performance.

Installation Instructions

You do not need to install anything in the browser to use this extension. The following instructions are for the administrator who installs the extension on the server.

Open configure, and open the "Extensions" section. Use "Find More Extensions" to get a list of available extensions. Select "Install".

added livequery and rewrote all initializers to use it; added rating formfield type; updated jqGrid to latest version; improved foswiki integration and documentation of various plugins; upgraded jwplayer coming with media plugin; using Foswiki:Extensions/ZonePlugin now to optimize page load time

updated Superfish to 1.4.8 and added examples topic, added supersubs plugin, moved JQuery examples from Sandbox to System

29 Oct 2009:

added SCRIPTSUFFIX to foswiki var set (CDot)

14 Sep 2009:

added perls tubs for jquery.ui, so that you can pull it in via JQREQUIRE now; reworked plugin initialization to allow elements to be init'ed when loaded via ajax; fixed BUTTON to play nicely with TwistyPlugin; only load ui-theme if you jqrequire the ui library

fixed tabpane not being rendered using a rest handler; added id to tabs that can be used to init the first active one; added compressed version of blockUI; replaced ICONTOPIC preference variable with ICONSEARCHPATH to search for icons in multiple directories (defaults to all of FamFamFamContrib)