menubar

百度空间 | 百度首页 | 登录 莫等闲,白了少年头。空悲切。因为曾经感动所以难以忘怀 主页博客相册|个人档案 |好友   查看文章   
Flex中无边框透明背景MenuBar实现.2009-06-18 12:27
Flex中无边框透明背景MenuBar实现.
关键字: 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以后,MenuBar的菜单栏不再根据鼠标移动显示不同的选择状态了,所以我们又做了个MenuBarActiveSkin类来响应鼠标,然后将MenuBar的itemDownSkin和itemOverSkin属性MenuBarActiveSkin,这样菜单栏就可以显示不同的状态。


完整代码见下:

MenuBarWidthNoBorder.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
    <mx:Script>
    <![CDATA[
            import com.eshangrao.skin.MenuBarNoBorderFillSkin;
            import com.eshangrao.skin.MenuBarActiveSkin;           
            [Bindable]
            public var menubarXML:XML =
                <menu>
                    <menuitem label="System" >
                        <menuitem label="File"/>
                        <menuitem label="Save"/>
                        <menuitem type="separator"/>  
                        <menuitem label="Exit"/>
                    </menuitem>
                    <menuitem label="Edit">
                        <menuitem label="Cut"/>
                        <menuitem label="Parste"/>
                        <menuitem label="Delete"/>                       
                    </menuitem>
                    <menuitem label="Navigate">
                        <menuitem label="Go Into" state="killTermState"/>
                        <menuitem label="Go To"/>
                    </menuitem>
                </menu>;  
        ]]>
    </mx:Script>
    <mx:ApplicationControlBar width="100%">
        <mx:MenuBar labelField="@label" dataProvider="{menubarXML.menuitem}" width="100%"
            backgroundSkin="com.eshangrao.skin.MenuBarNoBorderFillSkin"
            itemDownSkin="com.eshangrao.skin.MenuBarActiveSkin"
            itemOverSkin="com.eshangrao.skin.MenuBarActiveSkin"
        />
    </mx:ApplicationControlBar>
</mx:Application>
 


MenuBarActiveSkin.as

路径放在与COM/eshangrao/skin/下(com与主文件MenuBarWidthNoBorder.mxml在同一路径)


代码
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);   
               
         }   
     }   
}  

 

MenuBarNoBorderFillSkin.as

路径放在与COM/eshangrao/skin/下(com与主文件MenuBarWidthNoBorder.mxml在同一路径)


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

类别:我解决的问题 |  | 添加到搜藏 | 分享到i贴吧 | 浏览(259) | 评论 (1)  上一篇:自定义Flex的Loading界面(源码)    下一篇:背完这444句,你的口语绝对不成... 相关文章:? flex中Menubar组件dataprovider...          ? Flex MenuBar菜单实例
? Flex MenuBar的itemClick问题          ? flex menubar popUpMenuButton重...
 最近读者: 登录后,您就出现在这里。     
    jiangsong3 tingfeng85 我杨石仲 暗黑侧卫 
 网友评论:1 匿名网友  2009-08-04 21:24 | 回复 0000 
      发表评论:姓 名:     注册 | 登录 *姓名最长为50字节
  
网址或邮箱:  (选填)
  
内 容: 插入表情  ▼ 闪光字
 
 
 
  
验证码:   请点击后输入四位验证码,字母不区分大小写
看不清? 
      取消回复

     

?2010 Baidu

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值