第1章 初识JQuery Mobile
1.1 安装JQuery mobile 环境 1.2 开发第一个JQuery Mobile 页面 第2章 HTML5基础 第3章 设计页面和对话框
3.1 设计页面
3.1.1 定义单页 3.1.2 定义多页 3.1.3 定义外部页 3.2 设计对话框
3.2.1 定义对话框 3.2.2 定义关闭对话框 第4章 页面高级设计
4.1 页面初始化 4.2 预加载和缓存
4.2.1 页面预加载 4.2.2 页面缓存 4.3 使用锚记
4.3.1 在单页视图中定义锚记 4.3.2 在多页视图中定义锚记 4.4 传递参数
4.4.1 以GET方式传递参数 4.4.2 通过HTML5 Web Storage 传递参数 4.6 实战练习
4.6.1 记事本 第5章 设计弹出页面
5.1 定义弹出页面 5.2 使用弹出页面
5.2.1 菜单和嵌套菜单
第1章 初识JQuery Mobile
1.1 安装JQuery mobile 环境
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
1.2 开发第一个JQuery Mobile 页面
新建一个HTML文件，在<head>中添加3个JQuery Mobile框架文件在标签<body>中通过<div>定义移动页面的结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>页标题</h1>
</div>
<div data-role="content">
<p><a href="#" data-rel="dialog">弹出菜单</a></p>
</div>
<div data-role="footer">
<h3>页脚</h3>
</div>
</div>
</div>
</body>
</html>
效果图如图所示：
第2章 HTML5基础
本章单独编写，这里不做介绍
第3章 设计页面和对话框
3.1 设计页面
3.1.1 定义单页
根据第1章的建立JQuery Mobile 页面的方法，新建HTML文件
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
页标题
</div>
<div data-role="content">
页面内容
</div>
<div data-role="footer">
页脚
</div>
</div>
</body>
</html>
效果图如下： 这里说明下几个重要的参数说明：
参数说明
page页面容器，其内部的mobile元素将继承这个容器上所设置的属性header页面标题容器，可以包含文字、按钮元素footer页面页脚容器，可以包含文字、按钮元素content页面内容容器，主容器，包含页面的大部分内容controlgroup将几个元素设置成一组，一般是几个同类型的元素fieldcontain区域包裹容器，用增加编剧和分割线的方法将容器内的元素和容器外的元素分割navbar功能导航容器，简单说就是工具条listview列表展示容器list-divider列表展示容器的表头，用来展示一组列表的吧标题，内部不可包含链接button按钮none阻止框架进行渲染，一般用于form元素
3.1.2 定义多页
新建HTML文件，导入JQuery Mobile框架
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
配置页面视图，确保在不同设备中都是满屏显示 <meta name="viewport" content="width=device-width,initial-scale=1"/>
完成剩余代码
<body>
<div data-role="page" id="home">
<div data-role="header">
页标题
</div>
<div data-role="content">
<p><a href="#new1"> JQuery Mobile 1.4.0发布</a></p>
</div>
<div data-role="footer">
<h4>@2015 jm.cn studio</h4>
</div>
</div>
<div data-role="page" id="new1">
<div data-role="header">
页标题
</div>
<div data-role="content">
<h1>这是另一个页面</h1>
</div>
<div data-role="footer">
页脚
</div>
</div>
</body>
效果图： 点击链接之后跳转到下一个页面
3.1.3 定义外部页
将标注出来的地方改为外部页面，如page2.html，即可实现点击跳转到page2界面上
3.2 设计对话框
3.2.1 定义对话框
新建一个HTML文件，导入框架文件，在跳转链接的添加data-rel="dialog"即可实现弹出对话框页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>弹出菜单练习</h1>
</div>
<div data-role="content">
<p><a href="#page2" data-rel="dialog">弹出菜单</a></p>
</div>
<div data-role="footer">
<h3>@2018 Fisher</h3>
</div>
</div>
<div id="page2">
<div data-role="header">
<h1>页标题</h1>
</div>
<div data-role="content">
<p>这是一个弹出式菜单</p>
</div>
<div data-role="footer">
<p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>
</div>
</div>
</body>
</html>
效果图： 下一步：点击弹出菜单
3.2.2 定义关闭对话框
上图中的关闭按钮在<footer>中添加的，所以关闭按钮在页脚位置，如果将按钮添加在<content>中，效果如下： 具体代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="page1" data-role="page">
<div data-role="header">
<h1>弹出菜单练习</h1>
</div>
<div data-role="content">
<p><a href="#page2" data-rel="dialog">弹出菜单</a></p>
</div>
<div data-role="footer">
<h3>@2018 Fisher</h3>
</div>
</div>
<div id="page2">
<div data-role="header">
<h1>页标题</h1>
</div>
<div data-role="content">
<p>这是一个弹出式菜单</p>
<p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>
</div>
<div data-role="footer">
<!--<p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>-->
</div>
</div>
</body>
</html>
第4章 页面高级设计
4.1 页面初始化
在JQuery Mobile中，这3种初始化时间是有区别的，具体说明如下。
mobileinit：启动JQuery Mobile时触发该事件。$(docunment).ready()：HTML页面DOM对象加载完成时触发此事件。pageinit：初始化完成某个视图页面是，触发此事件。
初始化事件的触发顺序如下。 第1步，首先触发mobileinit。 第2步，触发$(docunment).ready()。 第3步，每当第一次打开某个视图页面时，触发pageinit事件。例如，打开第一个视图页面时，会触发其pageinit事件；当跳转到第二个视图页面时，会触发第二个页面的pageinit事件。
mobileinit、$(document).ready()和pageinit只能触发一次
代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function () {
alert("触发ready事件");
/*$(document).live("mobileinit", function () {
alert("触发mobileinit事件");
});//live方法无效,弃用live改为on*/
$(document).on("mobileinit", function () {
alert("触发mobileinit事件");
$(document).delegate("#page1", "pageinit", function () {
alert("触发页面1的pageinit事件");
});
$(document).delegate("#page1", "pageshow", function () {
alert("触发页面1的pageshow事件");
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<!--<a href="#" class="ui-btn-icon-home ui-btn-icon-left">首页</a>-->
<h1>测试Html5Apps首页</h1>
<!--<a href="#" data-role="button" class="ui-btn-icon-search ui-btn-icon-right">新建</a>-->
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li><a href="#" onclick="$(document).trigger('mobileinit')">触发mobileinit</a></li>
<li><a href="#page2">进入第二页</a></li>
</ul>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二页</h1>
</div>
<div data-role="content">
<a href="#page1" data-role="button">返回第一页</a>
</div>
</div>
</body>
</html>
效果图如下：
页面初始化弹窗 点击触发mobileinit 弹窗提示 点击跳转到下一页之后返回到第一个页面时提示
4.2 预加载和缓存
4.2.1 页面预加载
实现页面预加载的方法有两种：
在需要链接页面的标签中添加data-prefetch属性，设置属性值为true，或不设置属性值。设置该属性值之后，JQuery Mobile将在加载完成当前页面之后，自动加载该链接元素所指的目标页面，即href属性的值调用JavaScript代码中的全局方法$.mobile.loadPage()来预加载指定的目标HTML页面，其最终的效果与设置元素的data-prefetch属性一样
4.2.2 页面缓存
实现将页面内容写入文档缓存中有两种方法：
在需要被缓存的视图页标签中添加data-dom-cache属性，设置该属性值为true，或不设置属性值。通过JavaScript代码设置$.mobile.page.prototype.options.domCache = true;
4.3 使用锚记
定义锚记的方法：<a name="anchor">命名锚记</a>定位到锚记的方法：<a href="anchor">定位到命名锚记</a>
4.3.1 在单页视图中定义锚记
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(function () {
$('a.scroll').bind('click vclick', function (ev) {
var target = $($(this).attr('href')).get(0).offsetTop;
$.mobile.silentScroll(target);
return false;
})
})
</script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>命名锚记</h1>
</div>
<div data-role="content">
<a class="scroll" href="#anchor" data-role="button">跳转到锚记位置</a>
<div style="height: 1000px;"></div>
<p><a name="anchor" data-role="button" id="anchor">命名锚记位置</a></p>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
4.3.2 在多页视图中定义锚记
后期补充
4.4 传递参数
在单页视图中使用基于HTTP的方式通过POST和GET请求传递参数，而在多页视图中不需要与服务器进行通信，通常使用下列三种方法实现页面间的参数传递。
GET方法：在前一个页面生成参数并传入下一个页面，然后在下一个页面中进行GET内容解析。通过HTML5的Web Storage进行参数传递设置全局变量，不推荐
4.4.1 以GET方式传递参数
4.4.2 通过HTML5 Web Storage 传递参数
使用sessionStorage存储在浏览器中，浏览器关闭，sessionStorage中内容会消失使用localStorage存储在本地，类似cookie，除非主动删除，否则不会删除
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
$('#page2').live('pageshow', function (event, ui) {
alert("传递给第二个页面的参数是:" + sessionStorage.name);
})
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>第一页</h1>
</div>
<div data-role="content">
<a href="#page2" onclick="sessionStorage.name=1" data-role="button">下一页1</a>
<a href="#page2" onclick="sessionStorage.name=2" data-role="button">下一页2</a>
</div>
<div data-role="footer">
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header">
<h1>第二页</h1>
</div>
<div data-role="content">
<a href="#page1" data-role="button">返回第一页</a>
</div>
</div>
</body>
</html>
效果图：
4.6 实战练习
4.6.1 记事本
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script>
/**格式化字符串,将数字转换成几位数,前面补0
* @return {string}
*/
function prefixInteger(num, n) {
return (new Array(n).join(0) + num).slice(-n);
}
function getNowFormatDate() {
var date = new Date();
var seperator1 = "-";
var seperator2 = ":";
var month = prefixInteger(date.getMonth() + 1, 2);
var strDate = prefixInteger(date.getDate(), 2);
var hours = prefixInteger(date.getHours(), 2);
var minutes = prefixInteger(date.getMinutes(), 2);
var seconds = prefixInteger(date.getSeconds(), 2);
var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
+ " " + hours + seperator2 + minutes
+ seperator2 + seconds;
return currentdate;
}
var session_id;
function getName(id) {
sessionStorage.name = null;
sessionStorage.name = $('#content').find('ul').find(id).find('p').text();
}
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
function guid() {
return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
}
function addt() {
//获取文本输入框中的内容
var text1 = $('#new').find('#note').val();
if (text1 == "") {
text1 = "您未输入任何内容";
}
//获取到Ul列表
var ul = document.getElementById("ul");
//创建元素Li
var li = document.createElement("li");
//向li中添加内容
// li.innerHTML = text1;
var _id = guid();
session_id = _id;
li.setAttribute("id", _id);
li.setAttribute("onclick", "getName('#" + _id + "')");
var a = document.createElement("a");
a.setAttribute("href", "#detail");
var h1 = document.createElement("h1");
h1.innerHTML = getNowFormatDate();
var p = document.createElement("p");
p.innerHTML = text1;
//向ul追加元素li
ul.appendChild(li);
li.appendChild(a);
a.appendChild(h1);
a.appendChild(p);
$('#ul').listview('refresh');
}
jQuery.extend(jQuery.validator.message, {});
</script>
</head>
<body>
<div data-role="page" id="home" data-title="记事本">
<div data-role="header">
<h1>记事本</h1>
<a href="#new" data-icon="custom">新建</a>
</div>
<div data-role="content" id="content">
<ul data-role="listview" id="ul">
<!--<li id="list_item_1" onclick="getName('#list_item_1')">
<a href="#detail">
<h1>2018/04/18</h1>
<p>如果我们能活着出去,万水千山你愿意陪我一起看么</p>
</a>
</li>
<li id="list_item_2" onclick="getName('#list_item_2')">
<a href="#detail">
<h1>2018/04/18</h1>
<p>前世叫你妖仙姐姐,今世叫你小白痴</p>
</a>
</li>-->
</ul>
<script>
</script>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="http://www.w3school.com.cn/jquery/index.asp">Copyright @JQuery Mobile</a></li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="new" data-title="新建笔记本">
<div data-role="header">
<h1>新建笔记本</h1>
<a href="#home" data-icon="back">返回</a>
</div>
<div data-role="content">
<form>
<label for="note">请输入内容</label>
<textarea id="note" name="note" style="height: 100%;min-height: 200px;"></textarea>
</form>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li id="save"><a href="#home" onclick="addt()" data-icon="arrow-u">保存</a></li>
</ul>
</div>
</div>
<script>
$('#new').live('pageshow', function () {
$('#note').val(null);
})
</script>
</div>
<div data-role="page" id="detail">
<div data-role="header">
<h1>详细内容</h1>
<a href="#home" data-icon="back">返回</a>
</div>
<div data-role="content">
<p id="p"></p>
<script>
$('#detail').live('pageshow', function () {
document.getElementById("p").innerHTML = sessionStorage.name;
})
</script>
</div>
</div>
<!--<div id="error">
<div data-role="header">
<h1>页标题</h1>
</div>
<div data-role="content">
<p>您没有输入任何内容哦...</p>
<p><a href="#" data-role="button" data-rel="back" data-theme="a">关闭</a></p>
</div>
</div>-->
</body>
</html>
效果图： 点击新建： 输入内容后： 点击保存: 点击其中一条:
第5章 设计弹出页面
5.1 定义弹出页面
弹出页面包括弹出对话框，弹出菜单或嵌套菜单，弹出表单、图片、视频、弹出覆盖面板、地图等不同的形式。几乎所有能够用来“弹出”的页面元素，都可以通过一定的方式应用到弹出页面上。
弹出页面包括两个部分：弹出按钮和弹出页面，具体实现步骤如下:
1.定义弹出按钮。弹出按钮通常基于一个超链接实现，在超链接中，设置属性data_rel为“popup”，表示以弹出页面方式打开所指向的内容。
<a href="#popupTooltip" data-rel="popup" data-role="button" data-inline="true">提示框</a>
2.定义弹出框。弹出页面部分通常是一个div的DOM容器，为这个容器标签(一般为<div>)声明data-role属性，设置值为popup，表示以弹出方式呈现其中的内容。
<div data-role="popup" id="popupTooltip"></div>
示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定义弹出页</h1>
</div>
<div data-role="content">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline" href="#popupBasic" data-transition="pop"
data-rel="popup">打开弹出页</a>
<div id="popupBasic" data-role="popup">
<p>这是一个简单的弹出框,没有任何设置</p>
</div>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
效果图：
5.2 使用弹出页面
5.2.1 菜单和嵌套菜单
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 引入 jQuery Mobile 样式 -->
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.css">
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"></script>
<!-- 引入 jQuery Mobile 库 -->
<script src="http://apps.bdimg.com/libs/jquerymobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>定义弹出菜单</h1>
</div>
<div data-role="content">
<a class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-gear ui-btn-icon-left ui-btn-a" href="#popupMenu"
data-transition="slideup" data-rel="popup">弹出菜单</a>
<div id="popupMenu" data-role="popup" data-theme="b">
<ul style="min-width: 210px;" data-role="listview" data-inset="true">
<li data-role="liost-divider">选择命令</li>
<li><a href="#">查看代码</a></li>
<li><a href="#">编辑</a></li>
<li><a href="#">禁用</a></li>
<li><a href="#">删除</a></li>
</ul>
</div>
</div>
<div data-role="footer">
</div>
</div>
</body>
</html>
效果图：
