|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
JQueryPluginjQuery JavaScript library for FoswikiOn this page:
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."
Adding new pluginsThe 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 JavascriptWhether writing your own plugins or writing Javascript code in topics, you should observe the Foswiki JQueryCodingStandards.jQuery References and tutorials
MacrosBUTTON{"text" ...} -- renders a nice button
TABPANE{...} -- tabpane widget
ENDTABPANE -- ending tag for tabpane widget
TAB{"text" ...} -- tab inside a tabpane widget
ENDTAB -- ending marker for a tab of a tabpane
JQICON{"name" ...} -- render an image
JQICONPATH{"name"} -- render the urlpath to an image
JQPLUGINS{"plugins" ... } -- display a summary of available plugins
JQREQUIRE{"plugin, plugin, ... "} -- enable a plugin on the current page
JQTHEME{"name" ...} -- switch jQuery UI theme
POPUPWINDOW{"topic" ...} -- opens a topic or url in a new window
Available jQuery plugins1. bgiframeA jQuery plugin that helps ease the pain when having to deal with IE z-index issues. This plugin is enabled by default.2. blockUIThe 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. CookieEasy cookie handling using jQuery.5. CornerThis 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.6. CycleThe 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.7. DebugSimple jQuery logger / debugger using firebug's console or a div of its own of the form. Useful for JavaScript developers.8. EasingUses the built in easing capabilities added In jQuery 1.1 to offer additional "easing" effects.9. FarbtasticFarbtastic 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 acolor formfield for easy integration into Foswiki DataForms.
10. FluidFontRecompute the font size of an element based on its width.11. FocusThis plugin sets the focus on a form input field or textarea of a form when the page is loaded.12. FormThe 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!13. 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 thefoswiki 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
14. GradientAdds a gradient to the background of an element.15. hoverIntenthoverIntent 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.16. InnerFadeInnerFade 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.17. LiveQuery (active)Live Query utilizes the power of jQuery selectors by binding events or firing callbacks for matched elements auto-magically, even after the page has been loaded and the DOM updated.18. LoaderThis plugin allows to delay rendering parts of a page that are loaded later on asynchronously and patched into the page.19. LocalScrollThis 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.20. MaskedInputThis 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.21. MasonryMasonry 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.22. MediajQuery Media Plugin for converting elements into rich media content. Supported Media Players:
Any types supported by the above players, such as:
23. Metadata (active)This plugin is capable of extracting metadata from classes, random attributes, and child elements.24. PlaceholderCreates a 'hint' or 'example' text in a textfield that disappears when the field has focus or has custom input text.25. PNotifyFull featured plugin to show temporary floating messages for status updates, actions and errors.26. PopUpWindow (active)Open a page in a new window.27. QueryObjectThis 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.28. RatingThe 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.29. ScrollToWith 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, JQueryLocalScroll30. SerialScrollThis plugin allows you to easily animate any series of elements, by sequentially scrolling them. It uses JQueryScrollTo to achieve the scrolling animation.31. ShrinkUrlsShrinks 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.32. SimpleModalSimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. Note: please consider using UI::Dialog instead.33. SlimboxShow 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.34. SuperfishSuperfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript). Features:
35. SupersubsThis is a companion plugin to superfish. It resizes superfish submenus to fit their contents.36. TabpaneThis 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.37. TextboxListTurns a text input into a Facebook like list widget with autocompletion. This plugin adds a new formfield typetextboxlist to DataForms.
38. Themeswitcher39. TmpljQuery 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 Roadmap40. TooltipDisplay a customized tooltip instead of the default one for every selected element. Tooltips can be added automatically to any element that has got attitle 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.
41. TreeviewLightweight 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.42. Twisty43. UIWidget collection for jQuery. This is the official user interface library.44. UI::Accordion45. UI::AutocompleteAutocomplete, 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::Button47. UI::Datepicker48. UI::DialogA 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::Draggable50. UI::Progressbar51. UI::Resizable52. UI::Slider53. UI::Tabs54. ValidateVery powerful client-side form validation framework (article).55. WikiWordThis 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 filesAll 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:
/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:
<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 InstructionsYou 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 inconfigure, then you can still install manually from the command-line. See http://foswiki.org/Support/ManuallyInstallingExtensions for more help.
Plugin Info
r1 - 28 Sep 2011 - 10:37:25 - ProjectContributor
 Copyright © by the contributing authors. All material on this site is the property of the contributing authors. Ideas, requests, problems regarding Wiki? Send feedback |
For Foswiki versions before 1.1, this plugin requires the