第14章 jQuery 项目实战-【千锋教育】Jquery从入门到实战

第14章 jQuery 项目实战 会议管理系统 推箱子小游戏 会议管理系统 推箱子小游戏 ☞点击查看本小节知识架构 ☞点击查看本小节知识架构 14.2 14.1 学习目标 通过 利用 利用 通过项目实战对jQuery做全面的总结 1 2 利用jQuery实现会议管理系统 3 利用jQuery实现推箱子小游戏 销售额 掌握知识 理解知识 熟悉知识 3.333333 3.333333 3.333333 实践是检验真理的唯一标准。通过前面章节的学习，对jQuery语法有了深入的理解，最终目标是将jQuery灵活地运用到项目中。 本章通过两种类型的案例，分别阐述jQuery的实际作用，帮助读者熟悉开发流程和项目把控。 14.1 会议管理系统 14.1.1 项目结构布局 返回目录 14.1.2 项目数据初始化 14.1.3 项目功能实现 14.1 会议管理系统 会议管理系统一般交互操作非常多，需要大量JavaScript脚本去支持。本节利用jQuery实现一个小型的会议管理系统，主要功能包括选择会议地点、选择会议时间、选择会议领导、选择会议部门等。可对选择内容进行添加、修改、删除等操作，如图所示。 首先把系统结构分为四大部分，即地点、时间、领导、部门，代码参考教材14.1.1节。 再来考虑样式，单击添加按钮时，可显示下拉菜单，注意限制下拉菜单的最大高度，可利用max-height样式。由于存在多选操作被选择的数据，可能会出现多行显示，所以用div去模拟input会更加方便，代码参考教材14.1.1节。 需要注意，菜单内结构和输入框内结构，需要动态创建，不过样式已经添加完成。 14.1.1 项目结构布局 14.1 会议管理系统 本案例数据为模拟的JSON数据（重点关注jQuery交互操作），同样将JSON数据分为四大部分，分别传入主入口函数的第三个参数中，代码参考教材14.1.2节。 通过第二个参数来决定数据是单选操作还是复选操作，1表示单选，2表示复选。第一个参数对应HTML结构中的ID标识，可以确定最终将数据渲染到哪块HTML结构中。 对整体代码进行闭包模式的封装，实现变量和函数对外界的隔离，避免代码冲突；把$作为参数传递到闭包内，这样$会变成局部方法，调用时查找速度更快；封装主入口函数，即popup()方法，接收三个参数，即id ，type ，data，代码如下所示。 14.1.2 项目数据初始化 14.1 会议管理系统 会议系统功能方法如表所示。 14.1.3 项目功能实现 14.1 会议管理系统 按照以下顺序进行方法功能的实现。 （1）给添加按钮加事件，并根据type类型，分别创建单选模块和多选模块，然后把数据渲染到菜单中并显示出菜单，代码参考教材14.1.3节。 （2）单击屏幕任意位置关闭弹出菜单，但是单击会议结构部分不关闭菜单，利用事件的冒泡特性来实现，代码参考教材14.1.3节。 （3）给列表项添加事件操作，分别实现单选和多选模式，并把数据渲染到输入框中。需要在createRadio()中调用bindRadio()，createMore()中调用bindMore()，代码参考教材14.1.3节。 14.1.3 项目功能实现 14.1 会议管理系统 （4）添加全选功能、删除指定项功能和滑动到可视区动画，分别利用trigger()和animate()方法实现。在bindAddBtn()中调用moveVisible()，在createMore()中调用setAllCur()，在popup函数中调用bindRemoveText()和bindRemoveBtn()，代码参考教材14.1.3节。 （5）检测最近碰撞的位置，对多选数据进行拖曳排序功能。在popup()函数中调用textDrag()，并进行类型判断，因为只有多选操作才能进行拖曳排序，代码参考教材14.1.3节。 14.1.3 项目功能实现 14.1 会议管理系统 14.2 推箱子小游戏 14.2.1 设置游戏数据 返回目录 14.2.2 游戏功能设置 14.2 推箱子小游戏 利用jQuery实现一个小游戏要比用原生JavaScript去实现少写很多代码。通过jQuery库来完成一个小乌龟推箱子的小游戏，功能包括地图渲染，关卡设计，事件操作，游戏流程，功能实现等，如图所示。 14.2 推箱子小游戏 14.2.1 设置游戏数据 游戏每一关的地图都是不一样的，如何能够动态地创建地图，并能使地图元素可高度复用？可以采用地图元素拼接的方式，让地图形成一个网格数组，数组的每一项即是一个地图元素。 创建一个pass对象，把每一关的数据都存入pass对象，包括maps（地图数组），cols（垂直列的个数），boxs（箱子的位置坐标），pe