JQuery Plugin

Description

This plugin contains the latest version of the jQuery JavaScript library.

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

See the JQueryPluginExamples page for a demo of a couple of widgets used by TWiki.

Included libraries

1. jquery - base jQuery library, loaded when JQueryPlugin is enabled
2. jquery-ui - jQuery UI library, load with %JQSCRIPT{"jquery-ui.js"}% or a %JQTHEME{"..."}% - content:
   • UI Core:
     • Core - the core of jQuery UI, required for all interactions and widgets
     • Widget - the widget factory, base for all widgets
     • Mouse - the mouse widget, a base class for all interactions and widgets with heavy mouse interaction
     • Position - a utility plugin for positioning elements relative to other elements
   • Interactions - adding basic behaviors to any element and are used by many components below
     • Draggable - makes any element on the page draggable
     • Droppable - generated drop targets for draggable elements
     • Resizable - makes any element on the page resizable
     • Selectable - makes a list of elements mouse selectable by dragging a box or clicking on them
     • Sortable - makes a list of items sortable
   • Widgets - full-featured UI Controls - each has a range of options and is fully themeable:
     • Accordion - creates an accordion navigation widget
     • Autocomplete - creates an autocomplete widget
     • Button - creates an button widget
     • Dialog - opens existing markup in a draggable and resizable dialog
     • Slider - a flexible slider with ranges and accessibility via keyboard
     • Tabs - transforms a set of container elements into a tab structure
     • Datepicker - a datepicker than can be toggled from a input or displayed inline
     • Progressbar - a status indicator that can be used for a loading state and standard percentage indicators
   • Effects - a rich effect API and ready to use effects:
     • Effects Core - extends the internal jQuery effects, includes morphing, easing and is required by all other effects
     • Effect "Blind" - blinds the element
     • Effect "Bounce" - bounces an element horizontally or vertically n-times
     • Effect "Clip" - clips the element on and off like an old TV
     • Effect "Drop" - a Drop out effect by moving the element in one direction and hiding it at the same time
     • Effect "Explode" - the element explodes in all directions into n pieces. Also supports imploding again
     • Effect "Fade" - fades the element
     • Effect "Fold" - folds the element first horizontally and then vertically
     • Effect "Highlight" - highlights the background of the element in a defined color for a custom duration
     • Effect "Pulsate" - the element pulsates n times by changing the opacity to zero and back
     • Effect "Scale" - grow or shrink any element and it's content and restore it again
     • Effect "Shake" - shakes the element horizontally or vertically n times
     • Effect "Slide" - the element slides in and out of the viewport
     • Effect "Transfer" - transfer effect from one element to another
3. jquery.bgiframe.js - fix z-index issue in IE 6, loaded when JQueryPlugin is enabled
4. jquery.blockUI.js - simulate synchronous behavior when using AJAX, without locking the browser, loaded when JQueryPlugin is enabled
5. jquery.cookie.js - cookie managers, load with %JQSCRIPT{"jquery.cookie.js"}%
6. jquery.debug.js - debug, load with %JQSCRIPT{"jquery.debug.js"}%
7. jquery.dom.js - loaded when JQueryPlugin is enabled
8. jquery.easing.js - set custom easing types for standard animations, loaded when JQueryPlugin is enabled
9. jquery.hoverIntent.js - delay onMouseOver, loaded when JQueryPlugin is enabled
10. jquery.innerfade.js - loaded when JQueryPlugin is enabled
11. jquery.metadata.js - extract metadata from classes, random attributes, child elements and HTML5 data-* attributes, load with %JQSCRIPT{"jquery.metadata.js"}%
12. jquery.nifty.js - rounded corners, loaded when JQueryPlugin is enabled
13. jquery.shrinkurls.js - shrink URLs, loaded when JQueryPlugin is enabled
14. jquery.spinner.js - spinners, load with %JQSCRIPT{"jquery.spinner.js"}%
15. jquery.superfish.css
16. jquery.superfish.js - pulldown menues, load with %JQSCRIPT{"jquery.superfish.js"}%
17. jquery.tabpane.js - tapped panes, loaded when JQueryPlugin is enabled
18. jquery.tooltip.js - tool tips, loaded when JQueryPlugin is enabled
19. jquery.treeview.async.js - expandable trees, loaded when JQueryPlugin is enabled
20. jquery.treeview.edit.js - expandable trees, load with %JQSCRIPT{"jquery.treeview.edit.js"}%
21. jquery.treeview.sortable.js - expandable trees, load with %JQSCRIPT{"jquery.treeview.sortable.js"}%
22. jquery.treeview.js - expandable trees, loaded when JQueryPlugin is enabled
23. jquery.twiki.js - TWiki specific code, loaded when JQueryPlugin is enabled

JQuery Library Documentation

• Getting the feet wet
• Tutorials
• Reference API
• Using jQuery with other libraries
• Plugin repository

Syntax Rules

• %JQSCRIPT{"jquery.js"}% - include the specified script. Keep in mind that the jquery.js script must be loaded before plug-ins scripts.
• %JQTHEME{"mythemename"}% - include the specified theme. Better load the desired theme before any script.
• %JQIMAGESURLPATH{"myimage.png"}% - expand to the specified image path.
• %JQIMAGESURLPATH%/myimage.png - Same result as the above. Available images:
  • spinner_arrows.gif
  • spinner_big.png
  • spinner.gif
  • spinner.png

Themes

See jQuery Theme Roller for look & feel of available themes. The JQueryPlugin ships with the following themes that can be activated using %JQTHEME{...}%:

• black-tie
• cupertino
• redmond
• smoothness - recommended for TWiki
• ui-lightness

Examples

• PluginTestJQueryPlugin
• JQueryPluginExamples

Known Issues

• jquery.tooltip does not work in JQueryPlugin release 1.2 (2011-03-01)
• jquery.treeview does not work in JQueryPlugin release 1.2 (2011-03-01)

Note to Plugin Maintainer

• See pub/TWiki/JQueryPlugin/readme.txt

Installation Instructions

• Download the ZIP file from the Plugin web (see below)
• Unzip JQueryPlugin.zip in your twiki installation directory. Content:

  File:	Description:
  data/Sandbox/JQueryPluginExamples.txt	Example topic
  data/Sandbox/PluginTestJQueryPlugin.txt	Test topic
  data/TWiki/JQueryPlugin.txt	Plugin documentation topic
  data/TWiki/VarJQ*.txt	Variable documentation topics
  lib/CPAN/lib/CSS/Minifier.pm	Perl module
  lib/CPAN/lib/JavaScript/Minifier.pm	Perl module
  lib/TWiki/Plugins/JQueryPlugin.pm	Perl module
  lib/TWiki/Plugins/JQueryPlugin/Core.pm	Perl module
  pub/TWiki/JQueryPlugin/Makefile	Makefile
  pub/TWiki/JQueryPlugin/jquery-all.css	Main stylesheet file
  pub/TWiki/JQueryPlugin/jquery-all.js	Main Javascript file
  pub/TWiki/JQueryPlugin/jquery-all.js.gz	Main Javascript file, compressed
  pub/TWiki/JQueryPlugin/*.css	Stylesheet files
  pub/TWiki/JQueryPlugin/*.js	Javascript files
  pub/TWiki/JQueryPlugin/*.gif and .png	Image files
  pub/TWiki/JQueryPlugin/i18n/*.js	Style sheets for internationalization
  pub/TWiki/JQueryPlugin/images/*.gif and *.png	Image library
  pub/TWiki/JQueryPlugin/themes/*	Themes
  tools/minifycss	Utility
  tools/minifyjs	Utility

• Visit configure in your TWiki installation, and enable the plugin in the {Plugins} section.
• Test Sandbox.JQueryPluginExamples for functionality.

Plugin Info

Related topics: VarJQTABPANE, VarJQTAB, VarJQENDTAB, VarJQENDTABPANE, PluginTestJQueryPlugin, JQueryPluginExamples, TWikiPlugins, DeveloperDocumentationCategory, AdminDocumentationCategory