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
jQuery Tutorial jQuery is a lightweight JavaScript library that simplifies the HTML DOM manipulating, event handling, and creating dynamic web experiences. The main purpose of jQuery is to simplify the usage of JavaScript on websites. jQuery achieves this by providing concise, single-line methods for complex JavaSc
8 min read
What is Ajax ? Imagine browsing a website and being able to submit a form, load new content, or update information without having to refresh the entire page. That's the magic of AJAX. Asynchronous JavaScript and XML (AJAX) is a web development technique that allows web pages to communicate with a web server asynch
5 min read
How to Get Selected Value in Dropdown List using JavaScript? A dropdown list is an HTML element that allows users to select one option from a list of options. The <select> and <option> tags are used to create dropdown lists in HTML. In this article, we will see how to get selected value from dropdown list using JavaScript.Basic HTML Structure for
2 min read
Top 50+ jQuery Interview Questions and Answers - 2025 jQuery, a fast and lightweight JavaScript library, has been a game-changer in simplifying front-end web development known for its simplicity, ease of use, and cross-browser compatibility. In this article, we will provide the Top 50+ jQuery Interview Questions 2025 tailored for both freshers and expe
15+ min read
JQuery Set the Value of an Input Text Field Set the value of an input text field in jQuery is useful while working with forms. It is used to add new value to the input text field. In jQuery, there are various methods to set the value of input text fields, these are - val(), prop(), and attr(). These method offers unique capabilities for setti
3 min read
How to change Selected Value of a Drop-Down List using jQuery? We will change the default selected value of the dropdown using jQuery. In an HTML select tag, the default selected value is the value given to the first option tag. With jQuery, it is easy to change the selected value from a drop-down list. Below are the methods to change the selected value of a dr
3 min read
Form Validation using jQuery Form validation is a process of confirming the relevant information entered by the user in the input field. In this article, we will be validating a simple form that consists of a username, password, and a confirmed password using jQuery.Below are the approaches for validation of form using jQuery:T
5 min read
jQuery Introduction jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM). jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser Java
7 min read
jQuery UI Date Picker A date-picker of jQuery UI is used to provide a calendar to the user to select the date from a Calendar. This date picker is usually connected to a text box so user selection of date from the calendar can be transferred to the textbox. You need to add the below CDN to your HTML document to use it. C
3 min read
How to change the Background Color after Clicking the Button in JavaScript? Changing the background color after clicking a button in JavaScript involves attaching a click event listener to the button. When the button is clicked, it triggers a function that changes the background color of a specific element (like the page or a section of it).This creates a simple and interac
3 min read