Impossible de définir la valeur rgba dans bootstrap colorpicker

Question

J'utilise le colorpicker bootstrap (voir https://itsjavi.com/bootstrap-colorpicker), et cela fonctionne très bien, sauf pour une chose: Avoir jQuery changer la valeur en quelque chose qui inclut la transparence.

J'ai fait une jsFiddle qui reproduit le problème http://jsfiddle.net/gwonha3L:

Html:

<div class="main"> 
    <div class="color input-group colorpicker-component"> 
    <input type="text" class="form-control" /> 
    <span class="input-group-addon"><i></i></span> 
    </div> 

    <input id="updatecolorbtn" type="button" value="Set color to rgba(255,0,0,0.5)" class="form-control" /> 

    <div id="colordiv" style="width: 100px; height: 100px; background-color: lightblue;"></div> 
</div> 

Javascript:

$(function() { 
    $('.color').colorpicker().on('changeColor', function(ev) { 
    $('#colordiv').css('background-color', $('.color').colorpicker('getValue')); 
    }); 
}); 

$("#updatecolorbtn").click(function() { 
    $('.color').colorpicker('setValue', 'rgba(255,0,0,0.5)'); 
}); 

que vous attendez que cliquer sur le bouton changerait la couleur rouge 50% de transparence, mais à la place c'est juste rouge (# ff0000). Si j'utilise le colorpicker lui-même, la transparence est parfaite.

Est-ce que je fais quelque chose de mal?

Answer 1

Vous devez insérer le format RGBA

$(function() { 
    $('.color').colorpicker({format: 'rgba'}).on('changeColor', function(ev) { 
    $('#colordiv').css('background-color', $('.color').colorpicker('getValue')); 
    }); 
}); 

$("#updatecolorbtn").click(function() { 
    $('.color').colorpicker('setValue', 'rgba(255,0,0,0.5)'); 
}); 

http://jsfiddle.net/gwonha3L/1/