JQuery Button

Homepage: http://foswiki.org/Extensions/JQueryPlugin
Author(s): Michael Daum
Version: 1.3

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. Fam Fam Fam Contrib is recommended to display nice icons on buttons. Note, that this widget does not participate on the jquery theme roller. This is independent.

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 Var JQICON
  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"}%"
      click="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: JQuery Button

Examples

OK Cancel Info Add Delete Globe