【JQuery Mobile移动应用开发实战】JQuery Mobile基础—

文章目录

- 2. 工具栏的使用
- - 2.1 稍微复杂的界面
  - 2.2 方便的快捷键
  - 2.3 失效的按钮
  - 2.4 导航栏的应用
  - 2.5 导航栏的全屏属性
  - 2.6 内容栏的使用
  - 2.7 会弹出的面板

2. 工具栏的使用

本章节主要介绍JQuery Mobile开发中用于实现导航功能的控件，一般称之为工具栏。工具栏主要包括头部栏和尾部栏，它们常被固定在屏幕的上下两侧，用来实现返回功能和各功能模块间的切换，对于界面美化也有重要的作用。JQuery Mobile是专为移动Web端设计的开发工具，因此想要使移动App用户得到更好的用户体验，就需要使用工具栏的一些高级属性。

主要知识点包括：

将头部栏和尾部栏分别固定在屏幕上下两端的方法
设计流行的滑动门布局
面板控件的使用方法

2.1 稍微复杂的界面

无论是网站还是应用，在屏幕的上下两端总有一些固定的栏目，一般被称为顶部栏和尾部栏。

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>     
</head>               
<body><div data-role="page"><div data-role="header"><h1>头部栏</h1></div><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><div data-role="footer"><h1>尾部栏</h1></div></div>
</body>
</html>

运行结果如下所示：
在这里插入图片描述
当页面内容超出屏幕范围时，屏幕中仅能显示页面中的一部分内容，和传统的Web页面一样，JQuery Mobile也是默认先显示页面的顶端部分。

PC端上测试程序时，可以发现标题为头部栏，但代码中没有title标签，是因为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"/>  
<!--<script src="cordova.js"></script>-->   
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>       
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed"><h1>头部栏</h1></div><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><h1>在页面中加入工具栏</h1><div data-role="footer"  data-position="fixed"><h1>尾部栏</h1></div></div>
</body>
</html>

data-position="fixed"属性将头部栏和尾部栏固定。

2.2 方便的快捷键

头部栏的返回键：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>       
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed"><a href="#">返回</a>    <h1>头部栏</h1>    <a href="#">设置</a></div><h1>有按钮的头部栏</h1><div data-role="footer" data-position="fixed"><h1>底部栏</h1>    </div></div>
</body>
</html>

效果如下：
在这里插入图片描述
在图中发现头部栏多了两个按钮，头部栏的按钮与真正的按钮有区别。

首先，在头部栏使用标签< a >后，标签的内容自动转化为按钮的样式。其次，在头部栏中使用按钮，将会自动与标题等内容排成一行而不是一行一行显示。

(本范例中并没有为按钮加入链接，在这种情况下(专指在头部栏中的按钮)会默认被渲染成“返回”键的功能)

2.3 失效的按钮

只要在头部栏加入标签< a >就能被自动渲染成按钮的样子。但是有的时候不需要这些样式，就需要让按钮失效：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>       
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed"><div><a href="#">返回</a>    <h1>头部栏</h1>    <a href="#">设置</a></div></div><h1>按钮的样式消失了</h1><div data-role="footer" data-position="fixed"><h1>底部栏</h1>    </div></div>
</body>
</html>

效果如下：
在这里插入图片描述
通过对比发现，头部栏原本是按钮的地方变成了链接的样式，发现头部栏又加了一个< div >标签。

在JQuery Mobile中有时会出现某些标签被默认渲染成某种样式的情况(比如头部栏的< a >标签)。如果不想使用这种样式，则可以试着在该标签外套一个< div >(或是其他对页面没有影响的标签)。

2.4 导航栏的应用

在移动应用中常常会看到选项卡，比如QQ和微信的底部。选项卡常常作为一款应用的导航，使用这样的导航栏能使在手机屏幕面积有限的情况下实现更多功能。

导航栏的使用：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>         
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed">    <a href="#">返回</a>    <h1>头部栏</h1>    <a href="#">设置</a></div><div data-role="content"><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1></div><div data-role="footer" data-position="fixed"><div  data-role="navbar">    <ul>        <li><a id="weixin" href="#" data-icon="plus" data-theme="b">微信</a></li>        <li><a id="tongxun" href="#" data-icon="plus" data-theme="b">通讯录</a></li>        <li><a id="friend" href="#" data-icon="plus" data-theme="b">找朋友</a></li>    <li><a id="set" href="#" data-icon="plus" data-theme="b">设置</a></li>       </ul>    </div></div></div>
</body>
</html>

效果如下：
在这里插入图片描述
在尾部栏加入< div data-role=“navbar” >标签。在这个标签中嵌套使用了< ul >和< li >标签，使导航栏自动分成四栏。

(分栏的数目根据标签< li >的数目决定，最多不超过五栏)

实际上按照JQuery Mobile API上的规定，应当在navbar控件中加入一组属性来标识导航栏分为几栏：

<div  data-role="navbar" data-grid="c">

其中data-grid="c"表示将导航栏分为四部分，以此类推“a”表示两部分。当分栏数目大于5时导航栏自动分为多行。

在navbar中继续使用标签< a >同样可以让标签中的内容自动渲染为按钮，但是上图中按钮与之前不同，因为它带上了图标。data-icon="plus"表示图标为加号。

2.5 导航栏的全屏属性

.ui-header-fixed,.ui-footer-fixed{left:0;right:0;width:100%;position:fixed;z-index:1000}
.ui-header-fixed{top:-1px;padding-top:1px}
.ui-header-fixed.ui-fixed-hidden{top:0;padding-top:0}
.ui-footer-fixed{bottom:-1px;padding-bottom:1px}
.ui-footer-fixed.ui-fixed-hidden{bottom:0;padding-bottom:0}
.ui-header-fullscreen,.ui-footer-fullscreen{filter:Alpha(Opacity=90);opacity:.9}
.ui-page-header-fixed{padding-top:2.6875em}
.ui-page-footer-fixed{padding-bottom:2.6875em}

上述代码第六行设定了某种样式下的头部栏和尾部栏要保持一定的透明度。原来导航栏还有一个data-fullscreen的属性。

例：

<!DOCTYPE html>     <head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>    
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed" data-fullscreen="true">    <a href="#">返回</a>    <h1>头部栏</h1>    <a href="#">设置</a></div><div data-role="content"><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1><h1>导航栏的使用</h1></div><div data-role="footer" data-position="fixed" data-fullscreen="true"><div  data-role="navbar">    <ul>        <li><a id="weixin" href="#" data-icon="plus">微信</a></li>        <li><a id="tongxun" href="#" data-icon="plus">通讯录</a></li>        <li><a id="friend" href="#" data-icon="plus">找朋友</a></li>    <li><a id="set" href="#" data-icon="plus">设置</a></li>       </ul>    </div></div></div>
</body>
</html>

效果如下：
在这里插入图片描述

2.6 内容栏的使用

在页面中加入内容栏：

<!DOCTYPE html>     										<!--声明HTML 5--><head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <!--声明编码方式-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   						<!--备用生成APP的JS文件-->
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>   					<!--引入jQuery Mobile脚本-->
</head>               
<body><div data-role="page"><div data-role="header" data-position="fixed">    			<!--头部栏--><a href="#">返回</a>    <h1>头部栏</h1>    <a href="#">设置</a></div><div data-role="content">								<!--内容栏--><h1>内容栏的使用</h1><h1>内容栏的使用</h1><h1>内容栏的使用</h1><h1>内容栏的使用</h1><h1>内容栏的使用</h1><h1>内容栏的使用</h1><h1>内容栏的使用</h1><h1>内容栏的使用</h1><h1>内容栏的使用</h1><h1>内容栏的使用</h1></div><div data-role="footer" data-position="fixed">				<!--尾部栏--><div  data-role="navbar">    <ul>        <li><a id="weixin" href="#" data-icon="plus">微信</a></li>        <li><a id="tongxun" href="#" data-icon="plus">通讯录</a></li>        <li><a id="friend" href="#" data-icon="plus">找朋友</a></li>    <li><a id="set" href="#" data-icon="plus">设置</a></li>       </ul>    </div></div></div>
</body>
</html>

运行结果如下：
在这里插入图片描述
会发现比之前多了左侧页边距以及与头部栏底端有了距离。

2.7 会弹出的面板

会弹出的工具栏：

<!DOCTYPE html>     										<!--声明HTML 5--><head>     
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   <!--声明编码方式-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>  
<!--<script src="cordova.js"></script>-->   						<!--备用生成APP的JS文件-->
<link rel="stylesheet" href="../css/jquery.mobile-1.4.5.min.css" />     
<script src="../script/jquery-2.1.4.min.js"></script>     
<script src="../script/jquery.mobile-1.4.5.min.js"></script>    					<!--引入jQuery Mobile脚本-->
<script>$( "#mypanel" ).trigger( "updatelayout" );                  //       <!--对面板进行声明-->
</script> 
</head>               
<body><div data-role="page"><div data-role="panel" id="mypanel">					<!--这个就是面板--><h4>这个就是面板</h4>							<!--面板中加入内容--></div><div data-role="header" data-position="fixed"><a href="#mypanel">打开</a>    <h1>头部栏</h1>    <a href="#">隐藏</a></div><div data-role="content"><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1><h1>面板可以弹出</h1></div><div data-role="footer" data-position="fixed"><div data-role="navbar"><ul><li><a id="chat" href="#" data-icon="plus">微信</a></li>        <li><a id="email" href="#" data-icon="plus">通讯录</a></li>        <li><a id="skull" href="#" data-icon="plus">找朋友</a></li>        <li><a id="beer" href="#" data-icon="plus">设置</a></li>         </ul></div></div></div>
</body>
</html>

效果如下：
在这里插入图片描述

面板控件的使用：

在页面的任意位置(必须在page标签内以及头部栏和尾部栏外)加入一个面板控件，在面板控件可以像一般页面一样添加内容。
给面板控件设置一个id，如本例的id为mypanel。
插入一段JavaScript代码，声明该控件。
在页面中选择一个用于打开面板的按钮，并将链接指向的地址改为该控件的id，并且不要忘记在id前加入"#"。
根据需要来设置面板的高级属性，如是否需要加入动画或者面板处于屏幕的左侧还是右侧，本例选择了默认属性，即面板在左侧出现。

下面给出关闭面板的方法：

在面板控件添加一组属性data-swipe-close=“false”；
在面板中加入一个按钮控件，如< a href="#" data-rel=“close” data-role=“button” >关闭面板< /a >。单击该按钮时进行关闭。该按钮必须放置在面板中，因为当面板被激活时面板外的按钮是无效的。

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

云炬金融每日一题20210919
自由浮动：又称“清洁浮动"，是指政府对外汇市场不加任何干预，完全听任外汇市场供求状况自发地决定本国货币的对外汇率。这种汇率制度在第一次世界大战以后曾短暂地被某些西方国家采用过，但实施的结果是汇率波动频繁而剧烈&…...
2024/4/13 17:19:35
DTMF的原理：为什么选择这些频率？
简介： 通过一个简单的实验来验证一下为什么DTMF的频率选取这些数值的频率。它们的存在使得低频频的二倍频与高频频率的差异达到最小。具体原因可以通过Bell实验室的报告进行检索，回答为什么DTMF这样选择频率。关键词： DTMF，谐波…...
2024/4/18 17:28:26
mtcnn_pytorch完美复现
一、算法介绍 MTCNN，Multi-task convolutional neural network（多任务卷积神经网络），将人脸区域检测与人脸关键点检测放在了一起，它的主题框架类似于cascade。总体可分为P-Net、R-Net、和O-Net三层网络结构。二、实…...
2024/4/27 13:28:21
工业元宇宙的解读第3版
工业元宇宙可以理解为元宇宙在工业领域的应用与发展，也可以理解成是元宇宙的一部分，或者说是微观、中观的元宇宙。工业元宇宙是目前三维设计、虚拟现实、增强现实、人工智能、数据孪生、物联网、5G网络、大数据、云计算等新兴技术的发展优化乃至升级并有…...
2024/4/27 13:57:52
LeetCode 热题 HOT 100 第29天：“爬楼梯”
继续刷LeetCode 热题 HOT 100 的题目，并且在博客更新我的solutions。在csdn博客中我会尽量用文字解释清楚，相关Java代码大家可以前往我的个人博客jinhuaiyu.com中查看。题目：爬楼梯假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以…...
2024/4/27 16:20:11
软件开发的流程是怎样的？
1、我们在做一个项目之前，首先是要和客户进行交流，和客户交流的目的是什么？就是要了解用户的需要，根据客户的需要做出一个软件要实现的基本功能，这个也称之为客户需要分析。这一步在整个的开发流程中是非常重要的&…...
2024/4/27 20:01:43
LeetCode算法入门之双指针—977. 有序数组的平方
给你一个按非递减顺序排序的整数数组 nums，返回每个数字的平方组成的新数组，要求也按非递减顺序排序。示例 1：输入：nums [-4,-1,0,3,10] 输出：[0,1,9,16,100] 解释：平方后，数组变为 [16,1…...
2024/4/27 15:37:08
VS Code 字体推荐
1、推荐字体 ( 排名不分先后 ) ① Consolas ② Roboto Mono ③ Monaco ④ Office Code Pro ⑤ Fira Code ⑥ Source Code Pro 7. Hack ⑧ JetBrains Mono 2、以上字体已整理打包, 需要的朋友可以点此下载: fonts_for_code.zip(640KB) 3、如果希望测试更多的编程字体,…...
2024/4/27 14:56:22
serverlet的生命周期？
Servlet运行在Servlet容器中，其生命周期由容器来管理。Servlet的生命周期通过javax.servlet.Servlet接口中的init()、service()和destroy()方法来表示。 Servlet的生命周期包含了下面4个阶段： （1）加载和实例化 Servlet容器负责…...
2024/4/27 15:24:56
【从零开始的嵌入式生活】LinuxC语言——shell命令
前言今天是2021年的第三天，差点就断更了呀，我放弃了LOL陪大家一起学习0.0。三连即可提高学习效率0.0 🧑🏻作者简介：一个学嵌入式的年轻人 ✨联系方式：2201891280(QQ) 📔源码地址：…...
2024/4/27 13:26:15
[剑指 Offer 50. 第一个只出现一次的字符]
[剑指 Offer 50. 第一个只出现一次的字符] 题解： 寻找字符串中仅出现一次的字符，如果有多个仅出现一次的字符就选取的一个。解法： 方法一：（垃圾解法，很菜，但思路和官方差不多） …...
2024/4/27 20:46:36
AM335x片上ecap驱动移植
基于AM335x移植ecap驱动，驱动出至一下链接。 https://github.com/teknoman117/beaglebot 移植完成后出现不能操作相关寄存器的现象，后面发现是ECAP的时钟没有打开，现象如下。在ecap的上游设备pwmss，加入以下电源管理的代码&…...
2024/4/27 19:40:38
C++学习——模板与泛型编程
C学习——模板与泛型编程定义模板函数模板类模板模板参数成员模板控制实例化模板实参推断类型转换与模板类型参数函数模板显式实参函数指针和实参推断定义模板函数模板可以定义一个通用的函数模板，而不是为每个类型都定义一个新函数。一个函数模板就是一个公式…...
2024/4/27 19:12:34
极简hooks实现，与react的思路一样的useState
使用App函数模拟根组件 function App() {const [num, updateNum] useState(0);console.log(${isMount ? "mount" : "update"} num: , num);button.textContent num;return {click() {updateNum((num) > num 1);updateNum((num) > num 1);},};}使…...
2024/4/27 13:31:11
MYSQL 寒假自学 2022 八（一）
-- 分页查询 -- 1，查询product的前五条记录 select * from product limit 5; -- 2，从第四条开始，显示五条 select * from product limit 3,5;-- 3，分页显示 select * from product limit 0,60;# 第一页 select * from product l…...
2024/4/27 20:14:44
c#：Task.Run() 和 Task.Factory.StartNew()有何不同
待续。。。 internal class Program {static void Main(string[] args){var counter 0;var list new List<int>();var tasks new List<Task>();for (int i 0; i < 10; i){var task Task.Factory.StartNew(async () >{await Task.Delay(1000);var tmp …...
2024/4/29 3:46:13
基于resnet训练flower图像分类模型（p31-p37）
概述本文属于跟着b站学习pytorch笔记系列。网上很多大佬关于renet模型图像识别的分类文章很多，但是图像部分通常就是一笔带过，给个链接。还是看了知乎的文章从头准备了数据集。一数据集准备该数据集由102类产自英国的花卉组成。每类由40-258张图片…...
2024/4/27 16:42:58
LeetCode算法入门之二分查找—35. 搜索插入位置
给定一个排序数组和一个目标值，在数组中找到目标值，并返回其索引。如果目标值不存在于数组中，返回它将会被按顺序插入的位置。请必须使用时间复杂度为 O(log n) 的算法。示例 1: 输入: nums [1,3,5,6], target 5 输出: 2示例 2: 输入: num…...
2024/4/27 21:06:06
pandas行/列删除
pandas.DataFrame.drop()函数介绍官方文档：pandas.DataFrame.drop DataFrame.drop(labelsNone, axis0, indexNone, columnsNone, levelNone, inplaceFalse, errors‘raise’) labels: 要删除的行标签/列标签axis：默认取0删除行，取1删除列in…...
2024/4/27 20:24:33
GAMES101第四讲Transformation Cont.笔记
变换2一、3D变换（3D Transformations）二、观测变换（Viewing Transformation）三、View（视图）/Camera transformation四、投影变换（Projection Transformation）五、正交投影&#xff0…...
2024/4/27 18:14:22

【JQuery Mobile移动应用开发实战】JQuery Mobile基础——工具栏的使用