$("#container").wColorPicker([options]);
Websanova Color Picker
A simple jQuery Color Picker plugin that comes in flat, hover and click modes including slide and fade effects out of the box. Also comes with a variety of themes that can be set to adjust the look of the palette.Usage:
Options:
Specify the color of the color picker. To add more styles just follow the format in the css file and you can call the color you like as long as the keyword exists there. $("#container").wColorPicker({color: "red"}); default: "black" values: "red", "green", "blue", "white", "black", "cream", "yellow", "orange", "plum" or custom |
|
Specify background opacity of color picker. $("#container").wColorPicker({opacity: 0.6}); default: 0.8 values: 0 to 1 |
|
Initial color to set the color picker to. $("#container").wColorPicker({initColor: "#FF00FF""}); default: "#FF0000" values: <hex color> |
|
Function to run when mouse hovers over a color in the palette. $("#container").wColorPicker(onMouseover: function(e){}); default: null values: function(color){} |
|
Function to run when mouse hovers out of a color in the palette. $("#container").wColorPicker(onMouseout: function(color){}); default: null values: function(color){} |
|
Function to run when a color in the palette is selected. $("#container").wColorPicker(onSelect: function(color){}); default: null values: function(color){} |
|
In flat mode color picker will be inserted into container. In any other mode a button to initiate the color picker is created and is opened with the specified event. $("#container").wColorPicker({mode: "hover"}); default: "flat" values: "flat", "hover", "click" |
|
Only used when mode is not flat. Size of the button created to trigger the color picker. $("#container").wColorPicker({buttonSize: 5}); default: 20 values: <integer> |
|
Only used when mode is not flat. Specify the effect to use when displaying the color picker. $("#container").wColorPicker({effect: "fade"}); default: "slide" values: "none", "slide", "fade" |
|
Only used when mode is not flat. Specify the length in milliseconds that the effect takes to display the color picker. $("#container").wColorPicker({showSpeed: 300}); default: 500 values: <integer> |
|
Only used when mode is not flat. Specify the length in milliseconds that the effect takes to hide the color picker. $("#container").wColorPicker({hideSpeed: 350}); default: 500 values: <integer> |
