《响应式网页开发实战》教学课件11jQuery-Mobile综合项目.pptx

第十一章 jQuery Mobile综合项目 提起便笺App ， 每个人都不陌生 ， 一般移动终端均会内置这类应用， 方便大家记录一些文字或简单的事情 。 目前 ， 大多数便笺App ， 如备忘录 等都需要安装后使用 ， 且数据只能记录在所安装的设备上 ， 在如今每个人 都拥有多个终端设备的状态下 ， 不便于实现跨设备和跨平台共享记录的日 常信息。 为了让用户能随时随地查阅和编辑日常信息 ， 以实现便笺更好地提醒 用户的作用 ， 设计一款基于网页的便笺应用 ， 让使用者免除安装软件的烦 琐和软件使用平台的限制 ， 随时随地都能通过浏览器使用自己的信息。 11. 1 项目描述 一般来讲 ， 便笺应用包括便笺内容浏览 、新增 、编辑 、删除和清除等功能 ， 同时 ， 为方便读者在将 后续便笺内容上传到服务器时 ， 隔离不同使用者的便笺信息 ， 设计中添加了用户注册和登录管理功能。 项目前端开发采用jQuery Mobile框架 ， 后端数据存储通过HTML5 的IndexedDB数据库和Local Storage存储实现 。各功能模块逻辑关系如图11. 1所示。 11.2 项目分析 图11. 1 便笺功能模块图 打开Dreamweaver CS6 ， 执行“站点 ”→“新建站点 ”菜单命令 ， 在弹出的站点对话框中， 设置站点名称“Notes ”， 选择本地站点文件夹后 ， 引入jQuery Mobile框架和图片资源（在 images文件夹中） 。生成的站点结构如图11.2所示。 图11.2 引入jQuery Mobile框架和图片资源后的站点结构图 11.3 项目实现与测试 11.3. 1 创建站点 在Chrome浏览器的PC 、 iPad 、Galaxy S5模拟器中 ， 得到index.html的运行效果如图 11.3~ 图11.5所示。 1 .主页（ index .html） 11.3 项目实现与测试 11.3.2 各功能模块实现与测试 图11.3 主页在PC显示器上的测试效果图 1 .主页（ index .html） 11.3 项目实现与测试 11.3.2 各功能模块实现与测试 图11.5 Galaxy S5预览效果图 图11.4 iPad测试效果图 user.html具体代码见第11章源代码 。其中 ， JavaScript代码片段用于接收主页传递的参 数 ， 并根据不同的参数 ， 通过为“登录|Login ”或“注册|Account ”选项卡添加“ui-btn- active ”类来决定显示注册还是登录表单。 注意： 登录和注册选项卡的切换使用的事件是tap ， 使用click在移动设备中会出现问题 。 2 .用户管理页（ user .html 11.3 项目实现与测试 11.3.2 各功能模块实现与测试 用户管理页在Chrome浏览器的Galaxy S5模拟器中的运行效果如图11.6和图11.7所示。 2 .用户管理页（ user .html 11.3 项目实现与测试 11.3.2 各功能模块实现与测试 图11.7 登录页面Galaxy S5预览效果图 图11.6 注册页面Galaxy S5预览效果图 该页面包含“浏览|View ” 和“新建|New ”两个选项卡， 分别用来显示便笺列表内容和 创建新的便笺 。 当从 user.html登录跳转到该页面 时 ， 默认显示“浏览|View ” 选项卡的内容 ， 其实现代码如 下。 11.3 项目实现与测试 11.3.2 各功能模块实现与测试 3 .便笺页（ note .html $(#clear).click(function (){ var storage=window. localStorage ; storage.clear () ; location.reload() ; }) ; 当单击浏览便笺页中的“清空 ”按钮时 ， 将删除当前所有便笺 ， 其实现代码 如下。 3 .便笺页（ note .html 11.3 项目实现与测试 11.3.2 各功能模块实现与测试 $(.detail).tap (function (){ var stringContent=$(this).html() ; var begin=stringContent. indexOf(td) ; var end=stringContent. indexOf(/td) ; var number=stringContent.substring (begin+4,end) ; location.href=notedetail.html?name=+name+number=+number; }) ; 当用户单击便笺列表中的某条便笺时