JQueryFarbtastic < System

You are here: BACCHUS Wiki>System Web>JQueryPlugin>JQueryFarbtastic (revision 1) (raw view)

---+ %TOPIC%
%JQPLUGINS{"farbtastic"
  format="
    Homepage: $homepage <br />
    Author(s): $author <br />
    Version: $version
  "
}%

%STARTSECTION{"summary"}%
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 a =color= formfield for easy integration into Foswiki DataForms.
%ENDSECTION{"summary"}%

---++ Usage

Add the class ==jqFarbtastic== to an input element that you want to attach the color selector to.
The widget can be parametrized using [[JQueryMetadata][metadata]] inside the class attribute.

---++ Color Formfield

With the farbtastic plugin comes a formfield type ==color= that lets you add one or more color formfields to %SYSTEMWEB%.DataForms. Try

| *Name*  | *Type* | *Size* | *Values* | *Tooltip message* | *Attributes* |
| Color1 | color | 10 | | | |
| Color2 | color | 10 | | | |
| Color3 | color | 10 | | | |
| Color4 | color | 10 | | | |

To define a !PaletteForm with 4 colors.

---++ Examples
%JQREQUIRE{"farbtastic"}%

<input type="text" id="color" name="color" value="#123456" class="jqFarbtastic" />

Topic revision: r1 - 12 Feb 2010, ProjectContributor

System

Copyright &© by the contributing authors. All material on this site is the property of the contributing authors.
Ideas, requests, problems regarding BACCHUS Wiki? Send feedback