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. Los acordeones son contenidos HTML que alternan entre mostrar y ocultar.
Enlace de descarga para el marco EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Descargue todos los archivos precompilados para la siguiente implementación de código y tenga cuidado con las rutas de archivo adecuadas.
Ejemplo 1: El siguiente ejemplo demuestra el acordeón básico usando el marco jQuery EasyUI . Tiene dos contenidos para mostrar y ocultar. Una es una lista y la segunda lista muestra su contenido como Ajax cargando desde otro archivo HTML llamado «micontenido.html».
HTML
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content= "initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <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"> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.easyui.min.js"></script> <script type="text/javascript" src="jquery.easyui.mobile.js"></script> </head> <body> <div class="easyui-navpanel"> <header> <div class="m-toolbar"> <span class="m-title"> My Accordion </span> </div> </header> <div class="easyui-accordion" fit="true" border="false"> <div title="List1"> <ul class="m-list"> <li>Algorithms</li> <li>Data Structures</li> <li>Web designing</li> <li>More...</li> </ul> </div> <div title="Ajax List2" href="mycontent.html" style="padding:10px"> </div> </div> </div> </body> </html>
Archivo “mycontent.html”: el siguiente archivo se usa en ambos ejemplos para la carga de contenido de datos de Ajax.
HTML
<!DOCTYPE html> <html> <body> <p style="font-size:14px">My AJAX content.</p> <ul> <li> There are many important things that should be taken care of, like user friendliness, modularity, security, maintainability, etc. </li> <li> Python is a high-level, general-purpose and a very popular programming language. </li> <li> Java has been one of the most popular programming language for many years. </li> <li> The Java codes are first compiled into byte code (machine independent code). </li> <li> Java is used in all kind of applications like Mobile Applications (Android is Java based). </li> <li> When compared with C++, Java codes are generally more maintainable because Java does not allow many things which may lead bad/inefficient programming if used incorrectly. </li> </ul> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra un encabezado de acordeón personalizado usando el complemento jQuery EasyUI Mobile.
HTML
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,
maximum-scale=1.0, user-scalable=no">
<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">
<script type="text/javascript"
src="jquery.min.js">
</script>
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
<style scoped>
.ajax-list {
padding: 5px;
position: relative;
line-height: 20px;
background: #fff;
font-weight: bold;
margin: -5px;
}
</style>
</head>
<body>
<div class="easyui-navpanel">
<header>
<!-- Mobile.css has styles
for m-toolbar,m-title -->
<div class="m-toolbar">
<span class="m-title">
My Custom Header
</span>
</div>
</header>
<div class="easyui-accordion" data-options
="fit:true,border:false,selected:-1">
<div>
<header>
<div class="hh-inner">
<span>List 1</span>
<span class="m-badge"
style="float:right">
27/50
</span>
</div>
</header>
<ul class="m-list">
<li>Web design</li>
<li>Mobile Apps</li>
<li>Tableau</li>
<li>More...</li>
</ul>
</div>
<!-- mycontent.html file contains
the content for ajax load-->
<div href="mycontent.html" style="padding:10px">
<header>
<div class="ajax-list">
<span>List 2</span>
<span style="float:right">
<span style="color:#e9e9e9;
margin-right:5px">
Ajax Loading
</span>
<span class="m-badge">25</span>
</span>
</div>
</header>
</div>
</div>
</div>
</body>
</html>
Producció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