1

I have a problem with the otherwise excellent plugin minicolors. When I want to use the css-value 'transparent' it behaves in two different ways for seemingly identic treatment of two objects. It works fine in the first instance, and not in the second. There is a reason I can't use the rgba-way of using transparency. I get that the colorpicker in minicolors won't be able to display the transparency, all I want for it is to stop converting my form field data_11's value 'transparent' to hex.

First I have a form field data_0 that I initialize with minicolors (it is set to transparent using INPUTs value='transparent')

$('#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);    
    }
});

Then I have a data_11 a little further down the code, same thing, set to transparent, and debug shows that before I initialize it with minicolors it has the value 'transparent'.

I initialize it like this:

$('#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);    
    }
});

Now debug shows that after I initialized data_11 with minicolors, it's value is no longer 'transparent' but rather '#AAAAEE' which I assume is somehow the hex equivalent to the string 'transparent'.

So I don't understand, at all, how they don't behave the same?

The defaultValue has no effect on either one.

4

1 回答 1

0

好的，这就是我解决问题的方法。但我仍然不喜欢以这种方式破解我自己的应用程序......如果错误出在我的代码中，我会很高兴发现。

$('#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 %}
于 2013-11-08T23:01:23.370 回答