Skip to content
Related Articles

Related Articles

How to create lists and links using jQuery EasyUI Mobile ?
  • Last Updated : 15 Dec, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 

  • Before execute: 
     

After execute: 

 

Example 2: The following example demonstrates grouping of lists using the above plugin.

html



filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 

  • Before execute: 

  • After execute: 

Example 3: The following example demonstrates simple lists with images using the above plugin.

html

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output: 
 

 

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :