JQueryPlugin

jQuery JavaScript library for Foswiki

Description

"jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages."

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 "minimal markup", or custom javascript initializer. "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.

Adding new plugins

The JQuery ecosystem has a huge number of plugins - more than can be included by default by this plugin. If you want to add new plugins, then you will find instructions for adding them at Foswiki:Development.UsingJQueryWithFoswiki#adding_plugins.

Writing your own Javascript

Whether writing your own plugins or writing Javascript code in topics, you should observe the Foswiki JQuery Coding Standards.

jQuery References and tutorials

• How jQuery Works
• jQuery Learning Center
• jQuery API Documentatiom
• Alternative jQuery Documentation and API Browser
• Avoiding Conflicts with Other Libraries
• The jQuery Plugin Registry

Macros

BUTTON{"text" ...} -- renders a nice button

• Parameters:

  Parameter:	Description:	Default:
  "text", value="text"	text to be put on this button
  accesskey	access key used for this button
  class	extra class: use foswikiRight or foswikiLeft to specify aligment; use cyan, red, green for different background colors; use simple for a non-3D button
  href	url of the click target	#
  icon	icon to be put on the left; note, this can be any icon attached to the {IconSearchPath}; see also VarJQICON
  id	html id for this button
  onclick	javascript event triggered when clicking the button
  onmouseout	javascript event triggered when the pointer leaves the button
  onmouseover	javascript event triggered when the pointer hovers over the button
  target	topic to open when clicking on the button
  title	popup title displayed when hovering over the button
  type	type of action to be performed; available actions are button: (default) normal click button, target specified in target or href parameter clear: clears all input fields in the form that contains the button reset: resets all input fields in a form to their initial value submit: submits the form that contains the button save: same as submit but takes care of extra validation steps when saving a wiki topic	button

• Example:

  %BUTTON{
      "%MAKETEXT{"Submit"}%"
      onclick="confirm('Are your sure?')"
    }%
    %BUTTON{
      "%MAKETEXT{"Cancel"}%"
      icon="cross"
      target="%WEB%.%TOPIC%"
    }% %CLEAR%

• Expands as:
  Submit Cancel
• Note: BUTTONS are floating to the left by default. Take care to add a %CLEAR% after the %BUTTON{...}% so that further content does not overlap with the button.
• Related: JQueryButton

TABPANE{...} -- tabpane widget

• This macro starts the tabpane, containing a series of TAB...ENDTABs and ends with ENDTABPANE. A complete tabpane normally looks like this:

  %TABPANE%
   %TAB{"tab 1"}%
     ...
   %ENDTAB%
   %TAB{"tab 2"}%
     ...
   %ENDTAB%
  %ENDTABPANE%
  

  Multiple tabpanes can be nested using the following scheme:

  %TABPANE%
   %TAB{"tab 1"}%
     %TABPANE%
       %TAB{"tab 1.1"}%
         ...
       %ENDTAB%
       %TAB{"tab1.2"}%
         ...
       %ENDTAB%
     %ENDTABPANE%
   %ENDTAB%
   %TAB{"tab 2"}%
     ...
   %ENDTAB%
  %ENDTABPANE%
  

• Example: see JQueryTabpane for more examples
• Parameters:

  Parameter:	Description:	Default:
  select	number or id of tab to select	1
  automaxexpand	resizes the tabpane to the maximum height to fit into the window	off
  minheight	when automaxexpand is enabled, this is the minimum size a tab is allowed to be resized	230
  class	extra class: use simple for a non-3D tabpane
  animate	(on/off) enables/disables animation of switching tabs	off

• Related: VarTAB, VarENDTAB, VarENDTABPANE, JQueryPlugin, JQueryTabpane

ENDTABPANE -- ending tag for tabpane widget

• This closes a previously opened TABPANE.
• no parameters
• Related: VarTAB, VarENDTAB, VarTABPANE, JQueryPlugin, JQueryTabpane

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

• Defines a tab inside a TABPANE area; must be closed using ENDTAB.
• Parameters:

  Parameter:	Description:	Default:
  "text"	label of the tab	Tab
  before	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

• Related: VarENDTAB, VarTABPANE, VarENDTABPANE, JQueryPlugin, JQueryTabpane

ENDTAB -- ending marker for a tab of a tabpane

• This closes a previously opened TAB.
• no parameters
• Related: VarTAB, VarTABPANE, VarENDTAB, JQueryPlugin, JQueryTabpane

