Question

我目前正在尝试设置颜色选择器的值。我使用这个颜色选择器： http://mjolnic.github.io/bootstrap-colorpicker/

使用jquery：

将colorpicker绑定到html元素

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

它还有一些方法，如：

.setColor(value)

如何获取colorpicker实例以便我可以调用方法？

我尝试了很多东西。首先我是init colorpicker：

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

这很有效。但我似乎无法找到一种方法来调用方法：

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

等等。它必须但非常小：）

Answer 1

从DOM获取colorpicker实例：

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

颜色对象是属性：

cp.color.toRGB();

Answer 2

在bootstrap-colorpicker文档中，您可以这样调用toRGB：

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

Answer 3

我认为你错过了这一行：

颜色对象方法

每个触发事件都有一个由选择器内部使用的颜色对象。这个对象有几个有用的方法。

请看以下示例：

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

因此无法从外部获取。您可以尝试破解（未经测试）

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

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

祝你好运！

Answer 4

试试这个：

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

获取实例调用方法？

4 个答案: