jQuery Mobile的基本组织结构

       jQuery Mobile是建立在jQuery之上的一套JavaScript程序库，它着眼于移动浏览器的特点，以HTML5和CSS3为基础，充分考虑了在移动设备上跨浏览器的需求。同时，jQuery Mobile框架在设计上采用了渐进增强和自适应的策略，使它能够按照不同的应用环境得以最大限度的发挥系统框架带来的优势。作为一个JavaScript框架，jQuery Mobile也同样能够应用在普通桌面浏览器环境下。

  

1：加载jQuery和jQuery Mobile

      在使用jQuery Mobile之前，必须首先加载jQuery Mobile，由于jQuery Mobile与jQuery得一同运行，在加载jQuery Mobile的同时，也要加载jQuery。jQuery Mobile除了一个JavaScript文件外，还有一个CSS文件必须加载。

2：设置虚拟显示窗口

<meta name="viewport"  content="width=device-width,initial-scale=1.0">

1):viewport可以直接翻译为“观察窗口”，用户可见的屏幕图像在这个观察窗口显示；

2):initial-scale:用于网页文档加载以后，网页初始显示时的缩放比例；

    use-scalable:决定是否允许用户手动缩放网页

    minimum-scale,maximum-scale:用户缩放网页的最小、最大比例。

3:完成一个网页的布局框架

<div data-role="page">.......</div>

data-role此属性标识将一个div显示为一个在浏览器中的“界面”，data-role不是HTML5的标准属性，而是定制属性。

jQuery Mobile在HTML文档中通过界定一个页面范围，能使同一个HTML文档同时包含多个页面。

一个基本的页面由三个并列的div组成：

标题栏：         <div data-role="header">.........</div>

内容:               <div class="ui-content" role="main">.......</div>

页尾:               <div data-role="footer">

4：单页和多页模式：

      当一个网页文档只存在一个data-role="page"时，为单页模式，多个为多页模式。jQuery Mobile中的多页模式是在网页加载时，一个文档中的多个页面被同时载入内存（但不会都初始化）。

锚点与链接：

                    <a href="#page3"  data-role="button" data-mini="true" data-inline="true">按钮：第三页</a>