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. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.
https://www.jeasyui.com/download/index.php
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"> <!--jQuery library --> <script type="text/javascript" src="jquery.min.js"> </script> <!--jQuery libraries of EasyUI and EasyUI Mobile --> <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" style="padding:10px"> <header> <!--class styles are in mobile.css --> <div class="m-toolbar"> <div class="m-title">File structure</div> </div> </header> <ul class="easyui-tree" data-options="animate:true"> <li> <span>My Documents</span> <ul> <li data-options="state:'closed'"> <span>Photos</span> <ul> <li> <span>Official</span> </li> <li> <span>Trips</span> </li> <li> <span>FamilynFriends</span> </li> </ul> <span>Files</span> <ul> <li><span>Personal</span></li> <li><span>Official</span></li> </ul> </li> <li> <span>Program Files</span> <ul> <li>PHP</li> <li>JavaScript</li> <li>MySQL</li> <li>Tutorials</li> </ul> </li> <li>home.html</li> <li>about.html</li> <li>contact.html</li> <li>welcome.html</li> </ul> </li> </ul> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la característica de «arrastrar y soltar» de los Nodes de archivos en el árbol usando el marco 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"> <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> <h2> Drag Drop Tree Nodes using jQuery EasyUI Mobile </h2> <div class="easyui-navpanel" style="padding:10px"> <header> <!--styles are in mobile.css --> <div class="m-toolbar"> <div class="m-title">Drag/Drop Tree Nodes</div> </div> </header> <!--DragnDrop is enable to "true" in data-options --> <ul class="easyui-tree" data-options="animate:true,dnd:true"> <li> <span>My Documents</span> <ul> <li data-options="state:'closed'"> <span>Photos</span> <ul> <li> <span>Official</span> </li> <li> <span>Trips</span> </li> <li> <span>FamilynFriends</span> </li> </ul> <span>Files</span> <ul> <li><span>Personal</span></li> <li><span>Official</span></li> </ul> </li> <li> <span>Program Files</span> <ul> <li>PHP</li> <li>JavaScript</li> <li>MySQL</li> <li>Tutorials</li> </ul> </li> <li>home.html</li> <li>about.html</li> <li>contact.html</li> <li>welcome.html</li> </ul> </li> </ul> </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