Widget de barra de progreso EasyUI jQuery

En este artículo, aprenderemos cómo diseñar un widget de barra de progreso utilizando la barra de progreso jQuery Easy UI. El componente se puede crear a partir del marcado HTML o mediante programación. 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.

Descargas para EasyUI para jQuery:

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

Sintaxis:

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

});

Propiedades:

    Métodos:

        Enlaces 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> 
        </head> 
          
        <body>     
            <h1>GeeksforGeeks</h1>
            <h3>EasyUI Progressbar Widget</h3>
            <div id="p" class="easyui-progressbar" 
                        data-options="value:60" 
                        style="width:400px;">
            </div>
        </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 *