7-JavaScript实用技巧与高级应用.pptVIP

JavaScript实用技巧与高级应用 第十三讲 JavaScript实用技巧与高级应用（一） 第十三讲 JavaScript实用技巧与高级应用（一） 1 建立函数库 在网页设计与制作过程中，往往会重复地应用一些JavaScript函数，一般应将这些常用的函数存储在一个外置的独立的JavaScript文件中，作为网页制作的JavaScript函数库。应用时，直接调用函数库文件即可。 函数库中的函数一般可分为下面6种类型： 第十三讲 JavaScript实用技巧与高级应用（一） 用于简化程序的函数 用于校验用户输入的函数 用于取值与设置值的函数 用于字符串处理的函数 用于列表处理的函数 用于网页元素显示的函数 例：许愿墙网页 第十四讲 JavaScript实用技巧与高级应用（二） 第十四讲 JavaScript实用技巧与高级应用（二） 4 树状导航菜单和收缩式导航菜单 树状导航菜单 效果展现 例：li11-树状导航菜单.html 第十四讲 JavaScript实用技巧与高级应用（二） 程序设计思路 页面布局：用层（CSS+DIV）布局。 菜单的展开和隐藏：用层的显示和隐藏属性 程序设计要点 单击一级菜单，调用函数w(vd) 如：onClick=w(gc)“ 单击二级菜单，调用函数k(vd) 如：onClick=k(fgc91)“ 程序的实现 分析源程序 第十四讲 JavaScript实用技巧与高级应用（二） 收缩式导航菜单 效果展现 例：li11-收缩式导航菜单.html 第十四讲 JavaScript实用技巧与高级应用（二） 程序设计思路 页面布局：用层（CSS+DIV）布局。 菜单的展开和隐藏：用层的显示和隐藏属性 展开菜单的同时收缩其他菜单：先收缩所有菜单，再展开当前菜单。 程序设计要点 单击一级菜单，调用函数spreadMenu(n) 如：onClick=javascript:spreadMenu(1) 单击二级菜单，调用函数spreadSubMenu(k) 如：onClick=javascript:spreadSubMenu(1) 程序的实现 分析源程序 第十五讲 JavaScript实用技巧与高级应用（三） 第十五讲 JavaScript实用技巧与高级应用（三） 5 下拉菜单 效果展现 例：鸿博图书馆管理系统的半透明背景下拉菜单 第十五讲 JavaScript实用技巧与高级应用（三） 设计思路 导航链接（主菜单）的制作：用表格布局，相应菜单项上添加事件。 子菜单（6个）的制作：用表格布局，6个子菜单对应6个表格。将6个表格对应的HTML代码串存在6个变量中。 子菜单的显示/隐藏的实现：创建一个层，利用层的可见性属性来实现。当要显示某子菜单时，将该子菜单放入层中，并设置显示层；当要隐藏已显示的子菜单时，设置隐藏层。 设置层（子菜单）的位置：一般情况下，层在对应主菜单项的下方，并左对齐。考虑特殊情况。（难点） 第十五讲 JavaScript实用技巧与高级应用（三） 什么情况下要隐藏子菜单：当鼠标移到主菜单与子菜单所形成的区域外时要隐藏子菜单。（难点） 子菜单外观的设置：边框、半透明效果、阴影、菜单项的动态效果。 考虑用户所使用的浏览器的类型和版本：IE4.0及以上版本、Netscape Navigator 4、 Netscape Navigator 4 第十五讲 JavaScript实用技巧与高级应用（三） 设计步骤及程序实现 在页面中加入导航链接（主菜单）：用表格布局，相应菜单项上添加事件。 在页面中加入一个div层：设置id=popmenu，引用CSS样式class=menuskin，添加事件。 在CSS样式表文件中加入menuskin类选择符，设置层的边框、背景、半透明效果、可见性等属性。 创建一个单独的.js文件，编写实现下拉菜单的JavaScript代码。该代码中主要包括以下函数： 第十五讲 JavaScript实用技巧与高级应用（三） 显示及定位层（子菜单）的函数：showmenu() 求主菜单的x方向上位置的函数：IE_x() 求主菜单的y方向上位置的函数：IE_y() 隐藏层的函数：hidemenu() 延迟隐藏层的函数：delayhidemenu() 清除延迟隐藏层的函数：clearhidemenu() 动态隐藏层的函数：dynamichide() 设置菜单背景的函数：overbg()、outbg 设置层阴影的函数：IE_dropshadow