JQICON{"name" ...} -- render an image

• This renders an icon image as found on an icon search path. The icon search path is configured in {JQueryPlugin}{IconSearchPath} and defaults to FamFamFamSilkIcons, FamFamFamSilkCompanion1Icons, FamFamFamFlagIcons, FamFamFamMiniIcons, FamFamFamMintIcons'. The named icon will be picked found first on this path of topics where icons are attached to. The JQICON leverages the general icon loading mechanism as implemented by the JQueryPlugin and used by BUTTON as well.
• Parameters:

  Parameter:	Description:	Default:
  "name"	name of the icon to display
  class	additional css class for the img tag
  alt		alt attribute
  title	title attribute
  format	format string used to render the icon; known variables to be used in the format string are: $iconPath: url path $iconClass: css class as specified by the class parameter $iconAlt: alt attribute-value; if the alt parameter to JQICON is set, this expands to alt='...' $iconTitle: title attribute-value; if the title parameter to JQICON is set, this expands to title='...'	<img src='$iconPath' class='$iconClass' $iconAlt$iconTitle/>

• Example:

       %JQICON{"tick" alt="alternative content" title="this is a tick icon"}%
       %JQICON{"cross"}%
       %JQICON{"disk"}%
       %JQICON{"star"}%
       %JQICON{"lightbulb"}%
       %JQICON{"camera"}%
       %JQICON{"date"}%
       

  Produces:
• Related: VarJQICONPATH, VarICON, JQueryPlugin, FamFamFamSilkIcons

JQICONPATH{"name"} -- render the urlpath to an image

• This is a shortcut for

  %JQICON{"name" format="$iconPath"}%

• Example: /foswiki/pub/System/FamFamFamSilkIcons/tick.png
• Related: VarJQICON, VarICONURL, JQueryPlugin

JQPLUGINS{"plugins" ... } -- display a summary of available plugins

• Parameters:

  Parameter:	Description:	Default:
  "plugins"	this is a regular expression that the plugin identifier must match to be displayed
  format	format string to render information for each matching plugin; known variables to be used in the format string are: active: state of the plugin: displays (active) when this plugin is loaded on the current page author: author of the plugin documentation: plugin documentation topic defaults to %SYSTEMWEB%.JQuery$name homepage: link to the hompeage of this third party plugin index: the current index in the list of all plugins being displayed name: name of the plugin as can be used in JQREQUIRE summary: short description what this plugin does; most plugins provide this piece of information in the summary section of the documentation topic tags: list of TML macros this plugin implements version: version of the plugin as provided by the author of this plugin	1 <a href="$homepage">$name</a> $active $version $author
  header	header string prepended to the output; empty when no plugin matches
  footer	footer string appended to the output; empty when no plugin matches
  separator	separator put between each plugin rendered in a row	$n
  tagformat	format string to render a link to any tag documentation a plugin implements	[[%SYSTEMWEB%.Var$tag][$tag]]

• Example:

   %JQPLUGINS{
     "treeview|slimbox"
     header="   * JQuery Plugins:$n"
     format="      * [[$documentation][$name]] v$version was developed by [[$homepage][$author]]"
   }%

  Produces:
• JQuery Plugins:
  • Slimbox v2.04 was developed by Christophe Beyls
  • Treeview v1.4 was developed by Joern Zaefferer
• Related: JQueryPlugin

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.
• Parameters:

  Parameter:	Description:	Default:
  "plugin[, plugin, plugin]"	list of plugins to be loaded
  warn	(on/off) allows you to switch off warnings when a plugin was not found	on

• Related: JQueryPlugin, VarJQPLUGINS, VarADDTOZONE

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.
• Parameters:

  Parameter:	Description:	Default:
  "name"	name of theme: JQueryPlugin knows the following themes base, lightness, redmod, smoothness; additional themes maybe created using the themeroller and installed to /foswiki/pub/System/JQueryPlugin/$name	base

• Related: JQueryUI

POPUPWINDOW{"topic" ...} -- opens a topic or url in a new window

