jQueryMobile页面
开始学习jQueryMobile
lamp 尽管jQueryMobile兼容所有的移动设备，但是并不能完全兼容PC机（由于有限的CSS3支持）。
为了更好的阅读本教程，建议您使用GoogleChrome浏览器。
实例
欢迎来到我的主页
我现在是一个移动端开发者!!
底部文本
尝试一下?
实例解析：
data-role="page"是在浏览器中显示的页面。
data-role="header"是在页面顶部创建的工具条(通常用于标题或者搜索按钮)
data-role="main"定义了页面的内容，比如文本，图片，表单，按钮等。
"ui-content"类用于在页面添加内边距和外边距。
data-role="footer"用于创建页面底部工具条。
在这些容器中你可以添加任何HTML元素-段落,图片,标题,列表等。
lamp jQueryMobile依赖HTML5data-属性来支持各种UI元素、过渡和页面结构。不支持它们的浏览器将以静默方式弃用它们。
在页面中添加jQueryMobile
使用jQueryMobile,你可以再单个HTML文件中创建多个不同的页面。
你可以使用不同的href属性来区分使用同一个唯一id的页面：
实例
跳转到第二个页面
跳转到第一个页面
尝试一下?
注意：当web应用有大量的内容（文本，图片，脚本等）将会严重影响加载时间。如果你不想使用内页链接可以使用外部文件：
访问外部文件
页面作为对话框使用
对话框是用于显示页面信息显示或者表单信息的输入。
在链接中添加data-rel="dialog"让用户点击链接时弹出对话框:
实例
跳转到第二个页面
<
跳转到第一个页面
jQueryMobile页面事件
在jQueryMobile中与页面打交道的事件被分为四类：
PageInitialization-在页面创建前，当页面创建时，以及在页面初始化之后
PageLoad/Unload-当外部页面加载时、卸载时或遭遇失败时
PageTransition-在页面过渡之前和之后
PageChange-当页面被更改，或遭遇失败时
如需关于所有jQueryMobile事件的完整信息，请访问我们的jQueryMobile事件参考手册。
jQueryMobileInitialization事件
当jQueryMobile中的一张典型页面进行初始化时，它会经历三个阶段：
在页面创建前
页面创建
页面初始化
每个阶段触发的事件都可用于插入或操作代码。
事件 描述
pagebeforecreate 当页面即将初始化，并且在jQueryMobile已开始增强页面之前，触发该事件。
pagecreate 当页面已创建，但增强完成之前，触发该事件。
pageinit 当页面已初始化，并且在jQueryMobile已完成页面增强之后，触发该事件。
下面的例子演示在jQueryMobile中创建页面时，何时触发每种事件：
实例
$(document).on("pagebeforecreate",function(event){
alert("pagebeforecreate事件触发!");
});
$(document).on("pagecreate",function(event){
alert("pagecreate事件触发!");
});
尝试一下?
jQueryMobileLoad事件
页面加载事件属于外部页面。
无论外部页面何时载入DOM，将触发两个事件。第一个是pagebeforeload，第二个是pageload（成功）或pageloadfailed（失败）。
下表中解释了这些事件：
事件 描述
pagebeforeload 在任何页面加载请求作出之前触发。
pageload 在页面已成功加载并插入DOM后触发。
pageloadfailed 如果页面加载请求失败，则触发该事件。默认地，将显示"ErrorLoadingPage"消息。
下列演示pageload和pagloadfailed事件的工作原理：
实例
$(document).on("pageload",function(event,data){
alert("触发pageload事件！\nURL:"+data.url);
});
$(document).on("pageloadfailed",function(event,data){
alert(";抱歉，被请求页面不存在。");
});
尝试一下?
jQueryMobile过渡事件
我们还可以在从一页过渡到下一页时使用事件。
页面过渡涉及两个页面：一张"来"的页面和一张"去"的页面-这些过渡使当前活动页面（"来的"页面）到新页面（"去的"页面的改变过程变得更加动感。
事件 描述
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(){//Whenleavingpagetwo
alert("现在隐藏页面二");
});
jQueryMobile列表图标
默认情况下每个列表项都会包含一个箭头图标"carat-r"(右箭头)。如果要修改这个图标可以使用data-icon属性:
实例
Defaultisrightarrow
data-icon="plus"
data-icon="minus"
data-icon="delete"
data-icon="location"
data-icon="false"
尝试一下?
Note data-icon="false"将会移除图标。
更完整的jQueryMobile按钮图标，请访问我们的jQueryMobile图标参考手册。
16x16图标
如果你想在你的列表添加标准的16x16px的图标,可以在列表项中添加![]() 元素，并使用"ui-li-icon"类:
实例
USA
尝试一下?
jQueryMobile列表缩略图
大于16x16px的图像，请在链接中添加![]() 元素。
jQueryMobile将自动缩放图像到80x80px:
实例
尝试一下?
使用标准的HTML添加列表信息：
实例
GoogleChrome
GoogleChrome免费的开源web浏览器。发布于2008年。
尝试一下?
jQueryMobile列表图标
在列表![]() 元素使用class="ui-li-icon"添加16x16px图标：
实例
USA
尝试一下?
分割按钮
在JQueryMobile的列表中，有时需要对选项内容做两个不同的操作，这时，需要对选项中的链接按钮进行分割。实现分割的方法是在元素中再增加一个元素，便可以在页面实现分割效果。
jQueryMobile会自动设置第二个链接为蓝色箭头的图标，图标的链接文字（如果有的话）将在用户将鼠标悬停在图标时显示:
实例
SomeText
尝试一下?
添加一些页面和对话框使链接功能更加丰富：
实例
下载浏览器
尝试一下?
气泡数字
气泡数字是用来显示列表项相关的数字，如在一个邮箱的邮件：
如需添加气泡数字，请使用行内元素，比如，设置class"ui-li-count"属性并添加数字：
实例
收件箱25
发件箱432
垃圾箱7
|
|
