How to design menu using jQuery EasyUI Mobile ?

Last Updated : 15 Dec, 2020

In this article, we will learn how to design menu list using jQuery EasyUI Mobile plugin. EasyUI is a HTML5 framework for using user interface components based on jQuery, React, Angular and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Example 1: The following example demonstrates simple menu using jQuery EasyUI Mobile plugin.

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>

Output:

Example 2: The following example demonstrates a menubar using the plugin.

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>

Output:

How to design buttons for mobiles using jQuery EasyUI Mobile?

geetanjali16

Improve

Article Tags :

How to design menu using jQuery EasyUI Mobile ?

Similar Reads

Thank You!

What kind of Experience do you want to share?