jQuery Mobile 学习五
jQuery Mobile 学习五
jQuery Mobile 主题
jQuery Mobile 提供了五种不同的样式主题，从 "a" 到 "e" - 每种主题带有不同颜色的按钮、栏、内容块，等等。jQuery Mobile 中的一种主题由多种可见的效果和颜色构成。
如需定制应用程序的外观，请使用 data-theme 属性，并为该属性分配一个字母：
<div data-role="page" data-theme="a|b|c|d|e">
| a | : 默认。黑色背景上的白色文本。 |
| b | :蓝色背景上的白色文本 / 灰色背景上的黑色文本 |
c:亮灰色背景上的黑色文本
d:白色背景上的黑色文本
e:橙色背景上的黑色文本
默认地，jQuery Mobile 为页眉和页脚使用 "a" 主题，为页眉内容使用 "c" 主题（亮灰）。不过，您能够自如地对主题进行混合。
<div data-role="header" data-theme="b"></div> <div data-role="content" data-theme="a"></div> <div data-role="footer" data-theme="e"></div>
添加新主题
jQuery Mobile 同时允许您向移动页面添加新主题。
请通过编辑 CSS 文件（如已下载 jQuery Mobile）来添加或编辑新主题。只需拷贝一段样式，并用字母名（f-z）来对类进行重命名，然后调整为您喜欢的颜色和字体即可。
您也可以通过在 HTML 文档中使用主题类来添加新样式 - 为工具条添加类 ui-bar-(a-z)，并为内容添加类 ui-body-(a-z)：
<style>
.ui-bar-f
{
color:green;
background-color:yellow;
}
.ui-body-f
{
font-weight:bold;
color:purple;
}
</style>
jQuery Mobile 事件
您能够在 jQuery Mobile 中使用任何标准的 jQuery 事件。
此外，jQuery Mobile 还提供若干种为移动浏览定制的事件：
- 触摸事件 - 当用户触摸屏幕时触发（敲击和滑动）
- 滚动事件 - 当上下滚动时触发
- 方向事件 - 当设备垂直或水平旋转时触发
- 页面事件 - 当页面被显示、隐藏、创建、加载以及/或卸载时触发
如需关于所有 jQuery Mobile 事件的完整信息
在 jQuery 中，您已经学到使用文档 ready 事件来阻止 jQuery 代码在文档结束加载 (is ready) 前运行：
jQuery document ready 事件
<script>
$(document).ready(function(){
// 此处是 jQuery 事件...
});
</script>
jQuery Mobile pageinit 事件
<script>
$(document).on("pageinit","#pageone",function(){
// 此处是 jQuery 事件...
});
</script>
tap 事件在用户敲击某个元素时触发。
$("p").on("tap",function(){
$(this).hide();
});
taphold 事件在用户敲击某个元素并保持一秒时被触发：
$("p").on("taphold",function(){
$(this).hide();
});
swipe 事件在用户在某个元素上水平滑动超过 30px 时被触发：
$("p").on("swipe",function(){
$("span").text("Swipe detected!");
});
swipeleft 事件在用户在某个元素上从左滑动超过 30px 时被触发：
$("p").on("swipeleft",function(){
alert("You swiped left!");
});
swiperight 事件在用户在某个元素上从右滑动超过 30px 时被触发：
$("p").on("swiperight",function(){
alert("You swiped right!");
});
scrollstart 事件在用户开始滚动页面时被触发：
$(document).on("scrollstart",function(){
alert("开始滚动！");
});
scrollstop 事件在用户停止滚动页面时被触发：
$(document).on("scrollstop",function(){
alert("结束滚动！");
});
在 jQuery Mobile 中与页面打交道的事件被分为四类：
- Page Initialization - 在页面创建前，当页面创建时，以及在页面初始化之后
- Page Load/Unload - 当外部页面加载时、卸载时或遭遇失败时
- Page Transition - 在页面过渡之前和之后
- Page Change - 当页面被更改，或遭遇失败时
当 jQuery Mobile 中的一张典型页面进行初始化时，它会经历三个阶段：
- 在页面创建前
- 页面创建
- 页面初始化
每个阶段触发的事件都可用于插入或操作代码。
pagebeforecreate:当页面即将初始化，并且在 jQuery Mobile 已开始增强页面之前，触发该事件。
pagecreate:当页面已创建，但增强完成之前，触发该事件。
pageinit:当页面已初始化，并且在 jQuery Mobile 已完成页面增强之后，触发该事件。
$(document).on("pagebeforecreate",function(event){
alert("触发 pagebeforecreate 事件！");
});
$(document).on("pagecreate",function(event){
alert("触发 pagecreate 事件！");
});
$(document).on("pageinit",function(event){
alert("触发 pageinit 事件！")
});
无论外部页面何时载入 DOM，将触发两个事件。第一个是 pagebeforeload，第二个是 pageload （成功）或 pageloadfailed（失败）。
pagebeforeload:在任何页面加载请求作出之前触发。
pageload:在页面已成功加载并插入 DOM 后触发。
pageloadfailed:如果页面加载请求失败，则触发该事件。默认地，将显示 "Error Loading Page" 消息。
页面过渡涉及两个页面：一张“来”的页面和一张“去”的页面 - 这些过渡使当前活动页面（“来的”页面）到新页面（“去的”页面的改变过程变得更加动感。
pagebeforeshow: 在“去的”页面触发，在过渡动画开始前。
pageshow: 在“去的”页面触发，在过渡动画完成后
pagebeforehide: 在“来的”页面触发，在过渡动画开始前
pagehide: 在“来的”页面触发，在过渡动画完成后。
$(document).on("pagebeforeshow","#pagetwo",function(){ // 当进入页面二时
alert("页面二即将显示");
});
$(document).on("pageshow","#pagetwo",function(){ // 当进入页面二时
alert("现在显示页面二");
});
$(document).on("pagebeforehide","#pagetwo",function(){ // 当离开页面二时
alert("页面二即将隐藏");
});
$(document).on("pagehide","#pagetwo",function(){ // 当离开页面二时
alert("现在隐藏页面二");
});