Question

我对其他优秀的插件minicolors有疑问。当我想使用css值'transparent'时，它以两种不同的方式表现出看似对两个对象的看法。它在第一个实例中工作正常，而不是在第二个实例中。有一个原因我不能使用rgba方式使用透明度。我得到minicolors中的colorpicker将无法显示透明度，我想要的就是停止将我的表单字段data_11的值'transparent'转换为hex。

首先我有一个表单字段data_0，我用minicolors初始化（使用INPUTs值设置为透明值='透明'）

$('#data_0').minicolors({
    control: 'hue',
    defaultValue: $('#data_0').val(),
    hide: null,
    hideSpeed: 100,
    inline: false,
    letterCase: 'uppercase',
    opacity: false,
    position: 'default',
    show: null,
    showSpeed: 100,
    swatchPosition: 'left',
    textfield: true,
    theme: 'default',
    changeDelay: '100',
    change: function(hex) {
        //console.log(hex + ' - ' + opacity);
        $('#slide_bg').css('backgroundColor', hex);
        $('#slide_bg').css("background-color", hex);    
    }
});

然后我在代码中有一个data_11，同样的事情，设置为透明，调试显示在我用minicolors初始化它之前它的值是'transparent'。

我像这样初始化它：

$('#data_11').minicolors({
    control: 'hue',
    defaultValue: null,//getDefaultMinicolor( '{{ data11 }}' ),
    hide: null,
    hideSpeed: 100,
    inline: false,
    letterCase: 'uppercase',
    opacity: false,
    position: 'default',
    show: null,
    showSpeed: 100,
    swatchPosition: 'left',
    textfield: true,
    theme: 'default',
    changeDelay: '100',
    change: function(hex) {
        //console.log(hex + ' - ' + opacity);
        $('#preview_title').css('backgroundColor', hex);
        $('#preview_title').css("background-color", hex);    
    }
});

现在调试显示，在我用minicolors初始化data_11之后，它的值不再是'透明'而是'#AAAAEE'，我假设它是某种十六进制等效于字符串'transparent'。

所以我根本不明白他们的表现如何不一样？

defaultValue对任何一个都没有影响。

Answer 1

好的，这就是我解决这个问题的方法。但我仍然不喜欢以这种方式破解我自己的应用程序...如果我的代码中有错误，我将很乐意找到。

$('#data_11').minicolors({
    control: 'hue',
    defaultValue: 'nada',//getDefaultMinicolor( '{{ data11 }}' ),
    hide: null,
    hideSpeed: 100,
    inline: false,
    letterCase: 'uppercase',
    opacity: false,
    position: 'default',
    show: null,
    showSpeed: 100,
    swatchPosition: 'left',
    textfield: true,
    theme: 'default',
    changeDelay: '100',
    change: function(hex) {
        //console.log(hex + ' - ' + opacity);
        $('#preview_title').css('backgroundColor', hex);
        $('#preview_title').css("background-color", hex);    
    }
});
{% if data11 == 'transparent' %}
{# Due to some bug we need to hack the initialization of this colorpicker... strangely we don't need to with the first bg-color-picker (data0) #}
$('#data_11').val('transparent');
{% endif %}

minicolors不使用css-value透明

1 个答案: