极客教程如何使用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 library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel" style="position:relative">
<!-- m-title,m-toolbar class is used here-->
<header>
<div class="m-toolbar">
<div class="m-title">Menu</div>
<div class="m-right">
<!-- Icons taken from themes folder-->
<a href="javascript: void(0)"
class="easyui-linkbutton"
data-options="iconCls: 'icon-search',
plain: true">
</a>
<!-- 'easyui-menubutton' class
is used here-->
<a href="javascript:void(0)"
class="easyui-menubutton"
data-options="iconCls:'icon-more',
menu: '#menuID',
menuAlign: 'right',
hasDownArrow: true">
</a>
</div>
</div>
</header>
</div>
<div id="menuID" class="easyui-menu"
style="width:150px;">
<div>New tab</div>
<div>New Window</div>
<!-- EasyUI Menu separator class -->
<div class="menu-sep"></div>
<div>History</div>
<div>Bookmarks</div>
<div>Downloads</div>
<div class="menu-sep"></div>
<div>Edit</div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>Settings</div>
<div data-options="iconCls: 'icon-remove'">
Clear
</div>
<div>Exit</div>
</div>
</body>
</html>
输出:
例子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 library of EasyUI Mobile -->
<script type="text/javascript"
src="jquery.easyui.mobile.js">
</script>
</head>
<body>
<div class="easyui-navpanel"
style="position:relative">
<!-- m-title,m-toolbar class
is used here-->
<header>
<div class="m-toolbar">
<div class="m-title">
<!-- easyui-menubutton class
is used here-->
<a href="https://www.geeksforgeeks.org/"
class="easyui-linkbutton"
data-options="plain:true,outline:true"
style="width:70px">
Home
</a>
<a href="javascript:void(0)"
class="easyui-menubutton"
data-options="menu:'#menuID1',outline:true"
style="width:70px">
History
</a>
<a href="javascript:void(0)"
class="easyui-menubutton"
data-options="menu:'#menuID2',outline:true"
style="width:95px">
Bookmarks
</a>
<a href="https://www.geeksforgeeks.org/about/"
class="easyui-linkbutton"
data-options="plain:true,outline:true"
style="width:70px">
About
</a>
</div>
</div>
</header>
</div>
<div id="menuID1" class="easyui-menu"
style="width:150px;">
<div>New tab</div>
<div>New Window</div>
<!--EasyUI Menu separator class-->
<div class="menu-sep"></div>
<div>Edit</div>
<div>Cut</div>
<div>Copy</div>
<div>Paste</div>
<div class="menu-sep"></div>
<div>Settings</div>
<div data-options="iconCls:'icon-remove'">
Clear
</div>
<div>Exit</div>
</div>
<div id="menuID2" style="width:100px;">
<div>History</div>
<div>Downloads</div>
</div>
</body>
</html>
输出:
