El espectro es la distribución de colores que se produce cuando un prisma dispersa la luz. Usando el espectro, uno puede seleccionar fácilmente el color requerido del cuadro de diálogo. Spectrum se puede usar haciendo clic y arrastrando el cursor dentro del área del selector para resaltar el color. En un campo de desarrollo, ya que juega un papel vital y facilita la elección del color con una amplia gama del espectro.
Spectrum proporciona un atributo llamado showAlpha que se usa para obtener transparencia en el color. showAlpha es un atributo del complemento Query Spectrum que se puede configurar como verdadero para obtener transparencia en el color; de lo contrario, se puede configurar como falso para evitar la transparencia.
Sintaxis:
$("#colorpicker").spectrum({
showAlpha: boolean
});
Enfoque: Para construir el selector de color de espectro, tenemos que seguir ciertos puntos:
- Agregue los archivos de biblioteca necesarios de jquery & spectrum CDN en el archivo Html.
- Declare una etiqueta <div> con id como salida y etiqueta de entrada como selector de color que se declara fuera de la etiqueta <div>.
- Declare una función para el espectro que facilitará la elección del color y establezca el valor de showAlpha como verdadero.
Implementando Spectrum con atributo de transparencia de color
-
Paso 1: incluya Spectrum JQuery CDN en su archivo HTML.
<secuencia de comandos src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></secuencia de comandos>
-
Paso 2: incluya Spectrum CDN en su archivo HTML.
<script src=”https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js”></script>
<enlace rel=”hoja de estilo” type=”text/css” href=”https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css”> -
Paso 3: agregue un selector de color y div de salida a <cuerpo> de su archivo HTML.
<div id=”output” style=”height:200px;width:200px;”><h2>GeeksforGeeks<h2></div>
<input type=”text” id=”colorPicker”/> -
Paso 4: Agregue Sprectrum JQuery a <script>
$(document).ready(function(){ $('#colorPicker').spectrum({ color: '#fff', showAlpha: true, move: function(color){ $('#output').css( 'background-color', color.toRgbString()); } }); });
Ejemplo: ahora está listo para usar un selector de color de espectro con transparencia.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Spectrum Sample</title>
<!-- Include JQuery and Spectrum CDN -->
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js">
</script>
<link rel="stylesheet" type="text/css"
href=
"https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css" />
</head>
<body>
<!-- Output div to show output color -->
<div id="output" style="height: 200px; width: 200px">
<h2>GeeksforGeeks</h2>
</div>
<!-- Spectrum colorpicker -->
<input type="text" id="colorPicker" />
<script>
// jQuery to show selected color in
// the ouput of body tag.
$(document).ready(function () {
$("#colorPicker").spectrum({
color: "#fff",
// showApla set true to get
// transparency slider in
// the spectrum.
showAlpha: true,
move: function (color) {
$("#output").css(
"background-color",
color.toRgbString());
},
});
});
</script>
</body>
</html>
Producción:
