0

グラデーションの背景色が含まれるように、TabBarの選択されたタブを設定する方法はありますか? fillColorsと を組み合わせてfillAplhas使用​​するスタイルになると思いましたが、これにより、以下のコードを実行するとわかるように、選択されていない他のタブの背景色が設定されます。

目標は、選択したタブ インスタンスの背景色をエンド ユーザーに選択させることです (たとえば、ColorPicker を使用して)。そして、この色にグラデーション効果を適用したいと思います。

私はこれをあまりにも長い間機能させようとしてきたので、どんな助けもいただければ幸いです。私はこれをGoogleで際限なく検索しましたが、まだ有効な解決策を得ることができません.

private function updateTabColor():void {        
    var selectedTabIndex : int = tabBar.selectedIndex;        
    var tab:Tab = Tab(tabBar.getChildAt(selectedTabIndex));

    /* this works but not on the selected tab */
    tab.setStyle("fillColors", ["#000000", "000000"]);
    tab.setStyle("fillAlphas", [1.0, 0.4]);

    /* when not commented and as expected, tab is red */ 
    //tab.setStyle("backgroundColor", "red");

    /* when not commented, doesn't work as it appears it's deprecated in 3.0 */
    //tab.setStyle("selectedFillColors", "red");   
}

<mx:TabBar id="tabBar" dataProvider="viewStack" width="100%" itemClick="{updateTabColor()}"/>
<mx:ViewStack id="viewStack"  width="100%" height="100%">
  <mx:Box id="tab1" label="tab1" width="100%" height="100%"/>
  <mx:Box id="tab2" label="tab2" width="100%" height="100%"/>
  <mx:Box id="tab3" label="tab3" width="100%" height="100%"/>
</mx:ViewStack>
4

1 に答える 1

0

http://userflex.wordpress.com/2008/02/14/skin-tabnavigator-tabs/

^ 提供されたスタイルを使用する代わりに、タブのスキンを使用することについて説明します

歴史のためにここにコピー

CSS

.tab
{
     up-skin: ClassReference("TabSkin");
     down-skin: ClassReference("TabSkin");
     over-skin: ClassReference("TabSkin");
     selected-up-skin: ClassReference("SelectedTabSkin");
     selected-down-skin: ClassReference("SelectedTabSkin");
     selected-over-skin: ClassReference("SelectedTabSkin");

     background-color: #FFFFFF;

     font-weight: normal;
     color: #000000;
     text-roll-over-color: #000000;

     corner-radius: 0;

     border-style: solid;
     border-thickness: 1;
     border-color: #000000;
}

.selectedTab
{
     background-color: #000000;

     font-weight: bold;
     color: #FFFFFF;
     text-roll-over-color: #FFFFFF;

     corner-radius: 0;

     border-style: solid;
     border-thickness: 1;
     border-color: #000000;
}

AS3

package
{
     import mx.containers.Canvas;

     public class TabSkin extends Canvas
     {
         override protected function updateDisplayList
             (w : Number, h : Number) : void
         {
             this.styleName = "tab";

             super.updateDisplayList (w, h);
         }
     }
}

package
{
     import mx.containers.Canvas;

     public class SelectedTabSkin extends Canvas
     {
         override protected function updateDisplayList
             (w : Number, h : Number) : void
         {
             this.styleName = "selectedTab";

             super.updateDisplayList (w, h);
         }

     }
}

MXML

<mx:TabNavigator id="tabs"
    tabStyleName="tab" selectedTabTextStyleName="selectedTab" />
于 2012-09-27T05:11:01.887 に答える