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("现在隐藏页面二");
});