• Parameters:

  Parameter:	Description:	Default:
  "topic", topic="topic", topic="web.topic"	Topic to open
  url	URL to open (if topic is not used)
  label	Link label	the topic or the url
  template	View template to call when viewing a topic; not used for URLs	"viewplain"
  width	Width of window	"600"
  height	Height of window	"480"
  toolbar	Show toolbars?	"0"
  scrollbars	Show scrollbars?	"1"
  status	Show status?	"1"
  location	Show location bar?	"0"
  resizable	Is the window resizable?	"1"
  left	Left position	"0"
  top	Top position	"0"
  center	Center the window?	"0"
  menubar	Show menubar?	"0"
  createnew	Create a new window for each popup?	"1"

• Example with topic link:

  %POPUPWINDOW{"JQueryPlugin" label="Open this topic in a new window"}%

  Generates: Open this topic in a new window
• Example with url:

  %POPUPWINDOW{url="http://foswiki.org"}%

  Generates: http://foswiki.org
• Enable POPUPWINDOW by writing %JQREQUIRE{"popupwindow"}% on the page

Available jQuery plugins

1. bgiframe

A jQuery plugin that helps ease the pain when having to deal with IE z-index issues. This plugin is enabled by default.

2. blockUI

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.

3. Button (active)

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.

4. Chili (active)

Chili is the jQuery code highlighter plugin.

Features:

• Very fast highlighting, trivial setup, fully customizable, thoroughly documented, and MIT licensed
• Renders identically on IE, Firefox, Mozilla, Opera, and Safari
• Comes bundled with recipes for C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP, and XHTML
• Many configuration options: Static, Dynamic, Automatic, Manual, Ad-Hoc, with Metaobjects.
• Provides fine control over which elements get highlighted by means of a jQuery selector or the mithical jQuery chainability.
• Fully supports javascript regular expressions, including backreferences
• The replacement format gives full control on what HTML is used for highlighting
• Provides examples which show setups and features

5. Cookie

Easy cookie handling using jQuery.

6. Corner

This plugin adds cross-browser support for rounded corners. For modern browsers the appropriate css attributes are used while there is a fallback strategy for others.

7. Cycle

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.

8. Debug

Simple jQuery logger / debugger using firebug's console or a div of its own of the form. Useful for JavaScript developers.

9. Easing

Uses the built in easing capabilities added In jQuery 1.1 to offer additional "easing" effects.

10. Farbtastic

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.

11. FluidFont

Recompute the font size of an element based on its width.

12. Focus

This plugin sets the focus on a form input field or textarea of a form when the page is loaded.

13. Form

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!

14. Foswiki (active)

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.

Curent default plugins are: jquery.easing, jquery.metadata, jquery.bgiframe, jquery.hoverIntent

15. Gradient

Adds a gradient to the background of an element.

16. Grid

jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the web. Since the grid is a client-side solution loading data dynamically through Ajax callbacks, it can be integrated with any server-side technology, including PHP, ASP, Java Servlets, JSP, ColdFusion, and Perl. See also the jqgrid wiki for up-to-date documentation.

17. hoverIntent

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.

18. ImageTooltip

19. InnerFade

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.

20. JEditable

The JQuery "JEditable" plugin, packaged for use in Foswiki

21. JQTwisty

22. JsonRpc

23. LiveQuery (active)

Live Query utilizes the power of jQuery selectors by firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.

24. Loader

This plugin allows to delay rendering parts of a page that are loaded later on asynchronously and patched into the page.

25. LocalScroll

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.

26. MaskedInput

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.

27. Masonry

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.

28. Media

jQuery Media Plugin for converting elements into rich media content.

Supported Media Players:

• Flash
• Quicktime
• Real Player
• Silverlight
• Windows Media Player
• iframe

Supported Media Formats:
Any types supported by the above players, such as:

• Video: asf, avi, flv, mov, mpg, mpeg, mp4, qt, smil, swf, wmv, 3g2, 3gp
• Audio: aif, aac, au, gsm, mid, midi, mov, mp3, m4a, snd, rm, wav, wma
• Other: bmp, html, pdf, psd, qif, qtif, qti, tif, tiff, xaml

29. Metadata (active)

This plugin is capable of extracting metadata from classes, random attributes, and child elements.

30. Migrate

This plugin can be used to detect and restore APIs, features or functionality that have been deprecated in jQuery and removed as of version 1.9. They include:

