Skip to content
Related Articles

Related Articles

How to create lists and links using jQuery EasyUI Mobile ?

View Discussion
Improve Article
Save Article
  • Last Updated : 15 Dec, 2020
View Discussion
Improve Article
Save Article

In this article we will learn how to design lists, group them and create links for easy navigation using jQuery EasyUI Mobile.

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 file paths of pre-compiled library files while implementation.

Example 1: The following example demonstrates lists and create links via buttons using 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 libraries of EasyUI Mobile-->
    <script type="text/javascript" src="jquery.easyui.mobile.js">
    </script>
</head>
  
<body>
  
    <!--'easyui-navpanel' class is used for nav panel-->
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <span class="m-title">List Button</span>
            </div>
        </header>
          
        <!--'m-list' class is used for simple list-->
        <ul class="m-list">
            <li>C
                <div class="m-right">
                    <a href=
                        class="easyui-linkbutton">
                        Add
                    </a>
                </div>
            </li>
            <li>C++
                <div class="m-right">
                    <a href=
                        class="easyui-linkbutton">
                        Add
                    </a>
                </div>
            </li>
            <li>Java
                <div class="m-right">
                    <a href=
                "https://www.geeksforgeeks.org/java/" 
                        class="easyui-linkbutton">
                        Add
                    </a>
                </div>
            </li>
            <li>Python
                <div class="m-right">
                    <a href=
                        class="easyui-linkbutton">
                        Add
                    </a>
                </div>
            </li>
        </ul>
    </div>
</body>
  
</html>

Output: 

  • Before execute: 
     

After execute: 

 

Example 2: The following example demonstrates grouping of lists using the above 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 libraries of EasyUI Mobile-->
    <script type="text/javascript" src="jquery.easyui.mobile.js">
    </script>
</head>
  
<body>
  
    <!--'easyui-navpanel' class for navigation panel-->
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <span class="m-title">
                    List group and link lists
                </span>
            </div>
        </header>
        <!--'m-list' class is used for simple lists -->
        <ul class="m-list">
            <!--'m-list-group' class is used to group lists -->
            <li class="m-list-group">Algorithms</li>
            <li>
                <a href=
                    onclick="display(this)">
                    Analysis of algorithms
                </a>
            </li>
  
            <li>
                <a href=
                    onclick="display(this)">
                    Searching algorithms
                </a>
            </li>
              
            <li>
                <a href=
                    onclick="display(this)">
                    Geometric algorithms
                </a>
            </li>
  
            <li><a href=
                    onclick="display(this)">
                    Greedy algorithms
                </a>
            </li>
  
            <li class="m-list-group">
                Web Technologies
            </li>
              
            <li><a href="" onclick="display(this)">
                HTML</a>
            </li>
              
            <li>
                <a href=
                    onclick="display(this)">
                    Javascript
                </a>
            </li>
        </ul>
    </div>
  
    <div id="divID2" class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <span id="panel2-title" class="m-title">
                    Details
                </span>
                <div class="m-left">
  
                    <!--'m-back' class is used for 
                        going back-->
                    <a href="javascript:void(0)" 
                        class="easyui-linkbutton m-back" 
                        plain="true" outline="true"
                        onclick="$.mobile.back()">
                        Back
                    </a>
                </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.back()">
                Go Back
            </a>
        </div>
    </div>
      
    <script type="text/javascript">
  
        function display(target) {
  
            var link = $(target).text();
            $('#panel2-title').html(link);
            $.mobile.go('#divID2');
        }
    </script>
</body>
  
</html>

Output: 

  • Before execute: 

  • After execute: 

Example 3: The following example demonstrates simple lists with images using the above 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 libraries of EasyUI Mobile-->
    <script type="text/javascript" src="jquery.easyui.mobile.js">
    </script>
      
    <style>
        #listID .list-image {
            float: left;
            width: 32px;
            height: 32px;
            border: 0;
            margin-right: 5px;
        }
  
        #listID .list-header {
            font-size: 14px;
            font-weight: bold;
        }
  
        #listID .list-content {
            text-overflow: ellipsis;
            overflow: hidden;
        }
    </style>
</head>
  
<body>
  
    <!--'easyui-navpanel' class for 
        navigation panel-->
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <span class="m-title">
                    Images for simple lists
                </span>
            </div>
        </header>
  
        <!--'m-list' class is used -->
        <ul id="listID" class="m-list">
            <li>
                <!--'list-image' class is used -->
                <img class="list-image" src="images/html.png" />
  
                <!--'list-header' class is used for heading-->
                <div class="list-header">HTML</div>
                  
                <!--'list-content' class for the list content-->
                <div class="list-content">
                    HTML stands for HyperText Markup Language.
                    It is used to design web pages.
                </div>
            </li>
              
            <li>
                <img class="list-image" src="images/php.png" />
                <div class="list-header">PHP</div>
                <div class="list-content">
                    PHP is a server-side scripting language
                    designed specifically for web development.
                </div>
            </li>
        </ul>
    </div>
</body>
  
</html>

Output: 
 

 


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!