用jQuery Mobile创建Web App
在本文中，Jake Rocheleau将为我们展示如何用jQuery来创建一个基于移动设备的Web App。在开发过程中，我们将使用CSS3的媒体查询功能来找出当前移动设备屏幕的的最大分辨率，根据不同的分辨率使用不同CSS。此外，Media Queries还可以帮助我们在小屏幕上隐藏导航菜单以展示更多的内容。我们还会使用jQuery来帮助我们使用Ajax.Load()，以便激活菜单栏和加载外部页面内容。
?
1. 定义页面布局首先，我们先要查看HTML页面，并且使用CSS样式来确定页面的样式。在开头我会跳过许多不常见的Meta标签（对所创建的Web App没有直接的影响）。但是我们仍然要注意一些代码片段（在下面我已经列举出来）。
?X-UA-Compatible是用来描述文件在某些浏览器上的渲染程度。不得不说， 在HTML5编程过程中这是一个非常有趣的事情。所以我不用太担心这个问题。但重要的是，如果我们恰当地使用Meta标签，它会给我们许多意想不到的帮助。例如加入关键字会被大型搜索网站自动搜集，可以设定页面格式及刷新和让网页自动适应移动浏览器大小等。
?内容主体
在BODY中，我通过ID#w创建了一个Wrapper Div。在其中我将页面布局分成了#pagebody和#navmenu两个部分。整个页面的宽度为640px，所以#pagebody和#navmenu的宽度可以精确地计算。
我给导航菜单赋了一个较低的z-index值来保证#pagebody总能在最顶部面显示。
?
接下来，我为打开和关闭菜单定义了两个重要的函数。除非我们确实需要两种截然不同的动画元素，否则我们可以在一个单一的函数和回调切换中完成此项设计，但不幸的是， jQuery并不能帮助我们解决这个问题，所以我们需要求助于其它的替代语法。
这两个函数我暂且命名为topbar和pagebody。内容区域的白色背景就是pagebody；我们把标题栏放置在页面的顶部。这就意味着每当我们点击打开或者关闭按钮时，我们需要把topbar和pagebody向左和向右平移290px。
?
4. 加载动态内容理论上，上述代码基本上就能满足大部分人创建一个简单移动的需求，但是，在这里我还想添加一些另外的东西。
每当用户点击一个菜单链接，页面会自动关闭当前的导航栏目和显示一个加载的GIF图像。当页面内容加载完成时，页面会去除GIF图片，并且显示已加载好的内容。通过使用static .htm，我们可以很轻松的完成这项工作，从而避免了PHP、Ruby、Perl或者任何后端语言所带来的困扰。
?
点击设置
首先，我们需要测试导航按钮。当用户点击导航按钮，页面会停止href的正常加载，此时，我们可以利用函数来显示外部内容。
?通过上段代码，每当用户点击导航菜单链接时，我们会停止当前页面加载并且设置一个完整的URL变量。此外，我还创建一个包含标准图像Loader的HTML变量。如果你想定制自己的图像加载方式，Ajaxload会是一个很不错的助力。
?
Ajax.Load()
要实现这个功能我们需要两段不同的代码，下面这段代码不仅能帮助我们关闭导航菜单和滑动文档窗口，而且还能帮助我们使用一个较小的加载动画来替代当前页面内的主体内容。
content.html(imgloader); setTimeout(function() { content.load(linkhtmlurl, function() { /* no callback */ }) }, 1200);?
5. 总结我鼓励所有的Web开发者去下载教程中的源代码，并且希望开发者能够以此编写自己的源代码。这仅仅是一个基础教 程。通过媒体查询和越来越多的可拓展Web浏览器，Web开发也变得比以往更加的容易。移动开发是一门艺术，需要大量的实践和奉献精神。我希望这个教程是 一个很好的起点，期望它能够帮助更多的开发者。如果你对代码有任何的疑问和心得，可以在讨论区与我分享。
?
