flex TabNavigator 切换之前给出提示（转）

最新推荐文章于 2017-12-19 09:32:03 发布

最新推荐文章于 2017-12-19 09:32:03 发布 · 161 阅读

文章标签：

#Flex #Adobe #XML

Flex 专栏收录该内容

46 篇文章

订阅专栏

本文介绍了一个使用 FlexTabNavigator 实现的带有确认切换功能的 Tab 导航器示例。该示例通过监听 Tab 的点击事件，在切换之前显示一个确认对话框，允许用户选择是否进行 Tab 的切换。此外，还介绍了如何初始化 Tab 导航器以及如何设置 Tab 的内容。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="init()">
<mx:Script>
<![CDATA[
   import mx.controls.TabBar;
   import mx.controls.Button;
   import mx.controls.Alert;
   import mx.events.CloseEvent;
   import mx.managers.PopUpManager;

   private var iTabIndex:int;
   private var iToTabIndex:int;
   private var _updateAlert:Alert;

   public function init():void
   {
    iTabIndex = 0;
    iToTabIndex = 0;
    var btn:Button;
    for(var i:int=0;i<tab.getChildren().length;i++)
    {
     btn = tab.getTabAt(i);
     btn.addEventListener(MouseEvent.MOUSE_DOWN,tabClickHandler,false,999999999);
    }
   }
   private function tabClickHandler(event:MouseEvent):void
     {
         iToTabIndex = event.currentTarget.parent.getChildIndex(event.currentTarget);
         //终止事件
         event.stopImmediatePropagation();
         //给出提示message
         if(iToTabIndex !=iTabIndex)
         {
         showGoBack();
         }
     }
     // alert
   public function showGoBack():void
   {
    Alert.buttonWidth = 100;
    Alert.yesLabel    = "yes";
    Alert.noLabel     = "no";
    var updateLabel:String = "要切换tab吗？";

    this._updateAlert = Alert.show(updateLabel, "", Alert.YES | Alert.NO);
    this._updateAlert.addEventListener(CloseEvent.CLOSE,closeShowGoBack);
   }
   private function closeShowGoBack(e:CloseEvent):void
   {
    switch (e.detail)
    {
     case Alert.YES:
      iTabIndex     = iToTabIndex;
      tab.selectedIndex   = iTabIndex;
      break;
     case Alert.NO:
      PopUpManager.removePopUp(this._updateAlert);
      break;
    }
   }

   public function change(e:Event):void
   {
    Alert.show("CHANGE " + tab.selectedIndex.toString() + "!!!");

   }
   //注释;creationPolicy="all",把tab的所有child全部初始化


]]>
</mx:Script>
<mx:TabNavigator creationPolicy="all" id="tab" x="21" y="28" change="change(event)" width="200" height="200" >
   <mx:Canvas id="a" label="aa" width="100%" height="100%">
    <mx:TextInput x="10" y="10" width="178"/>
   </mx:Canvas>
   <mx:Canvas id="b" label="bb" width="100%" height="100%">
    <mx:Button id="abtn" x="10" y="50" label="Button"/>
   </mx:Canvas>
</mx:TabNavigator>
</mx:Application>