实践第十二章实践幻灯片.pptVIP

实践十二 jQuery 插件 实践目标 制作“删除提示框”拖动的效果 使用Validate插件，验证格式的合法性 利用draggable拖拽插件，制作删除提示框拖动的效果。 继续给第九章指导部分的案例添加如下功能： 在第九章，已经实现当单击“删除”链接时，显示遮罩层和删除提示框，删除提示框在窗口的位置是固定的，即距离窗口左端500px，距离窗口上端100px。现在需要使删除提示框能跟随鼠标进行移动。提示框初始的位置如效果图： 任务一：制作删除提示框拖动的效果 利用draggable拖拽插件，制作删除提示框拖动的效果。 任务一：制作删除提示框拖动的效果 在第九章指导部分的案例基础上，增加删除提示框拖动的特效。此特效主要利用jQuery UI中的draggable(拖拽)插件来实现。首先在html文件中导入jQuery UI的框架，然后调用插件的draggable()方法实现拖动效果。 任务一：制作删除提示框拖动的效果 任务一：制作删除提示框拖动的效果 //设置拖动时的效果 var setting={opacity:0.7, //拖拽过程中透明度 containment:parent,//拖拽的区域 revert:false//拖拽结束后是否返回原地，true:返回，false:不返回 }; $(#dialog).draggable(setting); 继续给美淘网购物车cart.html页面添加如下功能： 在第九章，已经实现当单击“删除”链接时，显示遮罩层和删除提示框，删除提示框位于窗口的中间位置。现在需要使删除提示框能跟随鼠标进行移动。提示框初始的位置如下图： 任务一：制作删除提示框拖动的效果 使用Validate插件，验证用户输入数据的格式是否合法。 在页面中，验证用户输入的用户名、E-Mail和联系电话的格式是否合法。具体要求如下所述： （1）用户名、E-Mail和联系电话必须都要输入 （2）用户名只能由汉字、大小写字母、数字或下划线组成 （3）联系电话由13、15或18开头的11位数字组成 （4）如果格式有误，即时提示错误信息 任务二：使用Validate插件，验证格式的合法性 使用Validate插件，验证用户输入数据的格式是否合法。 任务二：使用Validate插件，验证格式的合法性 任务二：使用Validate插件，验证格式的合法性 form id=regFrm ... input id=userName name=userName / ... input id=email name=email / ... input id=phone name=phone type=text / ... input class=submit type=submit value=Submit/ ... /form 任务二：使用Validate插件，验证格式的合法性 // 调用jQuery Validate插件的addMethod()方法，增加验证的规则，代码如下： jQuery.validator.addMethod(regex, //addMethod方法的第1个参数:增加的规则名称 function (value, element, params) { //addMethod方法的第2个参数:验证方法，参数（被验证元素的值，被验证元素，参数） var exp = new RegExp(params); //实例化正则对象，参数为传入的正则表达式 return exp.test(value); //测试是否匹配 },格式错误); //addMethod方法的第3个参数：错误提示信息 // 自定义验证规则“regex”后，利用此规则验证用户名的格式，代码如下： userName: { required: true, regex: /^[\u4e00-\u9fa5\w]+$/ } //利用“regex”规则，验证联系电话的格式，代码如下： phone: { required: true, regex: /^(13|15|18)\d{9}$/ } 验证注册页面中，用户输入的用户名、E-Mail、密码、确认密码和联系电话的格式是否合法。具体要求如下所述： （1）用户名、E-Mail、密码、确认密码和联系电话必须都要输入 （2）用户名只能由汉字、大小写字母、数字