小小菜鸟的web菜园子

web开发学习。好记性不如烂笔头。每天进步一点点!

导航

Flex中无边框透明背景MenuBar实现.

打开FLEX帮助搜了半天,只有bordercolor属性,没有borderAlpha属性,
不想要那个该死的边框,怎么半呢
方法在这里:(原作者只针对FLEX2,经测试,在FLEX3中一样是OK的~)
来自:http://www.cnblogs.com/taobataoma/archive/2008/01/22/1048332.html

在Flex中,大家是否发现MenuBar的背景与边框是不能去掉的,其实这是因为MenuBar的缺省的backgroundSkin属性使用的是mx.skins.halo.MenuBarBackgroundSkin,不管您怎么设置,该skin都会绘制背景以及边框,所以我们不能去掉MenuBar的边框。

既然这样的话,要去掉边框,只需要不使用该Skin就可以,所以我们自定义了一个Skin:MenuBarNoBorderFillSkin,该Skin什么都不做,只是用来替代MenuBarBackgroundSkin而已。

MenuBarNoBorderFillSkin.as:

package com.eshangrao.skin{import mx.skins.ProgrammaticSkin;import flash.display.Graphics;public class MenuBarNoBorderFillSkin extends ProgrammaticSkin{public function MenuBarNoBorderFillSkin(){super();}}}

另外,使用了MenuBarNoBorderFillSkin以后,MenuBar的菜单栏不再根据鼠标移动显示不同的选择状态了,所以我们又做了个MenuBarActiveSkin类来响应鼠标,然后将MenuBar的itemDownSkin和itemOverSkin属性MenuBarActiveSkin,这样菜单栏就可以显示不同的状态。

MenuBarActiveSkin.as:

package com.eshangrao.skin{import mx.skins.ProgrammaticSkin;import flash.display.Graphics;import mx.utils.ColorUtil;public class MenuBarActiveSkin extends ProgrammaticSkin{public function MenuBarActiveSkin(){super();}override protected function updateDisplayList(w:Number, h:Number):void{var backgroundAlpha:Number = getStyle("backgroundAlpha");var rollOverColor:uint=getStyle("rollOverColor");graphics.clear();drawRoundRect(0,0,w,h,5,rollOverColor,backgroundAlpha);}}}

测试代码如下:

<mx:MenuBar labelField="@label" dataProvider="{menubarXML.menuitem}" width="100%"backgroundSkin="com.eshangrao.skin.MenuBarNoBorderFillSkin"itemDownSkin="com.eshangrao.skin.MenuBarActiveSkin"itemOverSkin="com.eshangrao.skin.MenuBarActiveSkin"/>

查看示例| 查看完整源代码

posted on 2008-03-05 16:21  『小小菜鸟』  阅读(4018)  评论(0编辑  收藏  举报