jQuery Mobile入门学习文档_H5之家 - 中国HTML5教程资源分享第一站

　　jQuery Mobile入门学习文档是本文要介绍的内容，主要是来了解jQuery Mobile的学习指南，不多说，具体内容来看本文详解。jQuery Mobile框架可以轻松的帮助我们实现非常好看的、可跨设备的Web应用程序。我们将后续的介绍中向大家介绍大量的代码及实例。

　　jQuery一直以来都是非常流行的富客户端及Web应用程序开发中使用的JavaScript类库,然而一直以来它都是为桌面浏览器设计的，没有特别为移动应用程序设计。

　　jQuery Mobile是一个新的项目用来添补在移动设备应用上的缺憾。它是基本jQuery框架并提供了一定范围的用户接口和特性，以便于开发人员在移动应用上使用。使用该框架可以节省大量的js代码开发时间，尽管目前的版本还是不是一个稳定的版本。但它的应用效果已经备受瞩目。

　　接下来我们将通过实例向大家展示jQuery Mobile的特性及好处，让我们看一下这个新框架是怎么帮助你在短时间内建立起一个高质量的移动应用程序,接下来的代码讲解中的代码最好使用的移动设备平台是IPhone或Android。或者是PC电脑上使用 Safari浏览器调试。

　　jQuery Msobile 都能做什么?

　　jQuery Mobile为开发移动应用程序提代了非常简单的用户接口

　　这种接口的配置是标签驱动的，这意味着我们可以在HTML中建立大量的程序接口而不不需要写一行js代码

　　提供了一些自定义的事件用来探测移动和触摸动作。例如tap(敲击)、tap-and-hold（点击并按住）、swipe、orientation change

　　使用一些加强的功能时需要参照一下设备浏览器支持列表

　　使用预设主题可以轻松定制应用程序外观

　　jQuery Mobile 基本页面结构

　　大部分jQuery Mobile Web应用程序都要遵循下面的基本模板

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<title>Page Title</title>
　　<linkrel="stylesheet"href="" />
　　<scriptsrc=""></script>
　　<scriptsrc=""></script>
　　</head>
　　<body>
　　<divdata-role="page">
　　<divdata-role="header">
　　<h1>Page Title</h1>
　　</div>
　　<divdata-role="content">
　　<p>Page content goes here</p>
　　</div>
　　<divdata-role="footer">
　　<h4>Page Footer</h4>
　　</div>
　　</div>
　　</body>
　　</html>

　　要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容

　　CSS文件jquerymobile-10a1mincss
　　jQuery library jquery-143minjs
　　jQuery Mobile library jquerymobile-10a1minjs

　　在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。

　　我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。这样jQuery Mobile就会知道哪些内容需要处理。

　　说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。

　　在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。如下：

jQuery Mobile入门学习文档

　　
　　多个页面在同一个页面中

　　有一种建立在一个 HTML页面基础之上的页面结构，即在一个页面中添加多个data-role=”page”。这意味着浏览器仅仅得到一个页面，就可以实现页面平滑切换的客户体验。参看下面实例：(目前有bug)

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<title>jQuery Mobile: Pages within Pages</title>
　　<linkrel="stylesheet"href="" />
　　<scriptsrc=""></script>
　　<scriptsrc=""></script>
　　</head>
　　<body>
　　<divdata-role="page"id="home">
　　<divdata-role="header">
　　<h1>Home</h1>
　　</div>
　　<divdata-role="content">
　　<p><ahref="#about">About this app</a></p>
　　</div>
　　</div>
　　<divdata-role="page"id="about">
　　<divdata-role="header">
　　<h1>About This App</h1>
　　</div>
　　<divdata-role="content">
　　<p>This app rocks! <ahref="#home">Go home</a></p>
　　</div>
　　</div>
　　</body>
　　</html>

　　正如所见，上面的代码中包含了两个”page”:主页（id为home）和”about”(id为about)。从Home链接到About页面采用的是连接地址为#about，about页面返回到首页的链接地址为#home。jQuery Mobile会自动切换链接的目的div显示到移动浏览器中。该框架会隐藏除第一个包含data-role=”page”div以外的其它”page”

　　AJAX 导航