 |
|
|
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
JQueryPluginjQuery 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."See the JQueryPluginExamples page for a demo of a couple of widgets used by Foswiki. Installed Plugins1. Autocomplete (active)Homepage: http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/Author(s): Dylan Verheul, Dan G. Switzer, Anjesh Tuladhar, Joern Zaefferer Version: 1.1pre Autocomplete an input field to enable users quickly finding and selecting some value, leveraging searching and filtering. By giving an autocompleted field focus or entering something into it, the plugin starts searching for matching entries and displays a list of values to choose from. By entering more characters, the user can filter down the list to better matches. This can be used to enter previous selected values, eg. for tags, to complete an address, eg. enter a city name and get the zip code, or maybe enter email addresses from an addressbook. See also JQueryjaxHelper for examples on how to integrate autocompletion into Foswiki.2. bgiframe (active)Homepage: http://brandonaaron.netAuthor(s): Brandon Aaron Version: 2.1.1 A jQuery plugin that helps ease the pain when having to deal with IE z-index issues. This plugin is enabled by default. 3. blockUIHomepage: http://malsup.com/jquery/block/Author(s): M. Alsup Version: 2.18 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. 4. ButtonHomepage: http://foswiki.org/Extensions/JQueryPluginAuthor(s): Michael Daum Version: 1.1 Tags: BUTTON? 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. System.FamFamFamContrib is recommended to display nice icons on buttons. Note, that this widget does not participate on the jquery theme roller. This is independent. 5. ChiliHomepage: http://noteslog.com/chili/Author(s): Andrea Ercolino Version: 2.2 Chili is the jQuery code highlighter plugin. Features:
6. CookieHomepage: http://www.stilbuero.de/2006/09/17/cookie-plugin-for-jqueryAuthor(s): Klaus Hartl Version: 20070917 Easy cookie handling using jQuery. 7. CornerHomepage: http://jquery.malsup.com/cornerAuthor(s): Dave Methvin, Mike Alsup Version: 2.02 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. 8. CycleHomepage: http://www.malsup.com/jquery/cycleAuthor(s): M. Alsup Version: 2.65 The jQuery Cycle Plugin is a lightweight slideshow plugin. Its implementation is based on the System.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. 9. Easing (active)Homepage: http://gsgd.co.uk/sandbox/jquery/easingAuthor(s): George McGinley Smith Version: 1.3 Uses the built in easing capabilities added In jQuery 1.1 to offer multiple "easing" effects. 10. FarbtasticHomepage: http://acko.net/dev/farbtasticAuthor(s): Steven Wittens Version: 1.2 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 acolor formfield for easy integration into Foswiki DataForms.
11. FluidFontHomepage: http://foswiki.org/Extensions/JQueryPluginAuthor(s): Michael Daum Version: 1.0 Recompute the font size of an element based on its width. 12. FocusHomepage: http://michaeldaumconsulting.comAuthor(s): Michael Daum Version: 1.0 This plugin sets the focus on a form input field or textarea of a form when the page is loaded. 13. FormHomepage: http://malsup.com/jquery/formAuthor(s): M. Alsup Version: 2.25 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)Homepage: http://foswiki.org/Extensions/JQueryPluginAuthor(s): Michael Daum Version: 2.00 Tags: JQICON?, JQICONPATH?, JQPLUGINS?, JQREQUIRE?, JQTHEME? 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 %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. FullCalendarHomepage: http://arshaw.com/fullcalendar/Author(s): Adam Shaw Version: 1.4.3 !FullCalendar is a jQuery plugin that provides a full-sized, drag & drop calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and is easily configured to use your own feed format (an extension is provided for Google Calendar). It is visually customizable and exposes hooks for user-triggered events (like clicking or dragging an event). 16. GradientHomepage: http://brandonaaron.netAuthor(s): Brandon Aaron Last Version: 1.0.1-pre Adds a gradient to the background of an element. 17. GridHomepage: http://www.trirand.com/blog/Author(s): Tony Tomov Version: 3.6.3 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. For more read the jqgriddocs. 18. hoverIntent (active)Homepage: http://cherne.net/brian/resources/jquery.hoverIntent.htmAuthor(s): Brian Cherne Version: r5 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. 19. ImageTooltip (active)Homepage: http://foswiki.org/Extensions/ImagePluginAuthor(s): Michael Daum Version: 1.0 20. InnerFadeHomepage: http://medienfreunde.com/lab/innerfadeAuthor(s): Torsten Baldes Version: 20080214 !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. 21. LiveQuery (active)Homepage: http://docs.jquery.com/Plugins/livequeryAuthor(s): Brandon Aaron Version: 1.0.3 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. 22. MaskedInputHomepage: http://digitalbush.com/projects/masked-input-pluginAuthor(s): Josh Bush Version: 1.2.2 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. 23. MasonryHomepage: http://desandro.com/resources/jquery-masonryAuthor(s): David DeSandro Version: 1.0.0 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. 24. MediaHomepage: http://malsup.com/jquery/mediaAuthor(s): M. Alsup Version: 0.89 jQuery Media Plugin for converting elements into rich media content. Supported Media Players:
Any types supported by the above players, such as:
25. Metadata (active)Homepage: http://plugins.jquery.com/project/metadataAuthor(s): John Resig, Yehuda Katz, Joern Zaefferer, Paul McLanahan Version: 3630 This plugin is capable of extracting metadata from classes, random attributes, and child elements. 26. NatEditHomepage: http://foswiki.org/Extensions/NatEditPluginAuthor(s): Michael Daum Version: 1.0 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. 27. NiftyHomepage: http://...Author(s): Paul Bakaus, Alessandro Fulciniti Version: 2.0 DEPRECATED Nifty for jQuery is a modified and optimized version of Nifty Corners Cube. The new one has been programmed by Paul Bakaus (paul.bakaus@gmail.com). Nifty Corners Cube - rounded corners with CSS and Javascript Copyright 2006 Alessandro Fulciniti (a.fulciniti@html.it)28. QueryObjectHomepage: http://plugins.jquery.com/project/query-objectAuthor(s): Blair Mitchelmore Version: 2.1.7 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. 29. RatingHomepage: http://www.fyneworks.com/jquery/star-rating/Author(s): Diego A. (Fyneworks.com) Version: 3.12 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.30. ShakeHomepage: http://www.zeroedandnoughted.com/index.php/2008/05/01/jquery-plugin-to-emulate-shake-on-login-failure-in-osx-login-box/Author(s): Antony Kennedy Version: 20080501 jQuery plugin to emulate “shake” on login failure in OSX login box. 31. ShrinkUrlsHomepage: http://michaeldaumconsulting.comAuthor(s): Michael Daum Version: 1.2 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. 32. SimpleModalHomepage: http://www.ericmmartin.com/projects/simplemodalAuthor(s): Eric Martin Version: 1.2.3 !SimpleModal is a lightweight jQuery plugin that provides a simple interface to create a modal dialog. 33. SlimboxHomepage: http://code.google.com/p/slimbox/Author(s): Christophe Beyls Version: 2.03 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. Superfish (active)Homepage: http://users.tpg.com.au/j_birch/plugins/superfish/Author(s): Joel Birch Version: 1.4.8 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:
35. Supersubs (active)Homepage: http://users.tpg.com.au/j_birch/plugins/superfish/#sample5Author(s): Joel Birch Version: 0.2b This is a companion plugin to superfish. It resizes superfish submenus to fit their contents. 36. TabpaneHomepage: http://michaeldaumconsutling.comAuthor(s): Michael Daum Version: 1.1 Tags: ENDTAB?, ENDTABPANE?, TAB?, TABPABNE? 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 System.JQueryButton in terms of look & feel.37. TextboxListHomepage: http://foswiki.org/Extensions/JQueryPluginAuthor(s): Michael Daum Version: 0.2 Turns a text input into a Facebook like list widget with autocompletion.
This plugin adds a new formfield type 38. ToggleHomepage: http://michaeldaumconsulting.comAuthor(s): Michael Daum Version: 0.6 Tags: TOGGLE? This is a lightweigted widget to add a toggle feature similar to the TwistyPlugin?. It uses the means available in jQuery only, i.e. it selectors to toggle the display of all matching elements. 39. Tooltip (active)Homepage: http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/Author(s): Joern Zaefferer Version: 1.3 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 40. TreeviewHomepage: http://bassistance.de/jquery-plugins/jquery-plugin-treeviewAuthor(s): Joern Zaefferer Version: 1.4 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.41. UIHomepage: http://docs.jquery.com/UIAuthor(s): see http://jqueryui.com/about Version: 1.7.2 Widget collection for jQuery. This is the official userinterface library. 42. ValidateHomepage: http://bassistance.de/jquery-plugins/jquery-plugin-validationAuthor(s): Joern Zaefferer Version: 1.5.2 Very powerful client-side form validation framework (article). 43. WikiWordHomepage: http://michaeldaumconsulting.comAuthor(s): Michael Daum Version: 1.1 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. ThemesThe following themes are provided:
ExamplesChili Syntax Highlightingjquery.chili: client side syntax highlighting has been added to the JQueryPlugin. To enable chili add%JQREQUIRE{"chili"}%
somewhere on the page, or add it to the default jQuery plugins in configure.
Syntax can be highlighted using the <verbatim> tag and the class attribute:
<verbatim class="html">
<html>
<head>
<title>Hello World</title>
</head>
<body>
<font size="24px">Hello World</font>
</body>
</html>
</verbatim>
Available class attributes:
Passing parameters from perl to javascriptAmong other things the jquery.foswiki plugin reads<meta name="foswiki..." content="..."> tags
in the html header and store these properties into the foswiki javascript object.
When a parameter is called foswiki.MyPlugin.parameter will create a sub-object under foswiki and store
the parameter there. This works recursively so that even a foswiki.My.New.Plugin.parameter will work out and create the appropriate nesting.
If content is "false" or "true" these will be converted to proper Boolean.
If content starts with function( a method of that name will be created inside the foswiki object.
Further references and tutorialsUsing 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.autocomplete comes with the following set:
/pub/System/JQueryPlugin root directory that grants 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 needed. Enable the {JQueryPlugin}{Debug} flag in configure,
to use the uncompressed files right away to omit the make step during development of further 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 does exist
in the filesystem, then trigger an internal redirect while still enforcing the original mine-type.
The browser on the other 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 Roadmapfor v2.1:
Plugin Info
DBCachePlugin: JQueryPlugin not found
|
Create New Topic
Index
Alternative Search
Notifications
RSS Feed
Wiki Help
Wiki News
Changes in all Webs
System Web
Installed Plugins
Statistics
Preferences
Copyright © by the contributing authors. All material on this collaboration platform is the property of the contributing authors. Ideas, requests, problems regarding Wiki? Send feedback