• jQuery.browser docs
• jQuery.fn.andSelf() docs
• jQuery.sub() docs
• jQuery.fn.toggle() docs (event click signature only)
• "hover" pseudo-event name docs
• jQuery.fn.error() docs
• ajaxStart, ajaxSend, ajaxSuccess, ajaxError, ajaxComplete, ajaxStop global events on non-document targets docs
• Use of attrChange, attrName, relatedNode, srcElement on the Event object (use Event.originalEvent.attrChange etc. instead)
• jQuery.fn.attr() using the pass argument (undocumented)
• jQuery.attrFn object (undocumented)
• jQuery.fn.data() data events (undocumented)
• jQuery.fn.data("events") to retrieve event-related data (undocumented)

See the warnings page for more information regarding messages the plugin generates.

Use %JQREQUIRE{"migrate"}% to load the plugin into the page.

The plugin can be included with versions of jQuery as old as 1.6.4 as a migration tool to identify potential upgrade issues. However, the plugin is only required for version 1.9 or higher to restore deprecated and removed functionality.

See the Upgrade guide for more information.

31. NatEdit

The NatEdit is an wiki editor that helps in learning the TML Language by providing a GUI. By design, this is not a wysiwyg editor that tries to generate the correct TML in the background. Instead, the user is still in charge of writing correct wiki markup but with a bit more of assistance as a plain browser textarea. Therefor this editor helps to lower the learning curve but will not get in your way once you are aware of wiki markup.

32. Placeholder

Creates a 'hint' or 'example' text in a textfield that disappears when the field has focus or has custom input text.

33. PNotify

Full featured plugin to show temporary floating messages for status updates, actions and errors.

34. PopUpWindow (active)

Open a page in a new window.

35. QueryObject

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.

36. Rating

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.

37. ScrollTo

With this plugin, you will easily scroll overflowed elements, and the screen itself. It gives you access to many different options to customize and various ways to specify where to scroll.

See also JQuerySerialScroll, JQueryLocalScroll

38. SerialScroll

This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses JQueryScrollTo to achieve the scrolling animation.

39. ShrinkUrls

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.

40. SimpleModal

SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog.

Note: please consider using UI::Dialog instead.

41. Slimbox

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.

42. Superfish

Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript). Features:

• 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.
• drop shadows for capable browsers ? degrades gracefully for Internet Explorer 6. Can disable shadows completely via options object.
• 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.

43. Supersubs

This is a companion plugin to superfish. It resizes superfish submenus to fit their contents.

44. Tabpane

This implements an alternative tabpane widget. There is already one in jquery-ui, however as long as jquery-ui is still in flux, this alternative offers a safe substitute well integrated into Foswiki.

Individual tabs can be loaded on demand using a REST call. Installing Foswiki:Extensions/RenderPlugin is recommended for that.

Tabpanes can be nested. Tabs can be extended in height automatically. Heights can be auto-updated to follow windows resize events. Tabpanes can be established as part of reloaded content via ajax.

Note that this widget does not participate in jquery-ui themerolling. It does match JQueryButton in terms of look & feel.

45. TextboxList

Turns a text input into a Facebook like list widget with autocompletion. This plugin adds a new formfield type textboxlist to DataForms.

46. Tmpl

jQuery templates contain markup with binding expressions ('Template tags'). Templates are applied to data objects or arrays, and rendered into the HTML DOM

Documentation for the jQuery Templates plugin can be found on the jQuery documentation site: http://api.jquery.com/category/plugins/templates

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.

For more on the history of this change, see Official Plugins: A Change in the Roadmap and jQuery Templates and JsViews: The Roadmap

47. Tooltip

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.

48. Treeview

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.

Subtrees can be loaded on demand using AJAX. See the Foswiki:Extensions/RenderPlugin how to implement such REST handlers easily.

49. Twisty

50. UI

Widget collection for jQuery. This is the official user interface library.

51. UI::Accordion

52. UI::Autocomplete

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.

53. UI::Button

54. UI::Datepicker

55. UI::Dialog

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

56. UI::Draggable

57. UI::Progressbar

58. UI::Resizable

59. UI::Slider

60. UI::Tabs

61. UI::Tooltip

62. Uploader

63. Validate

Very powerful client-side form validation framework (article).

64. WikiWord

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:

1. /foswiki/pub/System/JQueryPlugin/plugins/form/jquery.form.uncompressed.js
2. /foswiki/pub/System/JQueryPlugin/plugins/form/jquery.form.js
3. /foswiki/pub/System/JQueryPlugin/plugins/form/jquery.form.js.gz

