Biblioteca de selector de color de JavaScript Tiny-piklor. js

Vista prévia

Descripción

piklor. js es una pequeña biblioteca de JavaScript independiente que le permite seleccionar un color de una paleta de colores y aplicarlo a los elementos dados.

Funcionamiento

Cargue la biblioteca de JavaScript piklor. js en la Página Web.

<script src="js/piklor.js"></script>

Cree el código HTML para el selector de color.

<div class="picker-wrapper">

<button class="btn">Select a color</button>

<div class="color-picker">

</div>
</div>

Habilite el selector de color y aplique el color de selección del usuario a los elementos especificados.

window.addEventListener("load", function () {


var pk = new Piklor(".color-picker", [






"#1abc9c"





, "#2ecc71"





, "#3498db"





, "#9b59b6"





, "#34495e"





, "#16a085"





, "#27ae60"





, "#2980b9"





, "#8e44ad"





, "#2c3e50"





, "#f1c40f"





, "#e67e22"





, "#e74c3c"





, "#ecf0f1"





, "#95a5a6"





, "#f39c12"





, "#d35400"





, "#c0392b"





, "#bdc3c7"





, "#7f8c8d"




], {






open: ".picker-wrapper .btn"




})



, wrapperEl = pk.getElm(".picker-wrapper")



, header = pk.getElm("header")



, footer = pk.getElm("footer")



;



pk.colorChosen(function (col) {




wrapperEl.style.backgroundColor = col;




header.style.backgroundColor = col;




footer.style.backgroundColor = col;


});
});