1

私はフレックスページの構築を手伝うために雇われ、フラッシュビルダーについて学び始めて 3 日間、トップレベルの項目がメニューバーでハイライト表示される方法を変更するという試練を与えられました。現在はデフォルトなので、アイテムをホバーすると色が青に変わります。

私がやりたいのは、マウスでホバーしたときにテキストに下線が引かれ、その色が青に変わらないようにすることです。

CSSで変更しようとしましたが、変更されるのはトップレベルではなくサブメニュー項目だけです:

BorderContainer に保持されるメニューバーを担当するメイン アプリケーションのコード:

<mx:MenuBar id="mbPrimaryMenu" height="40" labelField="@label"
dataProvider="{primaryMenuItems}" change="mbPrimaryMenuChangeHandler(event)"/>

メニューバー全体 (最上位の要素を含む) と思われるものの書式設定を担当する CSS:

#mbPrimaryMenu {
    chromeColor: #333333;
    borderVisible: true;
    borderColor: #000000;
    borderAlpha: 0;
    borderStyle: solid;
    borderWeight: 2;
    color: #FFFFFF;
    contentBackgroundColor: #333333;
    contentBackgroundAlpha: 0.8;
    rollOverColor: #AAAAAA;
    itemRollOverColor: #FF0000;

どうすればいいですか？CSS、MenuBarItemRenderer? マウスがその要素の 1 つの上に移動したときに、メニューバーがその要素を強調表示する方法はどこにありますか?

4

1 に答える 1

1

メニュー バーの最初のレベルのテキストに下線textDecorationを付けるには、MXML コンポーネントを追加するプロパティを設定するだけです。あれは：

<mx:MenuBar width="100%" height="20" textDecoration="underline" dataProvider="{myData}"/>

メニュー バーのトップ レベルの背景色を変更するには、デフォルトのスキンをコピーして編集する必要があります。これは難しそうに見えるかもしれませんが、実際に行うのは非常に簡単です。（以前にカスタムスキンを作成したことがない場合は、ここで私の回答を参照して開始してください：Add search icon inside spark TextInput in Flex）

スキンは MXML で適用できます。または、CSS を使用しているため、次を使用して CSS で適用できます。

mx|MenuBar {
backgroundSkin: ClassReference("com.mycompany.views.components.skins.MyButtonSkin");
   /* changes background color at top level*/
itemSkin: ClassReference("com.mycompany.views.components.skins.MyMenuItemSkin"); 
   /* changes background HOVER color at top level of menu bar */
}

ButtonSkin のデフォルト スキンからスキン MyButtonSkin (独自の名前を使用) を作成し、デフォルト スキン MenuItemSkin から MyMenuItemSkin (独自の名前を使用) を作成できます。ただし、メニュー バーのトップ レベルのホバー カラーを変更するには、MyMenuItemSkin のみが必要です。

MyMenuItemSkinスキン フォルダーにスキンを配置したら、塗りつぶしを含むレイヤー 1 セクションを編集します。ここでは、次のようなことができます。

<!-- layer 1: fill; effects main level of menubar only -->
<s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="up,disabled" >
    <s:fill> 
        <s:LinearGradient rotation="90">
            <s:GradientEntry color.over="0xFF0000" 
                             color.down="0x00FF00"
                             alpha.over="0.8" alpha.down="1" 
                             />
            <s:GradientEntry color.over="0xAA0000" 
                             color.down="0x00AA00"
                             alpha.over="0.8" alpha.down="1" 
                             />
        </s:LinearGradient>
    </s:fill>
</s:Rect>

保存してプログラムを実行します。次に、必要に応じて色を微調整します。

于 2013-04-16T21:37:52.817 に答える