初识JQuery框架

1.JQuery Mobile页面的基本框架

JQuery Mobile是一个基于HTML5，拥有响应式网站特性，兼容所有主流移动平台的统一UI接口系统与前端开发框架，可以运行在所有智能手机平板电脑和桌面设备。

JQuery Mobile 页面拥有一个基本的框架，就是在HTML页面中通过将在

标签中添加data-role属性，设置该属性的值为page，使该div形成一个容器，容器中又包含3个子容器，分别在各子容器中设置data-role的属性是header、content、footer，这样就形成了“标题”“内容”“结构”三部分组成的标准页面结构。

在页面之间，第一个

标签中设置data-role属性为page，形成一个页面容器，在该容器中添加三个

标签，依次设置data-role属性为header、content、和footer，从而形成一个标准的jQuery Mobile页面框架。

如果需要多个页面容器，为每个容器设置唯一的id名称，当浏览器加载多容器的jQuery Mobile页面时，以栈堆方式同时加载。

效果图如图所示：