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

2022/2/3 23:15:20

本文主要是介绍【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基础——页面与对话框的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程