理论第十三章结业项目途乐行项目一幻灯片.pptVIP

实现思路 创建函数calTotal()，封装计算、显示总价的功能。要使用jQuery对象的each()、html()等方法，calTotal()函数的代码框架如下： //算总价 function calTotal(){ var sum=0; //保存总价 //遍历表格中有title=price属性的的单元格 $(#shop-xx li.rs).each(function() { sum=sum+parseFloat($(this).text().substr(1));//价格的累加 }); //显示总价 … } 13.3 编写特效用例 cart.html页面中删除单行旅游线路 当单击购物车页面中某一行的“删除”链接时，页面处于遮罩状态并在窗口的中间位置出现“删除提示框”。 13.3 编写特效用例 实现思路 （1）创建函数setDialog()，设置提示框的top和left属性，使其出现时，位于窗口的中间位置。 //设置对话框的位置 function setDialog(){ var $wObj=$(window);//当前浏览器窗口 var $dObj=$(div.dialog);//当前提示框 var widW=$wObj.width();//当前浏览器窗口的宽度 var widH=$wObj.height();//当前浏览器窗口的高度 var diaW=$dObj.width(); //提示框的宽度 var diaH=$dObj.height();//提示框的高度 //计算提示框居中时的左边距 var left=(widW-diaW)/2; //计算提示框居中时的上边距 var top=(widH-diaH)/2; $dObj.css({left:left,top:top}); } 13.3 编写特效用例 实现思路 （2）创建函数showMask()，设置遮罩层的大小并显示。代码框架如下： function showMask() { var bh = $(body).height(); //获取页面内容的高度 var bw = $(body).width();//获取页面内容的宽度 $(div.mask).css({ //设置遮罩层的高度，覆盖整个页面内容 … //设置遮罩层的宽度 … //设置遮罩层的显示状态 }); } 13.3 编写特效用例 实现思路 （3）在页面加载完毕事件中，声明全局变量delUlId，保存单击的“删除”链接所在的的无序列表ul的id属性值。 var delUlId;//保存要删除的无序列表的id属性值 13.3 编写特效用例 实现思路 （4）在页面加载完毕事件中，给每一列表项的“删除”链接的单击事件绑定方法，调用showMask()方法显示遮罩层。调用setDialog()方法设置提示框的位置后并显示。并给delUlId变量赋值。代码框架如下所示： $(.btnDel).click(function(){//单击“删除”链接 //显示透明度是30%的遮罩层 … //设置提示框出现的位置 … //显示提示框 … //获取当前元素的祖先元素ul后，保存要删除的员工所在ul的id属性值 delUlId=$(this).parents(ul).attr(id); }); 13.3 编写特效用例 实现思路 （5）给“删除确认提示框”中的“取消”按钮和“关闭”图片的单击事件绑定方法，使用hide()方法关闭提示框和遮罩层，页面恢复正常的功能。 13.3 编写特效用例 实现思路 （6）给“删除确认提示框”中的“确定”按钮单击事件绑定方法，使用remove()方法实现删除单行的功能，其删除列表的id保存在全局变量delUlId中，并调用calTotal()方法重新计算、显示应付金额，关闭提示框和遮罩层，并调用picLight()函数，实现删除后剩余的旅游线路图片的灯箱效果。代码框架如下所示： $(#btnSure).click(function(){//单击提示框的确定按钮 //把删除链接所在的无序列表从id=shop-xx的div中删除 … //对话框关闭 … //遮罩层关闭 … //计算、显