|
四、 如何定制弹出菜单
很一些朋友可能对Fireworks4生成的弹出菜单不太满意，例如表格边框不能自己控制，有部分颜色也不能通过向导窗口进行设置，诸多的不满积累起来变成了对用Fireworks4制作弹出菜单这个新增行为的反感，甚至不愿意去使用它。其实我们可以通过手工修改Fireworks生成的fw_menu.js文件来对弹出菜单进行细微调整。用Fireworks4输出的弹出菜单文件的HTML文件中包含着控制菜单的fwLoadMenus()函数，该函数主要包括了我们在设置弹出菜单向导窗口中设定的一些参数，如字体、大小、链接地址等等，以及各级菜单的结构等这些前台显示的数据。
然而真正控制菜单交互性行为的是另外的一个命名为fw_menu.js文件，它被一同输出在与该HTML同级的站点文件夹中。fw_menu.js文件里面定义了一个Menu()函数，通过它与HTML文件中的fwLoadMenus()函数相互传递参数来显示我们的弹出菜单。在此函数中设定了弹出菜单的一些缺省参数，例如：如果我们不指定字体，那么最终默认显示的就是"Arial, Helvetica, Verdana,sans-serif"这一类型的字体；如果不定义字体大小，最终显示的就是这里指定的默认12象素大小。
然而还有些属性是我们不能在制作向导中设定的，如果您有些基本的JavaScript知识，您完全可以自己定义它们，接下来我们来介绍一下这些可定制的弹出菜单内容。
（1） 定制外观
在Dreamweaver或是其他编辑软件中打开fw_menu.js文件，在刚开始的代码中这么一段初始的定义：
function Menu(label, mw, mh, fnt, fs, fclr, fhclr, bg, bgh) （
this.version = "990702 [Menu; menu.js]";（当前弹出菜单的版本号，这是Fireworks4默认的）
this.type = "Menu";（菜单类型）
this.menuWidth = mw;（菜单项的宽度，如果不改变的话，默认的是从fwLoadMenus()函数中传递过来的值，当然您可以在这儿自定义菜单项的宽度）
this.menuItemHeight = mh; （菜单项的高度，如果不改变的话，默认的是从fwLoadMenus()函数中传递过来的值，当然您可以在这儿自定义菜单项的高度）
this.fontSize = fs||12;（默认的字体大小为12象素，您可以自己设置默认的值）
this.fontWeight = "plain";（默认的字体样式）
this.fontFamily = fnt||"arial,helvetica,verdana,sans-serif ";（默认的字体类型，您可以改变这其中的字体）
this.fontColor = fclr||"#000000";（默认的字体颜色）
this.fontColorHilite = fhclr||"#ffffff";（默认的当鼠标移上去时高亮显示的字体颜色）
this.bgColor = "# 555555";（默认的表格背景颜色）
this.menuBorder = 1;（默认的外边框宽度值）
this.menuItemBorder = 1;（默认的各单元格之间的间隔值）
this.menuItemBgColor = bg||"#cccccc";（默认的单元格背景色）
this.menuLiteBgColor = "#ffffff";（表格亮边框色值）
this.menuBorderBgColor = "#777777";（表格外框颜色值）
this.menuHiliteBgColor = bgh||"#000084";（默认的当鼠标移上去时单元格背景色）
this.childMenuIcon = "arrows.gif";（子菜单箭头标示图片）
此部分定义了弹出菜单的一些颜色设置，当我们制作弹出菜单时，如果选择了HTML表格形式菜单，最终输出的菜单文件其实是以表格形式存在的，我们可以通过修改上面的这些值来改变表格的外观。其中有几个选项的格式如下：
·this.fontColorHilite = fhclr||"#ffffff";
这表示它有一个默认值，是由fhclr变量定义的，如果您想自定义它的色彩您可以修改为： this.fontColorHilite = "#ffffff";
· this.menuHiliteBgColor = bgh||"#000084";
该参数代表的是当鼠标移上去时单元格背景色，该值有个默认值，就是您在Fireworks4的弹出菜单向导窗口中设置的Over State中的Cell的颜色值，它通过bgh变量传递值，如果您想自定义它的色彩您可以修改为：this.menuHiliteBgColor = "#cc0000s";
此外该fw_menu.js文件中还有如下两句代码需要引起注意：
var defaultHeight = menu.fontSize+6;（这句代码是用来控制单元格中文字的行高值）
var defaultIndent = menu.fontSize-5;（这句代码是用来控制单元格中文字的缩进值）
通过以上这些简短的介绍，我们可以看出，通过修改这个js文件，我们完全可以定制弹出菜单的外观、字体、颜色等属性。有一点需要指出 fw_menu.js文件将只被载入一次，然后浏览器将从缓存里调用它，这个23K大小的fw_menu.js文件将从浏览者进入站点后就一直放在缓存中。同理，如果我们的站点中存在多个弹出菜单，fw_menu.js也只能调用一个。
如果您对您的定制结果非常满意，并希望将您设置的弹出菜单风格设置为Fireworks弹出菜单输出的默认风格，您可以将您的这个fw_menu.js文件复制到Fireworks的\ Configuration\ HTML Code\目录下，记得先将原来的文件备份一下。 | 
