Widget de cuadro de etiquetas EasyUI jQuery

EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados ​​en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.

En este artículo, aprenderemos a diseñar un cuadro de etiquetas usando jQuery EasyUI. Tagbox permite al usuario mostrar etiquetas de etiquetas en lugar de mostrar valores en el cuadro de entrada.

Descarga EasyUI para jQuery:

https://www.jeasyui.com/download/index.php

Sintaxis:

<input class="easyui-tagbox">

Propiedades:

  • hasDownArrow: devuelve el valor booleano verdadero para mostrar un botón de flecha hacia abajo; de lo contrario, devuelve falso.
  • tagFormatter: la función para devolver el valor formateado.
  • tagStyler: la función de estilo de etiquetas.

Evento:

  • onClickTag: se activa cuando se hace clic en la etiqueta.
  • onBeforeRemoveTag: se activa antes de eliminar una etiqueta.
  • onRemoveTag: se activa cuando elimina una etiqueta.

Enfoque: Primero, agregue los scripts jQuery Easy UI necesarios para su proyecto.

<script type=”text/javascript” src=”jquery.min.js”> </script>

<!–Bibliotecas jQuery de EasyUI –>
<script type=”text/javascript” src=”jquery.easyui.min.js”></script>

<!–Biblioteca jQuery de EasyUI Mobile –>
<script type=”text/javascript” src=”jquery.easyui.mobile.js”> </script>

Ejemplo:

HTML

<!doctype html>
<html>
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "initial-scale=1.0, maximum-scale=1.0, 
        user-scalable=no">
  
    <!-- EasyUI specific stylesheets-->
    <link rel="stylesheet" type="text/css" 
        href="themes/metro/easyui.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/mobile.css">
  
    <link rel="stylesheet" type="text/css" 
        href="themes/icon.css">
  
    <!-- jQuery library -->
    <script type="text/javascript" 
        src="jquery.min.js">
    </script>
  
    <!-- jQuery libraries of EasyUI -->
    <script type="text/javascript" 
        src="jquery.easyui.min.js">
    </script>
  
    <!-- jQuery library of EasyUI Mobile -->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
  
    <script type="text/javascript">
        $(document).ready(function() {
            $('#gfg').tagbox({
                hasDownArrow: true
            });
        });
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <h3>EasyUI jQuery tagbox widget</h3>
  
    <input id="gfg" class="easyui-tagbox" 
        value="jQuery,JavaScript,HTML" 
        label="Add a tag">
</body>
  
</html>

 

Producción:

Referencia: http://www.jeasyui.com/documentation/

Publicación traducida automáticamente

Artículo escrito por taran910 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 *