1.JQuery Mobile页面的基本框架
JQuery Mobile是一个基于HTML5,拥有响应式网站特性,兼容所有主流移动平台的统一UI接口系统与前端开发框架,可以运行在所有智能手机平板电脑和桌面设备。
JQuery Mobile 页面拥有一个基本的框架,就是在HTML页面中通过将在<div>标签中添加data-role属性,设置该属性的值为page,使该div形成一个容器,容器中又包含3个子容器,分别在各子容器中设置data-role的属性是header、content、footer,这样就形成了“标题”“内容”“结构”三部分组成的标准页面结构。
在页面<body></body>之间,第一个<div></div>标签中设置data-role属性为page,形成一个页面容器,在该容器中添加三个<div>标签,依次设置data-role属性为header、content、和footer,从而形成一个标准的jQuery Mobile页面框架。
如果需要多个页面容器,为每个容器设置唯一的id名称,当浏览器加载多容器的jQuery Mobile页面时,以栈堆方式同时加载。
效果图如图所示: