jQuery Mobile 前端架构
基于手机页面的前端架构，响应式布局，JS扩展。
jQuery Mobile 安装
基本布局
- 引入jQuery Mobile 和 jQuery的css和js文件；
- 布局页眉，内容和页脚；
<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 图标内容
