文章目录
JQuery Mobile基础
1. 页面与对话框
本章以实例介绍在JQuery Mobile中使用page控件的方法。page控件不仅是JQuery Mobile中非常重要的控件，更是必不可少的控件。虽然用法简单，却能反映出程序员对编码理解的深度。
本章还将介绍利用原生JQuery提高页面交互性的例子。主要知识点包括：
- page控件，包括page的高级用法，以及如何人为修改JQuery Mobile中已定义的属性
- 适应各种屏幕的方法
- 利用链接来实现页面间切换的方法
- 对话框的使用方法
1.1 简单的helloworld
简单的hello页面：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <!--重点所在-->
<title>测试设备的分辨率</title>
<link rel="stylesheet" href="jquery.mobile.min.css" /> <!--Jquery Mobile样式文件-->
<!--引用JQuery脚本-->
<script src="../jquery-3.5.1.min.js"></script>
<!--引入JQuery Mobile脚本-->
<script src="../jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page"> <!--此处为页面控件-->
hello shenziyi <!--在空间中插入内容hello shenziyi-->
</div>
</body>
</html>
程序运行结果如下：
1.2 利用JQuery脚本DIY闪光灯效果
闪光灯代码：(利用JQuery不断切换页面的背景颜色)
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2">
<title>不断闪动的页面 </title>
<!--jQuery Mobile样式文件-->
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i=0; //声明标志变量i
setInterval(function(){
if(i==0)
{
//将所有div标签的背景颜色改为黄色
$("div").css("background-color","black");
i=1;
}else
{
$("div").css("background-color","white");
i=0;
}
},100);
});
</script>
</head>
<body>
<!--为page控件加入主题、默认为黑色-->
<div data-role="page" data-theme="a">
</div>
</body>
</html>
(效果图为动态不方便展示)
程序在页面加载完成之后开启setInterval()计数器，其中100表示计数器运行间隔为100ms，设置一个临时变量i记录当前状态。$(“div”)选择了页面中的所有div标签，由于该页面只有一个div，因此选中了page控件，然后利用css改变页面属性。
也可以使用JQuery来修改page的主题属性：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>使用JQuery Mobile主题的闪光灯 </title>
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var i=0;
setInterval(function(){
if(i==0)
{
$("div").attr("data-theme","a");
i=1;
}else
{
$("div").attr("data-theme","b");
alert($("div").attr("data-theme"));//在主题被修改后用对话框弹出当前主题名称
i=0;
}
},100);
});
</script>
</head>
<body>
<div data-role="page" data-theme="b">
</div>
</body>
</html>
运行结果如下所示：
我们可以看到page主题改变了但是页面颜色没有发生变化，是因为在页面加载时，JQuery会搜索页面中所有data-role为page的元素并对其加载相应的主题，之后如果不重复运行加载脚本，那么无论元素的属性如何变化，页面上显示是不会变化的。当然也可以在文件中重新添加加载的脚本。
1.3 不断切换的场景
作为一款真正具有使用价值的应用，首先应该至少有两个界面，通过页面的切换来实现更多的交互。在JQuery Mobile中页面的切换是通过链接实现的。JQuery Mobile为了使开发者能够创造出更好的交互性，提供了十种不同的切换效果。
示例：JQuery Mobile中的场景切换
<!DOCTYPE html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2"/>
<title>不断闪动的页面 </title>
<!--jQuery Mobile样式文件-->
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<!--使用默认切换方式，效果为渐显-->
<a href="E:/API Cloud/chapter4/html/demo.html" data-role="button">页面间的切换</a>
<!-- data-transition="fade" 定义切换方式渐显-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="fade" data-direction="reverse">fade</a>
<!-- data-transition="pop" 定义切换方式扩散-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="pop" data-direction="reverse">pop</a>
<!-- data-transition="flip" 定义切换方式展开-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="flip" data-direction="reverse">flip</a>
<!-- data-transition="turn" 定义切换方式翻转覆盖-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="turn" data-direction="reverse">turn</a>
<!-- data-transition="flow" 定义切换方式扩散覆盖-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="flow" data-direction="reverse">flow</a>
<!-- data-transition="slidefade" 定义切换方式滑动渐显-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="slidefade" >slidefade</a>
<!-- data-transition="slide" 定义切换方式滑动-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="slide" data-direction="reverse">slide</a>
<!-- data-transition="slidedown" 定义切换方式向下滑动-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="slidedown" >slidedown</a>
<!-- data-transition="slideup" 定义切换方式向上滑动-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="slideup" >slideup</a>
<!-- data-transition="none" 定义切换方式“无"-->
<a data-role="button" href="E:/API Cloud/chapter4/html/demo.html" data-transition="none" data-direction="reverse">none</a>
</div>
</body>
</html>
除此之外还需要一个页面demo.html：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2">
<title>不断闪动的页面 </title>
<!--jQuery Mobile样式文件-->
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<h1>19-计算机类-严伟</h1>
<h1>20-软件-林昊天</h1>
<h1>21-人文-沈子怡</h1>
</div>
</body>
</html>
运行效果如下所示：
1.4 整人游戏
编辑四个文件，分别为main.html，confirm.html，result.html，question.html。
游戏开始页面main.html：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2"/>
<title>游戏开始</title>
<!--jQuery Mobile样式文件-->
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<a href="question.html" data-role="button" data-rel="dialog">游戏开始</a>
</div>
</body>
</html>
result.html：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2"/>
<title>老实交代！你到底是不是弱智！</title>
<!--jQuery Mobile样式文件-->
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<h1>早点承认不就好了么，何必这么麻烦！</h1>
</div>
</body>
</html>
question.html：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2"/>
<title>老实交代！你到底是不是弱智！</title>
<!--jQuery Mobile样式文件-->
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<h1>老实交代！你到底是不是弱智！</h1>
<a href="result.html" data-role="button">这你都知道！！！！</a>
<a href="confirm.html" data-role="button" data-rel="dialog">死不承认！</a>
</div>
</body>
</html>
confirm.html：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2"/>
<title>老实交代！你到底是不是弱智！</title>
<!--jQuery Mobile样式文件-->
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<!--<script type="text/javascript" src="cordova.js"></script>-->
</head>
<body>
<div data-role="page">
<h1>老实交代！你到底是不是弱智！</h1>
<a href="result.html" data-role="button">我承认，我是</a>
<a href="question.html" data-role="button" data-rel="dialog">我不是！</a>
</div>
</body>
</html>
1.5 手机被入侵页面框案例
代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=2"/>
<title>游戏开始</title>
<!--jQuery Mobile样式文件-->
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("警告！你的手机已被入侵");
setInterval(function(){ //使用计时器
alert("警告！你的手机已被入侵");
},3000); //设置间隔为三秒，注意这里不要把间隔设的太短，否则在PC上测试时无法关闭浏览器
});
</script>
</head>
<body>
<div data-role="page" data-theme="a">
<!--这里面可以再加一点内容，比如说：hello world -->
</div>
</body>
</html>
1.6 实现渐变背景
前面的内容介绍了在页面中使用page控件的方法，也介绍了如何通过设置主题来让页面拥有不同的颜色，但很多时候，还需要更加绚丽的方式。直接使用CSS设置背景图片是一个很好的方法，可是会造成页面加载缓慢。这时可以用CSS的渐变效果，实现如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
<style>
.background-gradient
{
background-image:-webkit-gradient(
linear,left bottom,left top,
color-stop(0.22,rgb(12,12,12)),
color-stop(0.57,rgb(153,168,192)),
color-stop(0.84,rgb(23,45,67))
);
background-image:-moz-linear-gradient(
90deg,
rgb(12,12,12),
rgb(153,168,192),
rgb(23,45,67)
);
}
</style>
</head>
<body>
<div data-role="page" class="background-gradient">
hello，沈子怡
</div>
</body>
</html>
效果如下：
可以看出，页面中实现了背景的渐变，在JQuery Mobile中只要可以使用背景的地方就可以使用渐变，如按钮、列表等。渐变的主要方式主要分为线性渐变和放射性渐变，本例使用的渐变就是线性渐变。
1.7 另一种对话框
1.5 中介绍了一种可利用JavaScript实现的对话框，但是随着JQuery Mobile新版本的出现，又有一些原生的对话框效果可供选择：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<a href="#popupBasic" data-rel="popup" data-role="button">请点击按钮</a>
<div data-role="popup" id="popupBasic">
<p>这是一个新的对话框</p>
</div>
</div>
</body>
</html>
效果如下：
data-role="popup"属性将div标签以及其中的内容声明为一个对话框的样式，通过属性id="popupBasic"为它设置了id。
href="#popupBasic"指定了该按钮的作用是打开id为popupBasic的对话框。另外，为了使按钮能够打开对话框，还要为按钮加入属性data-rel=“popup”。
同样也可以使用data-transition来定义对话框弹出的样式。
1.8 对话框的高级属性
上一节介绍了新的对话框使用方法，但是显然这样的对话框只能作为一种提示符来使用，无法满足开发需求。但是事实上对话框有许多高级属性。在下例中体现：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>对话框的高级属性</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>对话框的高技属性</h1>
</div>
<div data-role="content">
<a href="#popupCloseRight" data-rel="popup" data-role="button">右边关闭</a>
<a href="#popupCloseLeft" data-rel="popup" data-role="button">左边关闭</a>
<a href="#popupUndismissible" data-rel="popup" data-role="button" >禁用关闭</a>
<a href="#popupCloseRight1" data-rel="popup" data-role="button">另一种右边关闭</a>
<a href="#popupCloseLeft1" data-rel="popup" data-role="button">另一种左边关闭</a>
<a href="#popupUndismissible1" data-rel="popup" data-role="button" >另一种禁用关闭</a>
<div data-role="popup" id="popupCloseRight" 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>点击右侧的叉叉可以关闭对话框</p>
</div>
<div data-role="popup" id="popupCloseLeft" 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>点击左侧的叉叉可以关闭对话框</p>
</div>
<div data-role="popup" id="popupUndismissible" 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>点击屏幕的空白区域无法关闭</p>
</div>
<div data-role="popup" id="popupCloseRight1" 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="popupCloseLeft1" 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="popupUndismissible1" 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>
效果如下：
依次单击页面上六个按钮会出现不同的界面。通过观察发现，新的对话框相比之前增加了一个关闭键和顶部标题。在JQuery Mobile中非常容易实现这样的效果。
<a href="#" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
该语句实际上定义了一个按钮，关于实现按钮的方法将在后面详解。可改变属性class="ui-btn-right"为class="ui-btn-left"使按钮位置作为对话框的左上角。
带有属性data-dismissible="false"就不能依靠点击屏幕的空白区域取消。
<div data-role="header" data-theme="a" class="ui-corner-top">
<h1>空白标题</h1>
</div>
这段代码使得对话框多一个标题栏。使用了头部栏的一些样式。
1.9 基于JQuery Mobile的简单相册
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="../css/jquery.mobile.min.css" />
<script src="../script/jquery-2.1.4.min.js"></script>
<script src="../script/jquery.mobile.min.js"></script>
</head>
<body>
<div data-role="page">
<a href="#popup_1" data-rel="popup" data-position-to="window">
<img src="p1.jpg" style="width:49%">
</a>
<a href="#popup_2" data-rel="popup" data-position-to="window">
<img src="p2.jpg" style="width:49%">
</a>
<a href="#popup_3" data-rel="popup" data-position-to="window">
<img src="p3.jpg" style="width:49%">
</a>
<a href="#popup_4" data-rel="popup" data-position-to="window">
<img src="p4.jpg" style="width:49%">
</a>
<a href="#popup_5" data-rel="popup" data-position-to="window">
<img src="p5.jpg" style="width:49%">
</a>
<a href="#popup_6" data-rel="popup">
<img src="p6.jpg" style="width:49%">
</a>
<div data-role="popup" id="popup_1">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="p1.jpg" style="max-height:512px;">
</div>
<div data-role="popup" id="popup_2">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="p2.jpg" style="max-height:512px;" alt="Sydney, Australia">
</div>
<div data-role="popup" id="popup_3">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="p3.jpg" style="max-height:512px;" alt="New York, USA">
</div>
<div data-role="popup" id="popup_4">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="p4.jpg" style="max-height:512px;">
</div>
<div data-role="popup" id="popup_5">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="p5.jpg" style="max-height:512px;" alt="Sydney, Australia">
</div>
<div data-role="popup" id="popup_6">
<a href="#" data-rel="back" data-role="button" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>
<img src="p6.jpg" style="max-height:512px;" alt="New York, USA">
</div>
</div>
</body>
</html>
单击页面中某张图片，该图片会以对话框的形式放大显示，如下所示：
<a href="#popup_1" data-rel="popup" data-position-to="window">
<img src="p1.jpg" style="width:49%">
</a>
该代码段展示了页面中一个图片的显示，利用一个a标签将图片包裹其中，使得图片具有了按钮的某些功能。
data-position-to="window"使弹出的对话框位于屏幕正中，而不是位于呼出这个对话框的按钮附近。