EasyUI is an 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 datalists for mobile interface. Datalists are dropdown lists with pre-defined input options.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Please take care of proper file paths while implementing your mobile application codes.
Example 1: The following code demonstrates the simple datalist using jQuery EasyUI.
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 and
EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.min.js">
</script>
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel">
<header>
<!--EasyUI m-toolbar class is used -->
<div class="m-toolbar">
<span class="m-title">
Basic DataList
</span>
</div>
</header>
<!--EasyUI easyui-datalist class is used -->
<ul class="easyui-datalist" data-options="
fit: true,
lines: true,
border: false
">
<li>BMW</li>
<li>Mercedes</li>
<li>Bentley</li>
<li><a href="javascript:void(0)"
class="datalist-link">
Audi
</a></li>
<li><a href="javascript:void(0)"
class="datalist-link">
Volkswagen
</a>
</li>
<li>Tesla</li>
<li>Brio</li>
</ul>
</div>
</body>
</html>
|
Output:
Example 2: The following code demonstrates grouped datalist using jQuery EasyUI. On click of each item of the datalist, it displays the respective item content with a “Back” link.
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 library EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span class="m-title">
DataList group
</span>
</div>
</header>
<div id="datalistID" data-options="
fit: true,
border: false,
lines: true">
</div>
</div>
<div id="divID" class="easyui-navpanel">
<header>
<!--EasyUI 'm-toolbar' class is used-->
<div class="m-toolbar">
<span id="divID-title" class="m-title">
Car Details
</span>
<!--EasyUI 'easyui-linkbutton' class
is used for link and
'm-back' class is used for backtrack -->
<div class="m-left">
<a href="javascript:void(0)"
class="easyui-linkbutton m-back"
plain="true" outline="true"
onclick="$.mobile.back()">
Back
</a>
</div>
</div>
</header>
</div>
<script>
// The listitems can be grouped
var data = [
{ "group": "Group1", "item": "Audi" },
{ "group": "Group1", "item": "Mercedes" },
{ "group": "Group2", "item": "Bentley" },
{ "group": "Group2", "item": "BMW" },
{ "group": "Group3", "item": "Sedan" },
{ "group": "Group3", "item": "SUV" }
];
// jQuery function for datalist
$(function () {
$('#datalistID').datalist({
data: data,
textField: 'item',
groupField: 'group',
textFormatter: function (value) {
return
'<a href="javascript:void(0)" class="datalist-link">'
+ value + '</a>';
},
/* On click of one row,it takes to the
#divID-title with respective item */
onClickRow: function (index, row) {
$('#divID-title').html(row.item);
$.mobile.go('#divID');
}
})
})
</script>
</body>
</html>
|
Output:
Example 3: The following example demonstrates checkbox for datalist.
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 library EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel">
<header>
<div class="m-toolbar">
<span class="m-title">
DataList selection
</span>
</div>
</header>
<div id="datalistID" data-options="
fit: true,
border: false,
lines: true,
checkbox: true,
singleSelect: false
">
</div>
</div>
<script>
// The listitems can be grouped
var data = [
{ "group": "Group1", "item": "Audi" },
{ "group": "Group1", "item": "Mercedes" },
{ "group": "Group2", "item": "Bentley" },
{ "group": "Group2", "item": "BMW" },
{ "group": "Group3", "item": "Sedan" },
{ "group": "Group3", "item": "SUV" }
];
// jQuery function for datalist
$(function () {
$('#datalistID').datalist({
data: data,
textField: 'item',
groupField: 'group'
})
})
</script>
</body>
</html>
|
Output: