jQuery Mobile 前端架构

基于手机页面的前端架构，响应式布局，JS扩展。

jQuery Mobile 安装

1. jQuery Mobile 官网 下载 稳定版；
2. jQuery 官网 下载 jQuery Mobile所对应的jQuery.js ；
3. 提取jQuery Mobile中的压缩版js文件、css文件和image文件夹，以及第二步的jQuery.js文件 ；

基本布局

1. 引入jQuery Mobile 和 jQuery的css和js文件；
2. 布局页眉，内容和页脚；
   <div data-role="page"> //当作一个页面 <div data-role="header"> //页面头部 <h1>欢迎访问我的主页</h1> </div> <div data-role="content"> //页面内容 <p>我是一名移动开发者！</p> </div> <div data-role="footer"> //页脚 <h1>页脚文本</h1> </div> </div>

页脚扩展

• 底部导航制作

<div data-role="footer" data-position="fixed" data-tap-toggle="false"> <div data-role="navbar"> <ul> <li><a href="#home" data-icon="home" data-transition="fade">首页</a></li> <li><a href="#shop" data-icon="grid" data-transition="fade">分类</a></li> <li><a href="#cart" data-icon="info" data-transition="fade">购物车</a></li> <li><a href="#member" data-icon="star" data-transition="fade">个人中心</a></li> </ul> </div> </div>

data-role = "navbar" 创建底部导航
data-position = "fixed" 固定到屏幕底部；
data-transition = "fade" 页面过渡；
data-icon 图标内容