分类： Web开发
2015-04-01 20:02:23
DOCTYPE html> <html> <head> <title>jQuery Mobile基本页面结构title> <link rel="stylesheet" href="" /> <script type="text/javascript" src="">script> <script type="text/javascript" src="">script> head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Headerh1> div> <div data-role="content"> <p>Content goes herep> div> <div data-role="footer"> <h4>Footerh4> div> div> body> html>
代码说明
要使用 jQuery Mobile，首先需要在开发的界面中包含如下3个内容：
CSS文件jquery.mobile-1.0a3.min.css
jQuery类库文件 jquery-1.5.min.js
jQuery Mobile文件 jquery.mobile-1.0a3.min.js
在上面的页面基本模板中，引入这三个元素采用的是jQuery CDN方式，开发人员也可以下载这些文件及主题到你的服务器上。
我们可以看到页面中的内容都是包装在div标签中并在标签中加入data-role=”page”属性。 这样jQuery Mobile就会知道哪些内容需要处理。
说明：data-属性是HTML5新推出的很有趣的一个特性，它可以让开发人员添加任意属性到html标签中,只要添加的属性名有“data-”前缀。
在”page”div中，还可以包含”header”， ”content”， ”footer”的div元素,这些元素都是可选的，但至少要包含一个 “content”div。
使用jQuery Mobile的第一步，先创建一个html页面，并在head标签中加入以下内容：
<link rel="stylesheet" href=""> <script src="">script> <script src="">script>
正如你在代码中看到的，jQuery Mobile是jQuery的一个扩展。目前来说，压缩后的jQuery Mobile 仅12Kb。
在创建第一个jQuery Mobile页面时你需要创建三块基本内容，下面的推荐模版展示了这一过程，你可以在未来的项目中使用它：
在 head 标签内填写：
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1"> <link rel="stylesheet" href=""> <script src="">script> <script src="">script>
在body标签内填写：
<div data-role="page"> <div data-role="header"><h1>Page Titleh1>div> <div data-role="content"><p>Page content goes here.p>div> <div data-role="footer"><h4>Page Footerh4>div> div>
在模版中有些地方值得我们注意。首先是DIV元素的使用，我们知道，既然HTML5在移动设备中如此流行，为什么不使用HTML5的 header, article, section, footer 标签元素呢？这是因为较老的智能手机浏览器无法明白新的HTML5元素。在某些情况下，例如windows phone上老版本的IE会出现一个bug使得无法加载页面的css。而DIV元素却被广泛支持。
此时你已经可以保存你的网页并在浏览器中查看了，这些代码同样可以在桌面浏览器中正常工作。我推荐你使用Chrome来进行本地测试。要在真实环境测试，你就需要相应移动设备了。
普通网页和移动网页的一个巨大的不同便是屏幕中呈现内容的数量多寡上。虽然你可以在你的iPhone上加载纽约时报的主页，但你需要缩放它才能顺利阅读上面的内容。这样的体验并不好，而更好的解决方案是减少那些杂乱的内容，只在屏幕上显示你需要显示的内容。
如果是传统的网站，你可能会创建一些包含少量内容的子页面，而当你使用jQuery Mobile时，你最好在页面中包含“微量”的内容，这样才会更有效率。
在上面例子中你已经看到了如何利用模版来创建一个页面。现在让我们更进一步，来创建内容的“page”。jQuery Mobile中的一个“page”结构一般使用一个DIV来组织。现在你可以使用上面的模板来创建一个包含四个跳转到其他页面的链接的导航页面：
<div data-role="page" id="menu"> <div data-role="header"><h1>Menuh1>div> <div data-role="content"> <p>What vehicles do you like?p> <p><a href="#Cars">Carsa>p> <p><a href="#Trains">Trainsa>p> <p><a href="#Planes">Planesa>p> div> <div data-role="footer"><h4>Page Footerh4>div> div>
上面这段代码中第一个div非常重要，它包含有一个id和一个data-role属性：
data-role="page" id="menu"
data-role定义了这个div是一个“page”，page这个术语稍微有点让人误解，“page”这里其实指的是一个可视面或者在屏幕里未 隐藏的HTML代码部分，而不是指的一个单独的页面（或者说单独的HTML文件）。data-role="page" 意味着jQueryMobile会根据div元素在屏幕中构建可视内容。而id属性允许你通过a标签链接到该page，或者其他page。
上面创建的导航页是我们在浏览器看到的第一个页面，接下来我们再添加三个“page”，他们有不同的id：Cars， Planes，Trains。
<div data-role="page" id="Cars"> <div data-role="header"> <h1>Carsh1> div> <div data-role="content"> <p>We can add a list of carsp> div> <div data-role="footer"> <h4>Page Footerh4> div> div> <div data-role="page" id="Trains"> <div data-role="header"> <h1>Trainsh1> div> <div data-role="content"> <p>We can add a list of trainsp> div> <div data-role="footer"> <h4>Page Footerh4> div> div> <div data-role="page" id="Planes"> <div data-role="header"> <h1>Planesh1> div> <div data-role="content"> <p>We can add a list of planesp> div> <div data-role="footer"> <h4>Page Footerh4> div> div>
现在，在你的Android或者IOS设备里测试一下，当你加载好页面后你会发现这三件事情：
其实这些div元素预先会加载并缓存到你的浏览器中，因此“页面”间的切换会非常流畅。
在同一个HTML页面创建多个在屏幕上显示的“页面”使得你可以大大减少页面加载的次数，但同时也会导致许多移动设备运行缓慢。 jQueryMobile将页面所有的链接跳转都视作Ajax调用，这样可以充分利用CSS的过渡效果，当你想要链接到你自己的web程序之外的某些链接 时，你可以这样编写你的链接代码：
<a href="" rel="external">lampweb.orga>
如上所示，仅需要为a标签添加 rel="external"属性即可。然而jQueryMobile对于（同域的）外部链接并不是简单地跳转完事儿，相比于其他移动框架它更进了一步， 因为他对（同域的）所有链接都采用Ajax调用方式，从而实现漂亮的转场效果。基于此你可以将你的网页内容分离到许多页面来创建更大型的项目。
链接和页面只是移动网页设计中一个很小的部分，APP程序（比如采用Object-C，C#，java等在Android或者IOS设备上创建的本 地应用程序）快速增长的同时产生了丰富的控件和组件（例如菜单栏，列表等控件）使得开发者可以很方便地创建复杂的应用程序，这正是许多移动网页开发者第二 个巨大的挑战——因为在原生的HTML里面并没有这些控件或者组件。针对这一问题，jQueryMobile当前正在创建一组非常有用的组件。以下是已经 发布的组件：