How to create lists and links using jQuery EasyUI Mobile ?
Last Updated :
02 Aug, 2024
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=
"https://www.geeksforgeeks.org/c-programming-language/"
class="easyui-linkbutton">
Add
</a>
</div>
</li>
<li>C++
<div class="m-right">
<a href=
"https://www.geeksforgeeks.org/c-plus-plus/"
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=
"https://www.geeksforgeeks.org/python-programming-language/"
class="easyui-linkbutton">
Add
</a>
</div>
</li>
</ul>
</div>
</body>
</html>
Output:
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=
"https://www.geeksforgeeks.org/analysis-of-algorithms-set-1-asymptotic-analysis/"
onclick="display(this)">
Analysis of algorithms
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/searching-algorithms/"
onclick="display(this)">
Searching algorithms
</a>
</li>
<li>
<a href=
"https://www.geeksforgeeks.org/geometric-algorithms/"
onclick="display(this)">
Geometric algorithms
</a>
</li>
<li><a href=
"https://www.geeksforgeeks.org/greedy-algorithms/"
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=
"https://www.geeksforgeeks.org/javascript-tutorial/"
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:
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:
Similar Reads
How to create a Mini Button using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be making a Mini Button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€
1 min read
How to create Linked Ordered listviews using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating Linked Ordered listviews using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel=
1 min read
How to create Linked Unordered listviews using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating Linked Unordered listviews using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link re
1 min read
How to design menu using jQuery EasyUI Mobile ? 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 ti
2 min read
How to design login dialog 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. In this article, we will learn to design login dialog and message dialo
3 min read