JQuery Plugin

Page contents

• Description
• Included libraries
• JQuery Library Documentation
• Syntax Rules
• Themes
• Examples
• Known Issues
• Note to Plugin Maintainer
• Installation Instructions
• Specifying where to insert JavaScript and CSS loadling lines
• Plugin Info

jQuery JavaScript library for TWiki

Description

This plugin packages the popular jQuery and jQuery UI JavaScript libraries.

• jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
  • Packaged version: jquery-1.10.2

• jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
  • Packaged version: jquery-ui-1.10.3

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.treeview does not work in JQueryPlugin version 2013-08-23

Note to Plugin Maintainer

• See pub/TWiki/JQueryPlugin/readme.txt

Installation Instructions

This plugin is pre-installed. TWiki administrators can upgrade the plugin as needed on the TWiki server.

Specifying where to insert JavaScript and CSS loadling lines

This plugin inserts lines to load JavaScript and CSS files into the rendered HTML. By default, those lines are inserted at the beginning of the <head> tag content. That's fine for the skins bundled with TWiki releases. But you may want to specify where to insert those lines. In that case:

1. Put <!-- JQueryPlugin placeholder --> at the place you want to have those lines
2. Set $TWiki::cfg{Plugins}{JQueryPlugin}{CheckPlaceholder} to "1" (or any other true value)

Plugin Info

Plugin Author:	TWiki:Main.MichaelDaum, TWiki:Main.PeterThoeny
Copyright:	© 2007-2008 Michael Daum http://michaeldaumconsulting.com © 2008-2018 TWiki:TWiki.TWikiContributor
License:	GPL (GNU General Public License)
Plugin Version:	2018-07-05

Dependencies:	None
Plugin Home:	http://twiki.org/cgi-bin/view/Plugins/JQueryPlugin
Feedback:	http://twiki.org/cgi-bin/view/Plugins/JQueryPluginDev
Appraisal:	http://twiki.org/cgi-bin/view/Plugins/JQueryPluginAppraisal

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