Skip to content
Related Articles

Related Articles

Improve Article

How to design navigation panel with ajax loading using jQuery EasyUI Mobile ?

  • Last Updated : 14 Dec, 2020

In this article, we will learn how to design navigation panel with ajax loading 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

Please take care of proper file paths for the pre-compiled library files while code implementation.

Example 1: The following code demonstrates the design of two navigation panel with the ‘Go Back’ option to another panel using jQuery EasyUI Mobile plugin.






<!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 libraries of EasyUI Mobile-->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
</head>
  
<body>
  
    <!--'easyui-navpanel' class of EasyUI 
        Mobile for navigation panel-->
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <div class="m-title">
                    Handling navigation panel
                </div>
            </div>
        </header>
        <div style="margin:50px 0 0;text-align:center">
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                style="width:100px;height:30px"
                onclick="$.mobile.go('#divID2')">
                Goto Panel 2
            </a>
        </div>
    </div>
    <div id="divID2" class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <div class="m-title">
                    Navigation panel 2
                </div>
                  
                <div class="m-left">
                    <!--'m-back' class is used-->
                    <a href="#" class="easyui-linkbutton 
                        m-back" data-options=
                        "plain:true,outline:true,back:true">
  
                        <!--data option back is set to 'true' -->
                        Back
                    </a>
                </div>
            </div>
        </header>
        <div style="margin:50px 0 0;text-align:center">
            <a href="javascript:void(0)" 
                class="easyui-linkbutton" 
                onclick="$.mobile.back()">
                Go Back
            </a>
        </div>
  
        <footer>
            <div class="m-toolbar">
                <div class="m-title">Footer Content</div>
            </div>
        </footer>
    </div>
</body>
  
</html>

Output:

Example 2: The following code demonstrates the Ajax loading of webpage content using jQuery EasyUI Mobile plugin.




<!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 libraries of EasyUI Mobile-->
    <script type="text/javascript" 
        src="jquery.easyui.mobile.js">
    </script>
</head>
  
<body>
  
    <!--'easyui-navpanel' class of EasyUI 
        Mobile for navigation panel-->
    <div class="easyui-navpanel" 
        data-options="href:'displayContent.html'" 
        style="padding:10px">
  
        <!--For Ajax loading of any page, 
            just set the data-options attribute 
            with file name-->
        <header>
            <div class="m-toolbar">
                <div class="m-title">
                    Ajax Content
                </div>
            </div>
        </header>
  
        <footer>
            <div class="m-toolbar">
                <div class="m-title">
                    Footer Content
                </div>
            </div>
        </footer>
    </div>
</body>
  
</html>

displayContent.html The following is the code content for the file “displayContent.html” which is used in the above example code.




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="UTF-8">
</head>
  
<body>
    <p style="font-size:14px">
        Ajax content loaded from file
    </p>
  
    <p>
        Ajax is an acronym for Asynchronous 
        Javascript and XML. It is used to 
        communicate with the server without 
        refreshing the web page and thus 
        increasing the user experience and 
        better. Facebook, Instagram, Twitter 
        etc are considered the situation when 
        check news feed and if like someone 
        post simply click the like button and 
        the like count is added without 
        refreshing the page. Now imagine the 
        situation if there would be the case, 
        click the like button and the complete
        page would be loaded again which will 
        make such processes.
    </p>
</body>
  
</html>

Output:

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :