教你使用超链接

　　普通网页和移动网页的一个巨大的不同便是屏幕中呈现内容的数量多寡上。虽然你可以在你的iPhone上加载纽约时报的主页，但你需要缩放它才能顺利阅读上面的内容。这样的体验并不好，而更好的解决方案是减少那些杂乱的内容，只在屏幕上显示你需要显示的内容。

　　如果是传统的网站，你可能会创建一些包含少量内容的子页面，而当你使用jQueryMobile时，你最好在页面中包含“微量”的内容，这样才会更有效率。

　　在上面例子中你已经看到了如何利用模版来创建一个页面。现在让我们更进一步，来创建内容的“page”。jQueryMobile中的一个“page”结构一般使用一个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。

　　现在，在你的Android或者IOS设备里测试一下，当你加载好页面后你会发现这三件事情：

　　· 导航页出现在屏幕中(你可以上下滚动一下，并没有别的东西出现)

　　· 当你点击一个链接时，会动画切换到另一个页面。

　　· 新页面的顶部会自动出现一个“back”按钮(译注：jQueryMobile目前版本默认已经取消了这一功能)

　　其实这些div元素预先会加载并缓存到你的浏览器中，因此“页面”间的切换会非常流畅。

　　在同一个HTML页面创建多个在屏幕上显示的“页面”使得你可以大大减少页面加载的次数，但同时也会导致许多移动设备运行缓慢。jQueryMobile将页面所有的链接跳转都视作Ajax调用，这样可以充分利用CSS的过渡效果，当你想要链接到你自己的web程序之外的某些链接时，你可以这样编写你的链接代码：

　　如上所示，仅需要为a标签添加 rel="external"属性即可。然而jQueryMobile对于(同域的)外部链接并不是简单地跳转完事儿，相比于其他移动框架它更进了一步，因为他对(同域的)所有链接都采用Ajax调用方式，从而实现漂亮的转场效果。基于此你可以将你的网页内容分离到许多页面来创建更大型的项目。