我们讲解下设计第一个移动页面，现在移动端是浏览网站占比很大，小程序，今儿头条，等大部分通过这些搜索相关信息了。所以一个网站的手机版是必不可少的。手机版的和html写法和电脑版的有什么区别呢？
1.GET方式传递参数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
function getParameterByName(name){
var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
$('#page2').live('pageshow', function(event, ui){
alert("传递给第二个页面的参数：" + getParameterByName('parameter'));
});
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>第一页</h1>
</div>
<div data-role="content">
<a href="?parameter=1#page2" rel="external" data-role="button">下一页1</a>
<a href="?parameter=2#page2" rel="external" data-role="button">下一页2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二页</h1>
</div>
<div data-role="content">
<a href="#page1" id="anchor" data-role="button">返回</a>
</div>
</div>
</body>
</html>
2.通过HTML5 Web Storag传递参数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$('#page2').live('pageshow', function(event, ui){
alert("传递给第二个页面的参数：" + sessionStorage.name);
});
</script>
<style type="text/css"></style>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>第一页</h1>
</div>
<div data-role="content">
<a href="#page2" onclick="sessionStorage.name=1" data-role="button">下一页1</a>
<a href="#page2" onclick="sessionStorage.name=2" data-role="button">下一页2</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二页</h1>
</div>
<div data-role="content">
<a href="#page1" data-role="button">返回</a>
</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="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.pageLoadErrorMessage="页面加载错误";
$.mobile.loadingMessage="页面正在加载中";
$.mobile.loadingMessageTextVisible=true;
$.mobile.loadingMessageTheme="d";
});
</script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
</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="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function(){
$.mobile.pageLoadErrorMessage="页面加载错误";
});
</script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<style type="text/css">
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>页面加载</h1>
</div>
<div data-role="content">
<p>返回首页面：<a href="notexisting.html">index.html<a></p>
</div>
</div>
</body>
</html>
demo3
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function() {
$.extend($.mobile, {
loadingMessage: '加载中...',
pageLoadErrorMessage: '找不到对应页面！'
});
});
</script>
<script src="jquery-mobile/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">
<h3>修改配置</h3>
<p><a href="news.html">news.html</a></p>
</div>
<div data-role="footer" class="ui-footer-fixed">
<h4>脚注</h4>
</div>
</div>
</body>
</html>
demo4
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>
<script>
$(document).bind("mobileinit", function() {
$.extend($.mobile, {
loadingMessage: '加载中...',
pageLoadErrorMessage: '找不到对应页面！'
});
});
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="header">
<h1>标题</h1>
</div>
<div data-role="content">
<h3>修改配置</h3>
<p><a href="news.html">news.html</a></p>
</div>
<div data-role="footer" class="ui-footer-fixed">
<h4>脚注</h4>
</div>
</div>
</body>
</html>
4.管理加载消息
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link href="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/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="#" onClick="$.mobile.showPageLoadingMsg('b', '显示自定义消息框', true); " data-role="button">启动自定义消息框</a>
<a href="#" onClick="$.mobile.hidePageLoadingMsg();" data-role="button">点击关闭消息框</a>
</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="jquery-mobile/jquery.mobile.theme-1.3.0.min.css" rel="stylesheet" type="text/css">
<link href="jquery-mobile/jquery.mobile.structure-1.3.0.min.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jquery-mobile/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="#" onClick="$.mobile.showPageLoadingMsg('b', '显示自定义消息框', true); ">启动自定义消息框</a>
</div>
</div>
</body>
</html>
