我们讲解下设计第一个移动页面，现在移动端是浏览网站占比很大，小程序，今儿头条，等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢？
1.定义对话框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/> <script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page" data-dom-cache="true"> <div data-role="header"> <h1>模态对话框</h1> </div> <div data-role="content"> <p><a href="dialog.html" data-rel="dialog" data-transition="pop">打开对话框</a></p> </div> <div data-role="footer"> <h4>Copyright © 移动Web开发网 </h4> </div> </div> </body> </html>
demo2
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/> <script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page" data-dom-cache="true"> <div data-role="header"> <h1>模态对话框</h1> </div> <div data-role="content"> <p><a href="dialog.html" data-rel="dialog">打开对话框</a></p> </div> <div data-role="footer"> <h4>Copyright © 移动Web开发网 </h4> </div> </div> </body> </html>
demo3
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/> <script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page"> <div data-role="header"> <h1>主题</h1> </div> <div data-role="content"> <p>简单对话框！</p> </div> <div data-role="footer"> <h4>Copyright © 移动Web开发网 </h4> </div> </div> </body> </html>
2.定义关闭对话框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery Mobile Web 应用程序</title> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/> <script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script> <script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script> </head> <body> <div data-role="page" id="page" data-dom-cache="true"> <div data-role="header"> <h1>模态对话框</h1> </div> <div data-role="content"> <p><a href="dialog.html" data-rel="dialog">打开对话框</a></p> </div> <div data-role="footer"> <h4>Copyright © 移动Web开发网 </h4> </div> </div> </body> </html>
demo2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Mobile Web 应用程序</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="//freemuban.com/js/508/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css"/>
<script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/508/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>主题</h1>
</div>
<div data-role="content">
<p>简单对话框！</p>
<p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>
</div>
<div data-role="footer">
<h4>Copyright © 移动Web开发网 </h4>
</div>
</div>
</body>
</html>
3. 设计弹出框
<!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/508/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="//freemuban.com/js/508/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="//freemuban.com/js/508/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="//freemuban.com/js/508/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 href="#popup1" data-rel="popup" data-role="button">右边关闭</a>
<a href="#popup2" data-rel="popup" data-role="button">左边关闭</a>
<a href="#popup3" data-rel="popup" data-role="button" >禁用关闭</a>
<a href="#popup4" data-rel="popup" data-role="button">右边关闭（带标题）</a>
<a href="#popup5" data-rel="popup" data-role="button">左边关闭（带标题）</a>
<a href="#popup6" data-rel="popup" data-role="button" >禁用关闭（带标题）</a>
<div data-role="popup" id="popup1" class="ui-content" style="max-width:280px">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p><img src="images/p6.jpg" width="100%" /></p>
</div>
<div data-role="popup" id="popup2" class="ui-content" style="max-width:280px">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
<p><img src="images/p5.jpg" width="100%" /></p>
</div>
<div data-role="popup" id="popup3" class="ui-content" style="max-width:280px" data-dismissible="false">
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
<p><img src="images/p4.jpg" width="100%" /></p>
</div>
<div data-role="popup" id="popup4" class="ui-content" style="max-width:280px">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>弹出框</h1>
</div>
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<p>点击右侧按钮可以关闭对话框</p>
</div>
<div data-role="popup" id="popup5" class="ui-content" style="max-width:280px">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>弹出框</h1>
</div>
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
<p>点击左侧按钮可以关闭对话框</p>
</div>
<div data-role="popup" id="popup6" class="ui-content" style="max-width:280px" data-dismissible="false">
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>弹出框</h1>
</div>
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-left">Close</a>
<p>点击屏幕空白区域无法关闭</p>
</div>
</div>
</div>
</body>
</html>
