JQuery UI-based color selector ColorPicker User Manual

Usage

A, load jquery (v1.7 or greater), jquery UI (v1.8 or greater), and the plugin:

<script src= "Https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script src= "Https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
<script src= "Js/evol.colorpicker.min.js" type= "Text/javascript" charset= "Utf-8" ></script>
The widget requires a jQuery UI theme to is present, as as is as it own included base CSS file (EVOL.COLORPICKER.CSS). Here we use the "ui-lightness" theme as a example:

<link rel= "stylesheet" type= text/css "href=" http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/ Ui-lightness/jquery-ui.css ">
<link href= "Css/evol.colorpicker.css" rel= "stylesheet" type= "Text/css" >
Now, let's attach it to a existing <input> tag:

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#mycolor"). ColorPicker ();
});
</script>

<input style= "width:100px" id= "MyColor"/>
This would wrap it into a "holder" <div> and add another <div> beside it for the color box:

<div style= "WIDTH:128PX;" >
<input style= "width:100px" id= "MyColor" class= "ColorPicker evo-cp0"/>
<div class= "Evo-colorind" style= "Background-color: #8db3e2" ></div>
</div>
Using the same syntax, the widget can also is instanciated on a <div> or a <span> tag to show inline. In this case the generated HTML are the full palette.

theming

Evol.colorpicker is as easily themeable as any jQuery UI widget, using one of the jquery UI themes or your own custom them E made with Themeroller.

Options

Evol.colorpicker provides several options to customize its behaviour:

Color (String)

Used to set the color value.

$ ("#mycolor"). ColorPicker ({
Color: "#ffffff"
});
Defaults to null.

Defaultpalette (String)

Used to set the default color palette. Possible values are "theme" or "Web".

$ ("#mycolor"). ColorPicker ({
Defaultpalette: ' Web '
});
Defaults to theme.

Displayindicator (Boolean)

Used to show color value on hover and click inside the palette.

$ ("#mycolor"). ColorPicker ({
Displayindicator:false
});
Defaults to True.

Hidebutton (Boolean)

When binding the ColorPicker to a textbox, a colored button would be added to the right of the textbox unless Hidebutton is Set to True. This option Doens ' t have any effect if the ColorPicker are bound to a DIV.

$ ("#mycolor"). ColorPicker ({
Hidebutton:true
});
Defaults to False.

History (Boolean)

Used to track selection history (shared among all instances of the ColorPicker). The history keeps the last colors selections.

$ ("#mycolor"). ColorPicker ({
History:false
});
Defaults to True.

Initialhistory (Array strings)

Used to provide a color selection history. Colors are provided as strings of hexadecimal color values.

$ ("#mycolor"). ColorPicker ({
Initialhistory: ["#ff0000", "#00ff00", "#0000ff"]
});
Defaults to NULL.

Showon (String)

Have the ColorPicker appear automatically the field receives focus (' focus '), appear only when a button is clicked (" Button "), or appear when either event takes place (" both "). This option only takes effect when the color picker was instanciated on a textbox.

$ ("#mycolor"). ColorPicker ({
Showon: "button"
});
Defaults to "both".

Strings (String)

Used to translate the widget. It is a coma separated list of all labels used the UI.

$ ("#mycolor"). ColorPicker ({
Strings: "Couleurs de themes,couleurs de base,plus de couleurs,moins de couleurs,palette,historique,pas encore d ' Historiq UE. "
});
Defaults to "Theme colors,standard colors,web colors,theme colors,back to Palette,history,no History.".

TransparentColor (Boolean)

Allow for selection of the "Transparent Color". The hexadecimal value for the transparent color is "#0000ffff".

$ ("#mycolor"). ColorPicker ({
Transparentcolor:true
});
Defaults to False.

Methods

Clear ()

Clears the color value (and close the popup palette if opened).

$ ("#mycolor"). ColorPicker ("clear");
Enable ()

Get the currently selected color value (returned as a string).

$ ("#mycolor"). ColorPicker ("Enable");
Disable ()

Get the currently selected color value (returned as a string).

$ ("#mycolor"). ColorPicker ("Disable");
Isdisabled ()

Get the currently selected color value (returned as a string).

$ ("#mycolor"). ColorPicker ("isdisabled");
Val ([color])

Get or set the currently selected color value (as a string, ie. "#d0d0d0 ″).

var ColorValue = $ ("#mycolor"). ColorPicker ("Val");

$ ("#mycolor"). ColorPicker ("Val", "#d0d0d0");
Showpalette ()

Show the palette (when using the widget as a popup).

$ ("#mycolor"). ColorPicker ("Showpalette");
Hidepalette ()

Hide the palette (when using the widget as a popup).

$ ("#mycolor"). ColorPicker ("Hidepalette");
Events

Change.color

This event was triggered when a color is selected.

$ ("#mycolor"). On ("Change.color", function (event, color) {
$ (' #title '). CSS (' background-color ', color);
});
Mouseover.color

This event was triggered when the "mouse moves over" a color box on the palette.

$ ("#mycolor"). On ("Mouseover.color", function (event, color) {
$ (' #title '). CSS (' background-color ', color);
});
Browser Support

Evol.colorpicker.js has been tested for the following browsers:

Internet Explorer 7+
Firefox 9+
Chrome 21+
Safari 5+