我们继续讲解jquery操作事件中，定义弹出页面,菜单和嵌套菜单,借助于插件快速实现点击弹出页面的效果
1.定义弹出页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定义弹出页</h1>
</div>
<div data-role="content">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupBasic" data-transition="pop" data-rel="popup">打开弹出页</a>
<div id="popupBasic" data-role="popup">
<p>这是一个最简单的弹出框，没有任何设置</p>
</div>
</div>
</div>
</body>
</html>
2.菜单和嵌套菜单
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定义弹出菜单</h1>
</div>
<div data-role="content">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a" href="#popupMenu" data-transition="slideup" data-rel="popup">弹出菜单</a>
<div id="popupMenu" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="list-divider">选择命令</li>
<li><a href="#">查看代码</a></li>
<li><a href="#">编辑</a></li>
<li><a href="#">禁用</a></li>
<li><a href="#">删除</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/511/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/511/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/511/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/511/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定义弹出菜单</h1>
</div>
<div data-role="content">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-b" href="#popupNested" data-transition="pop" data-rel="popup">弹出折叠菜单</a>
<div id="popupNested" data-role="popup" data-theme="none">
<div style="margin: 0px; width: 300px;" data-role="collapsibleset" data-theme="b" data-expanded-icon="arrow-d" data-collapsed-icon="arrow-r" data-content-theme="a">
<div data-role="collapsible" data-inset="false">
<h2>列表标题1</h2>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">列表内容11</a></li>
<li><a href="#" data-rel="dialog">列表内容12</a></li>
</ul>
</div><!-- /collapsible -->
<div data-role="collapsible" data-inset="false">
<h2>列表标题2</h2>
<ul data-role="listview">
<li><a href="#" data-rel="dialog">列表内容21</a></li>
<li><a href="#" data-rel="dialog">列表内容22</a></li>
</ul>
</div><!-- /collapsible -->
</div><!-- /collapsible set -->
</div><!-- /popup -->
</div>
</div>
</body>
</html>
