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/index.php
Ejemplo 1: el siguiente ejemplo demuestra la función básica de caja de archivos para incluir en los formularios de la página web del desarrollador mediante el complemento jQuery EasyUI .
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="demo.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> </head> <body> <h2>jQuery EasyUI basic filebox feature</h2> <div style="margin:20px 0;"></div> <div class="easyui-panel" title="Upload File" style="width:100%;max-width:400px;padding:30px 60px;"> <div style="margin-bottom:20px"> <!--easyui-filebox class is used --> <input class="easyui-filebox" label="File1:" labelPosition="top" data-options="prompt:'Choose a file...'" style="width:100%"> </div> <div style="margin-bottom:40px"> <input class="easyui-filebox" label="File2:" labelPosition="top" data-options="prompt:'Choose 2nd file...'" style="width:100%"> </div> <div> <!--link can be created with easyui-linkbutton class --> <a href="#" class="easyui-linkbutton" style="width:100%"> Upload file </a> </div> </div> </body> </html>
Producción:
- Pantalla de caja de archivos básica:
- Después de seleccionar el archivo:
Ejemplo 2:
El siguiente ejemplo demuestra cómo alinear el botón del cuadro de archivo en los lados izquierdo o derecho según la necesidad del usuario. También demuestra cómo establecer el ancho de filebox en un porcentaje con respecto a su contenedor principal.
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="demo.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>
</head>
<body>
<h2>jQuery EasyUI basic filebox feature</h2>
<p>Change the 'choose file' alignment to the left or right.</p>
<span>Select alignment:</span>
<select onchange="selectAlign(this.value)">
<option value="left" selected>Left</option>
<option value="right">Right</option>
</select>
<div style="margin:20px 0;"></div>
<div class="easyui-panel" style="width:100%;max-width:400px;padding:30px 60px;">
<!--set the width of FileBox with respect to its parent container -->
<div style="margin-bottom:20px">
<input class="easyui-filebox" labelPosition="top"
style="width:100%" data-options="prompt:'Choose file1...'">
</div>
<div style="margin-bottom:20px">
<input class="easyui-filebox" labelPosition="top"
style="width:80%" data-options="prompt:'Choose file2...'">
</div>
</div>
<script type="text/javascript">
<!-- function to change right or left alignment -->
function selectAlign(align)
{
$('.easyui-filebox').filebox({buttonAlign:align});
}
</script>
</body>
</html>
Producción:
- Seleccionar pantalla de archivo:
- Seleccione la alineación:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA