¿Cómo diseñar el selector de color usando jQuery UI?

Posted on by Rudeus Greyrat

Un ColorPicker es una herramienta o widget del marco de jQuery UI que proporciona un cuadro desplegable de paleta de colores para que el usuario seleccione el color para un trabajo colorido. Por lo general, está conectado a un cuadro de texto para que la selección de color del usuario de la paleta de colores se pueda transferir al cuadro de texto. El cuadro desplegable puede ser un selector HSV (tono, saturación, valor) o una paleta de colores RGB predefinida, como se muestra en la imagen. Es una herramienta de interfaz de usuario muy útil ya que el usuario del otro lado no necesita recordar o conocer los códigos de color difíciles. Esta herramienta puede entenderse como un editor de imágenes o de texto.

Vistazo de ColorPicker usando jQuery UI: 
 

Si desea adjuntar el cuadro desplegable de la paleta de colores en el sitio web, necesita la biblioteca JqueryUI Colorpicker e incluir las dependencias JavaScript (jquery.colorpicker.js) y CSS (jquery.colorpicker.css) requeridas en sus códigos PHP o HTML para mostrar cualquier widget de interfaz de usuario de jQuery. Tenemos que usar las bibliotecas y estilos jQuery y jQuery UI. Puede cambiar los archivos para que coincidan con sus requisitos de estilo. En este artículo, crearemos la estructura del selector de color en una página HTML. En la página web HTML, el control de entrada del usuario se proporciona para la selección del usuario. El control de entrada del usuario se adjunta al widget de selector de color de jQuery UI mediante el código jQuery. A continuación se muestra la implementación completa.

Creación de estructura: en esta sección, estamos creando la estructura básica de la página y también adjuntando el enlace requerido que se utilizará. 

  • Enlaces para la interfaz de usuario de jQuery: 

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js”></script> 
<script src=”https://ajax.googleapis.com/ajax /libs/jqueryui/1.8.16/jquery-ui.js”></script> 
<enlace href=”http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness /jquery-ui.css” rel=”hoja de estilo” type=”texto/css” /> 
 

  • Código HTML: este ejemplo muestra una ventana emergente de selección de color simple. Como se mencionó anteriormente, los archivos dependientes descargados (CSS y JS) para el selector de color se guardan en la carpeta colorpicker-master . Asegúrese de que el desarrollador proporcione la ruta correcta de acuerdo con su propia ruta localhost en el código. 

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>jQueryUI | Color Picker</title>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <b>jQueryUI | Color Picker </b>
    <div class="height"></div>
    <br/>
  
    <body>
        Pick a color :
        <input type="text" id="my_color_picker">
    </body>
</body>
  
</html>

Estructura de diseño: en la sección anterior, hemos creado el código básico para usar el widget de selección de color. En esta sección, diseñaremos la estructura y adjuntaremos el widget del selector de color a nuestro control de entrada donde estableceremos opciones para anular las opciones predeterminadas del complemento del selector de color. La anulación de las opciones predeterminadas con su propia configuración de opciones se puede realizar en la parte del script del código HTML. Está diseñado de manera flexible para que los usuarios elijan las opciones necesarias para sus aplicaciones. 

  • Enlaces al archivo descargado:

<script src=”colorpicker-master/jquery.colorpicker.js”></script> 
<link href=”colorpicker-master/jquery.colorpicker.css” rel=”hoja de estilo” type=”text/css” />

  • Código CSS:

CSS

<style>
    h1 {
        color: green;
    }
  
    body {
        text-align: center;
    }
    .height {
        height: 10px;
    }
</style>
  • Código JS:

Javascript

<script>
       $(document).ready(function() {
           $(function() {
                $("#my_color_picker").colorpicker();
            });
       });
</script>
  • Programa:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <title>jQueryUI | Color Picker</title>
  
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js">
    </script>
    <link href=
"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css"
          rel="stylesheet" type="text/css" />
  
    <!-- Include Pre-compiled files from link or
        download the files in your localhost folder -->
    <script src=
"colorpicker-master/jquery.colorpicker.js">
    </script>
    <link href=
"colorpicker-master/jquery.colorpicker.css"
          rel="stylesheet" type="text/css" />
  
    <style>
        h1 {
            color: green;
        }
  
        body {
            text-align: center;
        }
        .height {
            height: 10px;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <b>jQueryUI | Color Picker </b>
    <div class="height"></div>
    <br/>
  
    <body>
        Pick a color :
        <input type="text" id="my_color_picker">
  
        <script>
            $(document).ready(function() {
                $(function() {
                    $("#my_color_picker").colorpicker();
                });
            });
        </script>
    </body>
</body>
  
</html>
  • Producción:

  • Administrar el color inicial y el formato de color: mientras mostramos el selector de color, podemos administrar el color inicial y el formato de color. Podemos usar el siguiente código jQuery en la sección del script para obtener el resultado.

Javascript

<script>
   $(function() {
     $( '#colorpickerId').colorpicker({
     color:'#00FF00',
     colorFormat: ['#HEX']
  });
 });  
</script>
  • Administrar el cuadro de diálogo: mientras mostramos el selector de color, podemos administrar el cuadro de diálogo para que se pueda arrastrar si el encabezado está visible y el cuadro de diálogo no está en línea. Podemos usar el siguiente código jQuery en la sección del script para obtener el resultado.

Javascript

<script>
   $(function() {
     $( '#colorpickerId').colorpicker({
     draggable:true,
  });
 });  
</script>
  • Administrar la ventana modal: mientras mostramos el selector de color, podemos administrar la ventana del selector de color como una ventana modal. Podemos usar el siguiente código jQuery en la sección del script para obtener el resultado.

Javascript

<script>
   $(function() {
     $( '#colorpickerId').colorpicker({
     modal: true,
  });
 });  
</script>
  • Administrar los botones ninguno, cerrar y cancelar: mientras mostramos el selector de color, podemos administrar los botones como ninguno, cerrar y cancelar. Podemos usar el siguiente código jQuery en la sección del script para obtener el resultado.

Javascript

<script>
   $(function() {
     $( '#colorpickerId').colorpicker({
      showNoneButton: true,
     showCloseButton: true,
     showCancelButton: true,
  });
 });  
</script>

Publicación traducida automáticamente

Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *