modifier le texte de la LinkBarItem lorsque vous cliquez sur linkbaritem

Question

Je souhaite créer une barre de liens personnalisée dans laquelle l'élément sélectionné est affiché avec un peu d'espace avant le texte ou tout autre élément, comme illustré dans l'image ci-dessous. Lorsque le second élément est sélectionné, deux a un certain effet et se déplace légèrement vers le côté gauche. Quand le troisième élément est sélectionné, alors trois a un certain effet et se déplace légèrement vers la gauche et deux bougent à leur emplacement d'origine.

S'il vous plaît Aide-moi ...

Merci à l'avance

Answer 1

Cette application simple demos une approche de base pour faire cela avec des espaces, ce n'est pas pare-balles par un y signifie, mais cela fonctionne, et sa construction sur Flex SDK 3.6.

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" width="100%" height="100%"> 

    <mx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 
      import mx.events.FlexEvent; 
      import mx.events.ItemClickEvent; 
      private var _labels:Array = ["link 1", "link 2", "link 3"]; 
      private var _links:ArrayCollection = new ArrayCollection(); 

      /** 
      * Creation complete handler for linkbar. 
      * Sets up the link bar data provider. 
      * 
      * @param FlexEvent creation complete event dispatched from link bar 
      * */ 
      private function links_creationCompleteHandler(event:FlexEvent):void{ 
       resetLinks(); 
       linkBar.dataProvider = _links; 
      } 

      /** 
      * Item click handler for link bar. 
      * Checks if user has selected the same link again. 
      * If not then resets the link bar data provider with original label values. 
      * Then adds event.label with 4 leading spaces at the index of the same string in array col. 
      * Then removes the original string form the array col. 
      * 
      * @param ItemClickEvent dispatched from link bar 
      * */ 
      private function links_itemClickHandler(event:ItemClickEvent):void{ 
       if (event.label.search(" ") == -1){ 
        resetLinks(); 
        _links.addItemAt(" " + event.label, event.index); 
        _links.removeItemAt(event.index + 1); 
       } 

      } 

      /** 
      * Remove all items from the link bar data provider. 
      * Then add back in the original items to reset item labels. 
      * */ 
      private function resetLinks():void{ 
       _links.removeAll(); 
       for each (var str:String in _labels){ 
        _links.addItem(str); 
       } 
      } 

     ]]> 
    </mx:Script> 

    <mx:LinkBar id="linkBar" 
       direction="vertical" 
       creationComplete="links_creationCompleteHandler(event)" 
       width="100" 
       itemClick="links_itemClickHandler(event)"/> 
</mx:Application> 

En résumé, il ajoute simplement des espaces sur le devant de l'étiquette d'élément sélectionnée. Il le fait en réinitialisant le fournisseur de données de barre de liens chaque fois que la barre de liens distribue l'événement de clic d'élément. Puis ajouter une étiquette de remplacement pour l'élément sélectionné, en supprimant l'ancien. Se sent un peu maladroit, et vous pourriez probablement faire quelque chose de plus lisse avec des effets.

Answer 2

vérifier, il pourrait être un grand début:

<s:layout> 
    <s:VerticalLayout gap="10"/> 
</s:layout> 

<fx:Script> 
    <![CDATA[ 
     import mx.controls.LinkButton; 
     import mx.events.ItemClickEvent; 

     import spark.effects.animation.RepeatBehavior; 

     [Bindable] public var offset:Number = 50; 


     protected function animateLink(event:ItemClickEvent):void { 
      _resetOtherButtons(event.index); 

      var linkButton:LinkButton = event.relatedObject as LinkButton; 
      if (linkButton) { 
       var moveEffect:Move = moveEffects.getItemAt(event.index) as Move; 
       if (moveEffect) { 
        moveEffect.target = linkButton; 
        if (moveEffect.isPlaying || (linkButton.x - offset) >= linkbar.x) { 
         moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft"); 
        } else { 
         moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft") + offset; 
        } 
        moveEffect.play(); 
       } 
      } 
     } 


     protected function _resetOtherButtons(index:int):void { 
      var length:int = moveEffects.length; 
      for (var i:int=0; i < length; i++) { 
       if (i != index) { 
        var moveEffect:Move = moveEffects.getItemAt(i) as Move; 
        if (moveEffect) { 
         moveEffect.xTo = linkbar.x + linkbar.getStyle("paddingLeft"); 
         moveEffect.play(); 
        } 
       } 
      } 
     } 
    ]]> 
</fx:Script> 

<mx:LinkBar id="linkbar" direction="vertical" itemClick="animateLink(event)" width="100" textAlign="left"> 
    <mx:dataProvider> 
     <s:ArrayCollection> 
      <fx:String>Test1</fx:String> 
      <fx:String>Test2</fx:String> 
      <fx:String>Test3</fx:String> 
     </s:ArrayCollection> 
    </mx:dataProvider> 
</mx:LinkBar> 

<fx:Declarations> 
    <s:ArrayCollection id="moveEffects"> 
     <s:Move/> 
     <s:Move/> 
     <s:Move/> 
    </s:ArrayCollection> 
</fx:Declarations>