En este artículo, aprenderemos cómo diseñar una lista de menú usando el complemento jQuery EasyUI Mobile. 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/download/index.php
Ejemplo 1: El siguiente ejemplo muestra un menú simple 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"> <!-- 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> </head> <body> <div class="easyui-navpanel" style="position:relative"> <!-- m-title,m-toolbar class is used here--> <header> <div class="m-toolbar"> <div class="m-title">Menu</div> <div class="m-right"> <!-- Icons taken from themes folder--> <a href="javascript: void(0)" class="easyui-linkbutton" data-options="iconCls: 'icon-search', plain: true"> </a> <!-- 'easyui-menubutton' class is used here--> <a href="javascript:void(0)" class="easyui-menubutton" data-options="iconCls:'icon-more', menu: '#menuID', menuAlign: 'right', hasDownArrow: true"> </a> </div> </div> </header> </div> <div id="menuID" class="easyui-menu" style="width:150px;"> <div>New tab</div> <div>New Window</div> <!-- EasyUI Menu separator class --> <div class="menu-sep"></div> <div>History</div> <div>Bookmarks</div> <div>Downloads</div> <div class="menu-sep"></div> <div>Edit</div> <div>Cut</div> <div>Copy</div> <div>Paste</div> <div class="menu-sep"></div> <div>Settings</div> <div data-options="iconCls: 'icon-remove'"> Clear </div> <div>Exit</div> </div> </body> </html>
Producción:
Ejemplo 2: El siguiente ejemplo muestra una barra de menú usando el complemento.
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> </head> <body> <div class="easyui-navpanel" style="position:relative"> <!-- m-title,m-toolbar class is used here--> <header> <div class="m-toolbar"> <div class="m-title"> <!-- easyui-menubutton class is used here--> <a href="https://www.geeksforgeeks.org/" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:70px"> Home </a> <a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#menuID1',outline:true" style="width:70px"> History </a> <a href="javascript:void(0)" class="easyui-menubutton" data-options="menu:'#menuID2',outline:true" style="width:95px"> Bookmarks </a> <a href="https://www.geeksforgeeks.org/about/" class="easyui-linkbutton" data-options="plain:true,outline:true" style="width:70px"> About </a> </div> </div> </header> </div> <div id="menuID1" class="easyui-menu" style="width:150px;"> <div>New tab</div> <div>New Window</div> <!--EasyUI Menu separator class--> <div class="menu-sep"></div> <div>Edit</div> <div>Cut</div> <div>Copy</div> <div>Paste</div> <div class="menu-sep"></div> <div>Settings</div> <div data-options="iconCls:'icon-remove'"> Clear </div> <div>Exit</div> </div> <div id="menuID2" style="width:100px;"> <div>History</div> <div>Downloads</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