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