EasyUI jQuery fileBbox widget

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 FileBox usando jQuery EasyUI. El widget FileBox representa un campo de archivo en un formulario HTML.

Descargas para EasyUI para jQuery:

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

Sintaxis:

<input class="easyui-FileBox">

Propiedades:

buttonText: Es una string que define el texto del botón.
buttonIcon: Es una string que define el icono del botón.
buttonAlign: Es una string que define la posición del botón.
accept: Es una string que especifica los tipos de archivos que acepta el servidor.
múltiple: Es un valor booleano que define si se aceptan múltiples archivos.
separador: Define el carácter separador entre varios nombres de archivo.

Métodos:

Enlace 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

<html>
<head>
    
  <!-- 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 jQuery filebox widget</h3>
  
  <!-- Define the EasyUI FileBox using markup -->
  <input id="gfg" class="easyui-filebox">
</body>
</html>

Producción:

Referencia: https://www.jeasyui.com/documentation/filebox.php

Publicación traducida automáticamente

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

HTML

Deja una respuesta Cancelar la respuesta