ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

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

2022-02-03 22:02:47  阅读：136  来源： 互联网

标签：JQuery 对话框 Mobile Close div 页面


文章目录

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,Close,div,页面
来源： https://blog.csdn.net/lht964249279/article/details/122779228

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有