本文介绍了使用jQuery Mobile框架创建对话框的两种方法。第一种方法是直接将页面的data-role属性设置为'dialog'，使其以弹出对话框的形式展示。第二种方法是在链接标签上添加data-rel='dialog'属性，当点击链接时会弹出带有该属性的页面。
3.将页面作为对话框显示
方法1：
在页面显示的时候，我们可以把页面当成弹出框来显示，我们只需要把div标签的data-role="page"属性改为data-role="dialog",便可以做出对话框式的页面了。
<div data-role="dialog">…</div>
示例如下：
代码如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>弹出框页面</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="dialog">
<div data-role="header">
<h1>这是标题</h1>
</div>
<div data-role="content">
<p>这是内容</p>
</div>
<div data-role="footer">
<h1>这是页面底部</h1>
</div>
</div>
</body>
</html>
方法2：
除了以上方法，我们还可以通过在a标签上添加data-rel="dialog"属性，来实现页面的弹出显示效果。
<a href="#secondPage"data-rel="dialog">跳转到页面2</a>
示例如下：
代码如下：
<!DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8">
<title>一个HTML中多个页面</title>
<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page" id="firstPage">
<div data-role="header">
<h1>这是页面1标题</h1>
</div>
<div data-role="content">
<p><a href="#secondPage"data-rel="dialog">跳转到页面2</a></p>
</div>
<div data-role="footer">
<h1>这里是页面1底部</h1>
</div>
</div>
<div data-role="page" id="secondPage">
<div data-role="header">
<h1>这是页面2标题</h1>
</div>
<div data-role="content">
<p><a href="#firstPage">跳转到页面1</a></p>
</div>
<div data-role="footer">
<h1>这里是页面2底部</h1>
</div>
</div>
</body>
</html>
扫一扫
4020
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
