Widget de información sobre herramientas EasyUI jQuery

En este artículo, aprenderemos cómo diseñar un widget de información sobre herramientas utilizando jQuery EasyUI. 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.

Descarga EasyUI para jQuery:

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

Sintaxis:

var a = $(".selector").tooltip({

});

Propiedades:

    Métodos:

        Vínculos de CDN: 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> 
          
            <h1>GeeksforGeeks</h1>
            <h3>Easy UI | tooltip widget</h3>
        </head> 
          
        <body>     
            <a href="#" title="This is the tooltip message." 
               class="easyui-tooltip">
                  Hover me
            </a>
        </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 *