There is a Makefile in the /foswiki/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:

  <FilesMatch ".*\.(js|css)$">
    RewriteEngine On
    RewriteCond %{HTTP:Accept-encoding} gzip
    RewriteCond %{REQUEST_FILENAME}.gz -f
    RewriteRule ^(.*)$ %{REQUEST_URI}.gz [L,QSA]
  </FilesMatch>

  <Files *.js.gz>
    AddEncoding gzip .js
    ForceType application/x-javascript
  </Files>

  <Files *.css.gz>
    AddEncoding gzip .css
    ForceType text/css
  </Files>

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

If you have any problems, or if the extension isn't available in configure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.

For Foswiki versions before 1.1, this plugin requires the Foswiki:Extensions.ZonePlugin to be installed. The ZonePlugin is not required for Foswiki 1.1 or later.

Plugin Info

Maintainer(s):	Michael Daum
Copyright:	2007-2013 Foswiki Contributors http://foswiki.org
License:	GPL
Release:	4.91
Version:	4.91
Change History:
08 Nov 2013:	(4.91) - Release with Foswiki 1.1.9 Item12650: Add config error for removed Themeswitcher plugin
23 Oct 2013:	(4.90) - Item12567: fix checking of version number in configure Item12577: deprecate jquery-tooltip in favour of jquery-ui-tooltip Item12596: improve documentation of jquery-ui Item12583: revert version string to simple float not to break installation on RHEL and SLES Item12599: use jQuery-1.9x (not 2.0.x) for IE9 Item12600: various minor changes to jquery components
12 Oct 2013:	(4.83) - Item12567: fix version check in configure (not released)
07 Jun 2013:	(4.82) - Item12528: fixed char mapping in jquery.wikiword
31 May 2013:	(4.81) - Item12520: added jquery-1.10.1 and jquery-2.0.2
30 May 2013:	(4.80) - Item12519: upgraded superfish, supersubs and hoverintent
29 May 2013:	(4.70) - Item12345: added jquery-1.9.1, jquery-1.10.0, jquery-2.0.0, jquery-2.0.1; removed themeswitcher as it isn't supported and non-functional anymore; upgraded to jquery-ui-1.10.3; upgraded form, rating, masonry, blockui, scrollto; removed warning in configure about chilli
15 Jan 2013:	(4.60) - Item12345: added jquery-1.8.3, upgraded pnotify, masonry, scrollto, form, blockui, cycle
11 Dec 2012:	(4.50) - Item12229: improved transliteration of unicode characters in jquery.wikiword
28 Nov 2012:	(4.45) - Release with Foswiki 1.1.6 Item12192: Fix some layout issues Item12214: default jquery-ui theme overrides manual JQTHEME choice. Item12215: Hide JQLoader using CSS.
26 Oct 2012:	Item12195: Default jquery version is jquery-1.8.2 now
24 Oct 2012:	Item12190: Chili enabled by default, warning demoted to a note.
17 Oct 2012:	(4.44) - Item12048: upgraded to jquery-ui-1.8.23; added jquery-1.8.2
11 Jul 2012:	(4.43) - Item11993: upgraded JQueryLiveQuery to 1.3.1 ; reworked documentation and examples; Item11175: upgrade JQueryValidate to 1.9.0; Item11994: upgraded JQueryUI to 1.8.21
09 Jul 2012:	(4.42) - Item11742: removed all jquery prior to 1.7.1
01 Jun 2012:	(4.42) - Item11917: simplemodal updated to 1.4.2. fixed upstream bug computing dialog heights
23 May 2012:	(4.41) - Item11889: added means to hide the close button on textboxlist values; docu improvements to textboxlixst and pnotify
10 Apr 2012:	(4.40) - Item11397, Item11742: use a JSON instead of <meta> to export preferences to javascript; add jquery-1.7.2 (new default); deprecate all jquery versions prior to 1.7.1 improve docu and integration of scrollto and serialscroll; removed deprecated foswiki.web, foswiki.topic etc properties
06 Apr 2012:	(4.33) - Item11511, Item11512: Minor changes to improve JSON output and Javascript validations. Item11685: deprecate simmplemodal, replace by jquery.ui.dialog. Item11654: JQueryTmpl is discontinued upstream. Item11383: Document jqUIDialogSubmit. Item10383: JQuerySimpleModal sample window isn't displayed properly.
20 Dec 2011:	(4.32) - re-release Foswiki 1.1.4 - Item11335 revert spinner changes, Item11371 - close suggestions list.
12 Dec 2011:	(4.31) - Foswiki 1.1.4 Release. Item11335 JQueryAjaxHelper examples don't work reliably.
22 Nov 2011:	(4.30) added jquery-1.7 and jquery-1.7.1; added jquery.loader to ease loading sections asynchronously
3 Dec 2011:	(4.22) Incremented version for Foswiki 1.1.4 release. Minor code and documentation cleanup.
22 Nov 2011:	(4.21) added config warnings for the deprecated JQuery plugins; and a warining for Chili highlighter corruption; fixed jquery.chili to allow other non-recipe css classes in verbatim sections; fixed jquery.cookie to return undefined instead of an empty Object when asking for an unknown cookie; fixed JQueryAjaxHelper's users backend to return users and groups improved jquery-ui-dialog integration
26 Oct 2011:	fixing compatibility of jquery.media with newer jqueries; fixed placement of jquery.tooltips when viewport at right bottom; fixed jquery.superfish's index related to jquery.ui.dialog's; improved jquery.button click usability; improved and documented integration of jquery.ui.dialog; fixed jquery.ui.resizable to init array objects correctly
08 Sep 2011:	(4.20) added perl api to make ui themes pluggable; upgrade to jquery-ui 1.8.16, masked-input 1.3, masonry 2.0, textboxlist 1.0, validate 1.8.1, cycle 2.9995, bgiframe 2.1.2, blockUI 2.39, corner 2.12, gradient 1.0, autocomplete 1.2.2, form 2.80; upgraded all jquery-ui themes to match the latest version; deprecated abandoned jquery.autocomplete in favor of jquery-ui's autocomplete; added modules ui::accordion, ui::autocomplete, ui::button, ui::datepicker, ui::dialog, ui::draggable, ui::progressbar, ui::resizable, ui::slider, ui::tabs; improved rating formfield to display the actual value as well, not only the stars; added initializer for jquery.validate; improved initializer for simplemodals to make them draggable and resizable; fixed css of treeview, autocomplete, tabpane, button; new foswiki jquery-ui theme; added jquery-1.6.2 and jquery-1.6.3; improved docu of jquery.cycle, jquery.masonry, jquery.validate
20 Jun 2011:	(4.11) Fix "Use of uninitialized" in textboxlist
25 May 2011:	(4.10) Added JQueryPlaceholder; Updated jquery.autocomplete to work around Firefox 4 problem breaking up/down arrow keys in edit fields; Added jquery.tmpl; Updated jquery.metadata to support html5 attributes; Updated jquery.validate to 1.8.0; Added jquery-1.5.[0-2] and jquery-1.6.1; Implemented history support for jquery.tabpane; Updated jquery.media and added more skins to the swf player; Fixed jquery.shake to work with elements positioned relatively; Adding context variables for all enabled jQuery modules;
11 Apr 2011:	(4.03) jQuery default corrected to be 1.4.3. Fixed syntax for accessing meta variables. Improved iterating hash. Updated forms jq plugin from 2.25 to 2.43. Removed useless BOM code from blockUI. Compress using utf8 encoding by default This version is shipping with Foswiki 1.1.3
21 Feb 2011:	(4.02) cleaned up and documented the process for adding new plugins
02 Feb 2011:	(4.01) added pnotify, configure checker to check that configured {JQueryVersion} is sane
13 Dec 2010:	(4.00) adding jquery-1.4.2/3/4 (default is 1.4.3); removing jquery-1.2.6, deprecating jquery-1.3.x (incompatible with shipped jquery-ui); upgraded to jquery-ui 1.8.5 (needs jquery-1.4+); upgraded jquery-cookie; added themeswitcher; fixed spinner in autocomplete; various fixes to jquery.tooltip; improved tooltip themes (added blackbox theme); fixed rating formfield; improved printout of tabpanes; added new jquery-ui theme flickr; update forms plugin to 2.49 to improve jQuery 1.4 compatibility
27 Oct 2010:	(3.75) fixed IE error in chili recipe for TML
19 Oct 2010:	(3.74) Version included with Foswiki 1.1.0 + fix for code bug in SLIMBOX causing ImageGalleryPlugin to fail
19 Aug 2010:	(3.71) JQueryLiveQuery now loads by default; removed JQueryBgiframe and JQueryEasing plugins from default plugins
02 Jul 2010:	(3.70) removed outdated spinner and ifixpng plugins; improved documentation; fixed IE error in treeview; added post method to async mode of treeview; moved %CLEAR to %SYSTEM.DefaultPreferences
28 May 2010:	(3.60) removed pointless TOGGLE module; reworked handling of meta tags by merging foswikilibs.js with jquery.foswiki module; fixed IE7 error with floats inside tabpanes; added ajax handler to query foswiki preferences async-ly
30 Apr 2010:	(3.51) fixed initial classes of click-areas in treeviews
29 Mar 2010:	(3.42) disable plugin when prerequisites are not met
28 Mar 2010:	(3.41) fix ZonePlugin? listed as optional dependency (not optional for Foswiki 1.0.x installations)
26 Mar 2010:	(3.40) externalized grid and fullcalendar modules into plugins of their own; upgraded to jquery-ui 1.7.2; only load i18n support matching the current site language
20 Mar 2010:	(3.31) Minifier CPAN libs removed from plugin. They will be in core CPAN lib in Foswiki 1.1
14 Mar 2010:	(3.30) upgraded validate to v1.7; added wikiword validation method; fixed computation of line-height in fluidfont; fixed height issue in tabpane
03 Mar 2010:	made ZonePlugin an optional dependency
01 Mar 2010:	improved js and css compression using yuicompressor; improved simplemodal integration to foswiki to create modal dialogs with less additional javascript; added custom events to textboxlist: AddValue, DeleteValue , Reset and Clear
12 Feb 2010:	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
08 Feb 2010:	added query-object
28 Jan 2010:	added jquery-1.4.1, corner, fluidfont, fullcalendar, localscroll, masonry, scrollto, serialscroll, slimbox; deprecated jquery.nifty; disabled JQSCRIPT and JQSTYLE
11 Nov 2009:	added jqGrid library; reorganized documentation
07 Nov 2009:	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
20 Aug 2009:	made JQueryPlugin SafeWikiPlugin compatible
02 Jul 2009:	improved parsing of foswiki meta tags in html header; fixed jqTreeview initialisation for jquery-1.3.x; fixed chili initialisation; dropped support for konqueror3
23 Jun 2009:	added jquery.focus, jquery.textboxlist, jquery.farbtastic; jquery.gradient; added color and textboxlist formfield types; made JQueryPlugin pluggable itself; added animation switching tabs; improved automaxexpand feature in tabs
28 Apr 2009:	added jquery.media, jquery.simplemodal, shell highlightning for chilli
03 Feb 2009:	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)
15 Jan 2009:	fixed click target for relative urls in %BUTTON{}%; yet another jquery.wikiword fix
13 Jan 2009:	fixed jquery.wikiword not to depend on outside string libraries; added foswiki alias to global javascript variables (Eugen Mayer)
08 Jan 2009:	certified for foswiki/compat; fixed BUTTON target for non-wikiword topics
12 Dec 2008:	fixed a series of IE6+IE7 issues
18 Nov 2008:	added jquery.ifixpng; improved BUTTON tag to have submit and clear and reset buttons; ie6 fixes for BUTTONs; added missing jquery.wikiword plugin
13 Nov 2008:	added automaxexpand for TABPANES ; added jquery.shake plugin; reworked BUTTON tag
15 Oct 2008:	added jquery.autocomplete, jquery.cycle
20 Jul 2008:	added jquery.form, jquery.maskedinput, jquery.validate
15 Jul 2008:	updated to ui-1.5.2; added async treeview; added async options to tabpane
03 Jul 2008:	updated to ui-1.5.1
05 Jun 2008:	updated to jquery-1.2.6 and ui-1.5-RC1
30 Apr 2008:	repackaged to contain jquery UI
13 Feb 2008:	upgrade to jquery-1.2.3, as well as most plugins
17 Jan 2008:	added jquery.metadata plugin; implemented a jquery.tabpane plugin; updated jquery.dimensions plugin; added jquery.empty plugin to ease development of new plugins
15 Nov 2007:	use skin independent way to add javascript files to header
10 Oct 2007:	upgraded to jQuery-1.1.4; compressed js and css
12 Jul 2007:	initial package containing jQuery-1.1.3.1
Dependencies:	Name Version Description Foswiki::Plugins::ZonePlugin >=3.1 Required. required for Foswiki < 1.1
Home:	Foswiki:Extensions/JQueryPlugin
Support:	Foswiki:Support/JQueryPlugin