【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框

本文主要是介绍【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

文章目录

JQuery Mobile基础
- 1. 页面与对话框
- - 1.1 简单的helloworld
  - 1.2 利用JQuery脚本DIY闪光灯效果
  - 1.3 不断切换的场景
  - 1.4 整人游戏
  - 1.5 手机被入侵页面框案例
  - 1.6 实现渐变背景
  - 1.7 另一种对话框
  - 1.8 对话框的高级属性
  - 1.9 基于JQuery Mobile的简单相册

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"使弹出的对话框位于屏幕正中，而不是位于呼出这个对话框的按钮附近。

这篇关于【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

jQuery教程

【JQuery Mobile移动应用开发实战】JQuery Mobile基础——页面与对话框

文章目录

JQuery Mobile基础

1. 页面与对话框

1.1 简单的helloworld

1.2 利用JQuery脚本DIY闪光灯效果

1.3 不断切换的场景

1.4 整人游戏

1.5 手机被入侵页面框案例

1.6 实现渐变背景

1.7 另一种对话框

1.8 对话框的高级属性

1.9 基于JQuery Mobile的简单相册

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