Características:
- No necesitamos escribir mucho código javascript mientras usamos Easy UI; en su lugar, normalmente define la interfaz de usuario mediante la creación de marcas HTML básicas.
- Eso
eclare los componentes de la interfaz de usuario directamente dentro de HTML como se muestra a continuación. Aquí estamos tomando un ejemplo de EasyUI jQuery spinner Widget.
<div class="easyui-spinner" style="color: red;" data-options=" "> spinner content. </div>
Método 2: También podemos escribir código javascript para crear componentes como se muestra a continuación. Aquí estamos tomando un ejemplo de EasyUI jQuery spinner Widget.
<input id="cc" style="width:200px" /> <script type="text/javascript"> $(document).ready(function (){ $('#gfg').spinner({ required:true }); }); </script>
jQuery.
Paso 1: descargue la biblioteca desde el enlace que figura a continuación
https://www.jeasyui.com/download/index.php
Paso 2: incluya los siguientes archivos CSS y JavaScript de EasyUI en su página.
<enlace rel=”hoja de estilo” type=”text/css” href=”easyui/themes/default/easyui.css”> <enlace rel
=”hoja de estilo” type=”text/css” href=”easyui/themes/icon .css”>
<script type=”text/javascript” src=”easyui/jquery.min.js”></script>
<script type=”text/javascript” src=”easyui/jquery.easyui.min.js ”></guion>
Paso 3: Ahora puedes
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').spinner({ required: true }); }); </script> </head> <body> <h1>GeeksforGeeks</h1> <h3>EasyUI jQuery spinner widget</h3> <input id="gfg" class="easyui-spinner"> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por namanjaingeeksforgeeks y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA