1.环境配置:
jQuery Mobile最新版本为v1.4.5,而jQuery最新版本为v3.5.1,但根据官网资料,jQuery Mobile v1.4.5支持jQuery v1.8〜v1.11与v2.1:
下载页建议使用jQuery的v1.11.1:
# https://jquerymobile.com/download/
解压缩后将jQuery的,jQuery Mobile的JS之程式码与CSS样式档分别复制到专案资料夹的JS与CSS的子目录下:
的jquery-1.11.1.min.js(94KB)
jquery.mobile-1.4.5.min.js(196KB)
jquery.mobile-1.4.5.min.css(203KB)
$(function(){ }); </ script> </ body> </ html> 利用CDN供档即无需准备执行环境,CDN的网页模板如下: <!DOCTYPE html>
<html>
<head>
<title> </ title>
<meta charset =“ utf-8”>
<meta http-equiv =“ cache-control” content =“ no-cache”>
<meta name =“ viewport”内容=“ width = device-width,initial-scale = 1”>
<script src =“ http://code.jquery.com/jquery-1.11.1.min.js”> </ script>
<script src =“ http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“> </ script>
<link href =” http://code.jquery.com/mobile/ 1.4.5 / jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
</ head>
<body>
<script>
$(function(){
});
</ script>
</ body>
</ html>
注意,如果是HTTPS网站,则CDN的URL也要改成https开头。
2.网页架构:
jQuery Mobile的Web应用程序网页以两层div元素搭配data-role属性建立行动网页之页结构,行动网页内容可分散在不同HTML档,也可以整合在一个HTML档案内,透过超几乎不用写一行程式码即可建立漂亮的行动网页使用者介面。
jQuery Mobile依据HTML5制定了data-role属性,其值如下表所示:
关于jQueryMobile的数据-XXX属性参考:
# https://api.jquerymobile.com/data-attribute/
基本的页面结构分成报头(页首或标题),内容(内容),以及页脚(页尾或注脚)三个部分:
<div data-role =“ page ”>
<div data-role =“标头”>
<h1>页首</ h1>
</ div>
<div data-role =“ content ”>
<p>内容</ p>
</ div>
<div data-role =“ footer ”>
<h3>页尾</ h3>
</ div>
</ div>
目前手机浏览器都已支持HTML5,故可将上面的div改成HTML5如下的语意标签:
<section data-role =“ page ”>
<header data-role =“ header ”>
<h1>页首</ h1>
</ header>
<article data-role =“ content ”>
<p>内容</ p>
</ article>
<footer data-role =“ footer ”>
<h3>页尾</ h3>
</ footer>
</ section>
其中内容是必要的部分,页眉与页脚则是可有可无。header用作放置页面标题,通常使用h1〜h6元素来替换标题文字,如果文字太长,则后面无法显示的部分会以“ …”缩略。内容已呈现文字,图片,视讯等主体资讯,页脚部分通常放置放置作者,公司,或版权资讯。
多档案架构:
如果网页内容太多,可分割成多个HTML档案页中,以元素的href属性切换:
<a href="page2.htm" data-ajax="false">第二页< / a>
注意,因为jQuery Mobile是以Ajax方式加载网页,而Ajax不支持加载本地档案,因此这里超连结必须加入data-ajax属性设置为其false(设定为true),否则会出现“错误加载页面”错误消息,超连结a元素在jQuery Mobile中扮演了关键的页面切换角色,jQuery Mobile定义了一些data-开头之属性,如下表所示:
例如下面的测试1有三个网页档:
测试1: 多档案换页
第一页:jqueryuimobile_test_1_1.htm
<!DOCTYPE html>
<html>
<head>
<title> </ title>
<meta charset =“ utf-8”>
<meta http-equiv =“ cache-control” content =“ no-cache”>
<meta名称=“ viewport” content =“ width = device-width,initial-scale = 1”>
<script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
<script src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ script>
<link href =“ https://code.jquery .com / mobile / 1.4.5 / jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
</ head>
<body>
<section data-role =” page“>
<header data-role =“ header”>
<h1>第一页</ h1>
</ header>
<article data-role =“ content”>
<a href="jqueryuimobile_test_1_2.htm" data-ajax="false">第二页</a> <br>
<a href="jqueryuimobile_test_1_3.htm" data-ajax="false">第三页</ a >
</ article>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<script>
$(function(){
});
</ script>
</ body>
</ html>
第二页:jqueryuimobile_test_1_2.htm
<!DOCTYPE html>
<html>
<head>
<title> </ title>
<meta charset =“ utf-8”>
<meta http-equiv =“ cache-control” content =“ no -cache“>
<meta name =” viewport“ content =” width = device-width,initial-scale = 1“>
<script src =” https://code.jquery.com/jquery-1.11.1.min。 js“> </ script>
<script src =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“> </ script>
<link href =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
</ head>
<body>
<section data-role =“ page”>
<header data-role =“ header”>
<h1>第二页</ h1>
</ header>
<article data-role =“ content”>
<a href="jqueryuimobile_test_1_1.htm" data-ajax="false">第一页</a>
</ article>
<footer data-role =“ footer”>
<h3 >页尾</ h3>
</ footer>
</ section>
<script>
$(function(){
});
</ script>
</ body>
</ html>
第三页:jqueryuimobile_test_1_3.htm
<!DOCTYPE html>
<html>
<head>
<title> </ title>
<meta charset =“ utf-8”>
<meta http -equiv =“
<script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
<script src =“ https://code.jquery.com/mobile/1.4.5 /jquery.mobile-1.4.5.min.js“> </ script>
<link href =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css “ rel =” stylesheet“>
</ head>
<body>
<section data-role =” page“>
<header data-role =” header“>
<h1>第三页</ h1>
</ header>
<文章数据角色= “内容”>
<a href="jqueryuimobile_test_1_1.htm" data-ajax="false">第一页</A>
</文章>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<script>
$(function(){
});
</ script>
</ body>
</ html>
浏览首页jqueryuimobile_test_1_1.htm按内容区的“第二页”,“第三页”超连结会分别加载jqueryuimobile_test_1_2.htm与jqueryuimobile_test_1_3.htm,结果如下:
注意,这种多档方式有三个限制:
不可连结至其他网域之档案
连结之档案只能有单一页面
a元素不可以有target属性
也可将多页内容整合到单一档案中方便管理,每一个页面的div都需指定id属性值,jQuery Mobile就是以页面的id属性作为锚点,利用元素的href切换不同之锚点id达到页面切换之效果。
例如在第一页的超连结中设置href指向第二页页面的(id = page2):
<a href=" #page2 ">第二页</a> <br>
则按此超连结就会切换到第二页:
<section data-role =“ page” id =“ page2” >
例如上面的三档案范例可以整合到以下范例的单一档案中:
测试2: 单档案换页
<!DOCTYPE html>
<html>
<head>
<title> </ title>
<meta charset =“ utf-8”>
<meta http-equiv =“ cache-control” content =“ no-cache”>
<元名称=“ viewport” content =“ width = device-width,initial-scale = 1”>
<script src =“ https://code.jquery.com/jquery-1.11。 1.min.js“> </ script>
<script src =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“> </ script>
<链接href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
</ head>
<body>
<!-第一页页面->
<section data-role =“ page” id =“ page1” >
<header data-role =“ header”>
<h1>第一页</ h1>
</ header>
<article data-role =“ content”>
<a href=" #page2 ">第二页</a> <br>
<a href=" #page3 ">第三页</a>
</ article>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<!-第二页页面->
<section data-role =“ page” id =“ page2” >
<header data-role =“ header”>
<h1>第二页</ h1>
</ header>
<article data-role =“ content”>
<a href=" #page1 ">第一页</a>
</ article>
$(function(){ }); </ script> </ body> </ html>
3.回上一页按钮:
在上面的范例中,用超连结来操作回上一页不甚方便,若超连结文字太短可能不好按。其实jQuery Mobile提供了两个data-xxx属性,可用来在标题列左上角添加Back按钮:
data-add-back-btn:设置是否要添加回上一页按钮,值=“ true”,“ false”(预定)
data-back-btn-text:设置返回上一页按钮上的文字,值预设为“后退”
不过要注意的是,在jQuery Mobile 1.4之前,此属性是加在页面div元素中,而在1.4版后则必须要放在header中才会有效,而且放在首页无效,只有在非首页页面才会出现,这样,这两个属性只能放在header标题列,放在footer注脚列无效。
例如:
测试3: 标题列header上的返回按钮
<!DOCTYPE html>
<html>
<head>
<title> </ title>
<meta charset =“ utf-8”>
<meta http-equiv =“ cache-control” content =“ no-cache”>
<元名称=“ viewport” content =“ width = device-width,initial-scale = 1”>
<script src =“ https://code.jquery。 com / jquery-1.11.1.min.js“> </ script>
<script src =” https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js“ > </ script>
<link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
</ head>
<body>
<!-第一页页面->
<section data-role =“ page” id =“ page1”>
<header data-role =“ header”>
<h1>第一页</ h1>
</ header>
<article data-role =“ content”>
<a href="#page2">第二页</a> <br>
<a href="#page3">第三页</a>
</ article>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<!-第二页页面->
<section data-role =“ page” id =“ page2”>
<header data-role =“ header” data-add-back-btn =“ true” >
<h1>第二页</ h1>
</ header>
<article data-role =“ content”>
<a href="#page1">第一页</a>
</ article>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<!-第三页页面->
<section data-role =“ page” id =“ page3”>
<header data-role =“标头” data-add-back-btn =“ true” >
<h1>第三页</ h1>
</ header>
<article data-role =“ content”>
<a href="#page1">第一页</a>
</ article>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<script>
$(function(){
});
</ script>
</ body>
</ html>
此例中在第二页与第三页的header部分加入data-add-back-btn =“ true”后,结果这两个页面标题列左边就会出现一个“ Back”按钮,结果如下:
可见标题列的回上一页按钮预设显示“返回”,但可以使用data-back-btn-text属性设置,例如:
测试4: 自订标题列header上的返回按钮文字
< !DOCTYPE html>
<html>
<head>
<title> </ title>
<meta charset =“ utf-8”>
<meta http-equiv =“ cache-control” content =“ no-cache”>
<meta name = “视口” content =“ width = device-width,initial-scale = 1”>
<script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
<脚本src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ script>
<link href =“ https://code.jquery。 com / mobile / 1。4.5 / jquery.mobile-1.4.5.min.css“ rel =” stylesheet“>
</ head>
<body>
<!-第一页页面->
<section data-role =“ page” id =“ page1”>
<header data-role =“ header”>
<h1>第一页</ h1>
</ header>
<article data-role =“ content”>
< a href =“#page2”>第二页</a> <br>
<a href="#page3">第三页</a>
</ art >>
<footer data-role =“ footer”>
<h3 >页尾</ h3>
</ footer>
</ section>
<!-第二页页面->
<section data-role =“ page” id =“ page2”>
<header data-role =“ header” data-add-back-btn =“ true”data-back-btn-text =“返回” >
<h1>第二页</ h1>
</ header>
<article data-role =“ content”>
<a href="#page1">第一页</一个>
</ section> <script> $(function(){ }); </ script> </ body> </ html>
结果如下:
4.固定标题列与
注脚列: 由上述范例可知,页尾标题列时间表是紧随在内容区后面,当内容很长必须用卷轴卷动时,标题列与注脚列可能会从页面中消失,如果页首与页尾上有放置导览按钮(例如上面范例中的返回按钮),操作起来就不太方便,这可用data-position =“ fixed”属性设置解决,只要为标题列与注脚列天加此属性,就可以将标题列固定在最上方,注脚列固定在最下方,例如:
测试5: 固定标题列与注脚列
<!DOCTYPE html>
<html>
<head>
<title > </ title>
<meta charset =“ utf-8”>
<meta http-equiv =“ cache-control” content =“ no-cache”>
<meta name =“ viewport” content =“ width = device-width, initial-scale = 1“>
<script src =” https://code.jquery.com/jquery-1.11.1.min.js“> </ script>
<script src =” https://code.jquery。
<link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
</ head>
<body>
<!-第一页页面->
<节data-role =“ page” id =“ page1”>
<header data-role =“ header” data-position =“ fixed” >
<h1>第一页</ h1>
< / header>
<article data-role =“ content”>
<a href="#page2">第二页</a> <br>
<a href="#page3">第三页</a>
</文章>
<footer data-role =“ footer” data-position =“ fixed” >
<h3>页尾</ h3>
</ footer>
</ section>
<!-第二页页面->
<section data-role =“ page” id =“ page2”>
<header data-role =“ header” data-add-back-btn =“ true” data-back-btn-text =“返回” data-position =“ fixed” >
<h1>第二页</ h1>
< / header>
<article data-role =“ content”>
<a href="#page1">第一页</a>
</ article>
<footer data-role =“ footer” data-position =“ fixed” >
<h3>页尾</ h3>
</ footer>
</ section>
<!-第三页页面->
<section data-role =“ page” id =“ page3”>
<header data-role =“标头” data-add-back-btn =“ true”data-back-btn-text =“返回” data-position =“ fixed” >
<h1>第三页</ h1>
</ header>
<article data-role =“ content”>
<a href="#page1">第一页</a>
</ art >>
<footer data-role =“ footer” data-position =“ fixed” >
<h3>页尾</ h3>
</ footer>
</ section>
<script>
$(function(){
});
</ script>
</ body>
</ html>
此例每个页面的标题列与注脚列都加上data-position =“ fixed”属性,结果如下:
5.预设Ajax换页:
jQuery Mobile网页在载入时是同时加载全部页面,但仅显示第一页,其他页面是放在页面池中暂存,按超连结按钮进行换页时时序是使用Ajax模式从页面池中取得目标页面,原页面则加入页面池中暂存,几乎作法可增加页面加载速度,这对静态页面没有问题,但对动态须更新数据的页面就会产生数据不即时问题,这时可用数据-ajax =“ false”关闭预设之Ajax功能来解决,例如:
测试6: 消超连结的Ajax加载功能
<!DOCTYPE html>
<html>
<头>
<title> </ title>
<meta charset =“ utf-8”>
<meta http-equiv =“ cache-control” content =“ no-cache”>
<meta name =“ viewport” content =“ width = device-width,initial-scale = 1”>
<script src =“ https://code.jquery.com/jquery-1.11.1.min.js”> </ script>
<script src =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js”> </ script>
<link href =“ https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css” rel =“ stylesheet”>
</ head>
<身体>
<!-第一页页面->
<section data-role =“ page” id =“ page1”>
<header data-role =“ header”>
<h1>第一页</ h1>
</ header>
<article data-role =“ content”>
<a href="#page2">第二页</a> <br>
<a href="#page3" data-ajax="false">第三页</a>
</ article>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<!-第二页页面->
<section data-role =“ page” id =“ page2”>
<header data-role =“ header” data-add-back-btn =“ true” >
<h1>第二页</ h1>
</ header>
<article data-role =“ content”>
<a href="#page1">第一页</a>
</ article>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<!-第三页页面->
<section data-role =“ page” id =“ page3”>
<header data-role =“ header” data-add-back-btn =“ true” >
<h1>第三页</ h1>
</ header>
<article data-role =“ content”>
<a href="#page1">第一页</a>
</ article>
<footer data-role =“ footer”>
<h3>页尾</ h3>
</ footer>
</ section>
<脚本>
$(function(){
});
</ script>
</ body>
</ html>
此例在page1页面中有两个超连结按钮,前往page2者使用预设的Ajax模式加载第二页,而前往page3者使用data-ajax =“ false”关闭Ajax功能,结果如下:
可见因为到page2的按钮维持预设的Ajax模式加载,故在第二页中可看到返回按钮; 而到page3的页面取消了Ajax功能重新加载该页面,导致没有显示返回按钮。