優れたプラグイン 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 はどちらにも影響しません。