1

優れたプラグイン minicolors に問題があります。css-value 'transparent' を使用したい場合、2 つのオブジェクトを一見同一に扱うために 2 つの異なる方法で動作します。最初のインスタンスでは正常に機能しますが、2 番目のインスタンスでは機能しません。透過性を使用する rgba 方式を使用できないのには理由があります。minicolors のカラーピッカーが透明度を表示できないことがわかりました。必要なのは、フォーム フィールド data_11 の値「透明」を 16 進数に変換するのをやめることだけです。

最初に、ミニカラーで初期化するフォーム フィールド data_0 があります (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);    
    }
});

次に、コードの少し下に data_11 があり、同じことが透明に設定されています。デバッグは、ミニカラーで初期化する前に、値が「透明」であることを示しています。

次のように初期化します。

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

デバッグは、data_11 を minicolors で初期化した後、その値が「透明」ではなく、文字列「透明」に相当する 16 進数であると仮定する「#AAAAEE」であることを示しています。

だから私はまったく理解できません。なぜ彼らは同じように振る舞わないのですか?

defaultValue はどちらにも影響しません。

4

1 に答える 1