初识JQuery框架

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页面时,以栈堆方式同时加载。

效果图如图所示:


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容