¿Cómo diseñar un menú usando jQuery EasyUI Mobile?

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

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *