《客户端应用程序开发》课件-项目五 页面布局与特效

博客页面布局博客页面布局博客页面布局1、分析架构：根据功能需求绘制出页面架构图2、模块拆分：将页面按功能分割成多个部分，分别定义div，进行总体布局3、在网页中插入div标签，向div中填充网页内容4、格式调整：定义并完善各个div的CSS，调整色彩及内容等任务步骤博客页面布局博客页面布局JavaScript实现表单验证表单验证使用场景验证表单数据是否为空？验证密码是否6-16位数字和字母或下划线的组合?验证输入是否是一个正确的email地址？验证日期是否输入正确？验证表单输入内容是否为数字型？…1、一个良好设计的web页面，应该在数据被发送往服务器之前对HTML

表单中的输入数据进行验证。保证正确合法的输入。2、涉及到必须由后端参与的业务逻辑验证（比如：该用户名是否已被使用），由服务器端来完成。3、使用JavaScript来实现表单客户端验证。表单及其元素的访问一、通过表单对象获取表单元素对象1、获得表单对象：document.forms[index]document.表单名称2、获取表单内元素对象：表单对象.elements[index]表单对象.元素名称二、通过DOM直接获取表单元素对象：document.getElementById(“元素id”)document.getElementsByName(“元素名”)document.getElementsByTagName(“标记名”)表单验证方法使用javascript字符串常用函数来验证：Length,substr,charAt例：If(pwd.length<6||pwd.length>10){alert(‘’密码长度在6-10个字符之间);return false;}正则表达式正则表达式(regular

expression)描述了一种字符串匹配的模式（pattern）。语法：方括号用于查找某个范围内的字符，如：[a-z]元字符：\w匹配字母或数字或下划线^匹配字符串的开始$匹配字符串的结束{n,m}

m

和

n

均为非负整数，其中n

<=

m。最少匹配

n

次且最多匹配

m

次。……检测：RegExpObject.test(string)用于检测一个字符串是否匹配某个模式if

(!(/^[a-zA-Z]\w{5,9}$/.test(username.value))){alert("用户名由6-10位的字母、数字、下划线组合，且字母开头");return false;}JavaScript实现导航特效导航特效展示折叠菜单技术实现UL

实现一级菜单;UL中每个LI为具体的菜单项，显示为Block块，即项目1，项目2，项目3…，UL中每个LI菜单项包含一个UL作为二级菜单（子菜单），通过Li上的鼠标单击事件程序控制其包含的UL二级菜单是否可见；以上可类推实现三级菜单…每个菜单项的结构是：<a>标签做菜单标题，<UL>做子菜单。重点菜单样式表鼠标事件的实现及事件绑定块显示控制逻辑JavaScript实现选项卡特效选项卡特效展示选项卡，也称页签，英文用Tab表示。Tab将不同的内容重叠放在一个布局块内，重叠的内容区里每次只有其中一个是可见的。Tab可以在相同的空间里展示更多的信息，节约版面。特点及思路分析Tab特点:每个页签由标题区和内容区组成；标题和内容区一一对应；至少有两组页签以便可以切换；所有页签只有两种状态：选中和未选中；选中页签(当前页签)只有一个并突出高亮显示；页面载入后默认显示第一个；鼠标点击或移上时切换；技术实现使用ul

/div实现tab标题，选项卡1，选项卡2……;使用div/section

实现tab内容，内容1，内容2……；定义样式，如：tab标题选中样式，初始tab内容隐藏样式…