极客教程如何使用jQuery EasyUI Mobile创建列表和链接
在这篇文章中，我们将学习如何使用jQuery EasyUI Mobile来设计列表，对它们进行分组并创建链接以方便导航。
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
请在执行时注意预编译库文件的文件路径。
例子1：下面的例子演示了列表，并通过使用jQuery EasyUI Mobile的按钮创建链接。
<!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>
输出:
- Before execute:
After execute:
例子2：下面的例子演示了使用上述插件对列表进行分组。
<!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>
输出:
- Before execute:
- After execute:
例子3：下面的例子演示了使用上述插件的带图片的简单列表。
<!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>
输出:
