获取实例调用方法？

Question

I'm currently trying to set the value of a colorpicker. I'm using this color picker: http://mjolnic.github.io/bootstrap-colorpicker/

The colorpicker is bound to a html element with jquery:

$('.sample-selector').colorpicker({ /*options...*/ });

It also has a few methods like:

.setColor(value)

How can i get the colorpicker instance so i can call a method?

I tried a lot of things. First i init colorpicker:

$('#thecolor').colorpicker();

This works. But i can't seem to find a way to call a method:

$('#thecolor').colorpicker.toRGB()
$('#thecolor').toRGB()
$('#thecolor').colorpicker().toRGB()

and so on. It must but something really small :)

Answer 1

To get the colorpicker instance from the DOM:

var cp = $('#thecolor').data().colorpicker;

The color object is a property:

cp.color.toRGB();

Answer 2

From the bootstrap-colorpicker doc, you can call toRGB like this:

$('#thecolor').colorpicker().on('changeColor', function(ev){
    console.log(ev.color.toRGB());
});

Answer 3

I think you've missed this line:

Color object methods

Each triggered events have a color object used internally by the picker. This object has several useful methods.

Look at the following example:

$('.my-colorpicker-control').colorpicker().on('changeColor', function(ev){
    bodyStyle.backgroundColor = ev.color.toHex();
});

So it's not available from the outside. You can try to hack around that (not tested)

$('.my-colorpicker-control').colorpicker().on('create', function(ev) {
    window.mycolorpicker = ev.color;
});

if (window.mycolorpicker) {
    window.mycolorpicker.setColor('...');
}

Good luck!

Answer 4

Try this:

var colorPicker = $("#thecolor").colorpicker();
$(colorPicker).toRGB(); // object method