zoukankan      html  css  js  c++  java
  • Flex4的导航容器TabNavigator

    目前常用的Flex4的导航容器有TabNavigator,Accordion,ViewStack,目前Flex4的大部分可视UI组件都被替换为<s:开头【也通常叫Spark组件】取代了Flex3的<mx:标签

    首先来说下TabNavigator

    <span style="font-size: large;"><?xml version="1.0" encoding="utf-8"?>
    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"  
    			   xmlns:s="library://ns.adobe.com/flex/spark" 
    			   xmlns:mx="library://ns.adobe.com/flex/mx" 
                 >
    	
    
    	<s:layout>
    		<s:HorizontalLayout verticalAlign="middle" horizontalAlign="center" />
    	</s:layout>
    	
    	<s:Panel title="Accordion|TabNavigator|ViewStack| Container[TabBar|LinkBar]" width="600" height="100%"
    			 color="0x000000" 
    			 borderAlpha="0.15">
    		
    		<s:layout>
    			<s:VerticalLayout paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10"/>
    		</s:layout>
    		
    		<s:Label width="100%" color="0x323232"
    				 text="选择一个导航按钮来改变面板"/>
    		
    		<mx:TabNavigator id="mynavigator" color="0x323232" width="100%" height="100%" resizeToContent="true">
    			<!-- Define each panel using a VBox container. -->
    			<s:NavigatorContent label="面板1" >
    				<mx:Label text="container panel 1"/>
    			</s:NavigatorContent>
    			
    			<s:NavigatorContent label="面板2">
    				<mx:Label text="container panel 2"/>
    			</s:NavigatorContent>
    			
    			<s:NavigatorContent label="面板3">
    				<mx:Label text="container panel 3"/>
    			</s:NavigatorContent>
    		</mx:TabNavigator>
    		
    		<s:Label width="100%" color="0x323232"
    				 text="通过下列按钮也可以选择面板的改变"/>
    		
    		<s:HGroup color="0x323232">
    			<s:Button label="选择面板1" click="mynavigator.selectedIndex=0;"/>
    			<s:Button label="选择面板2" click="mynavigator.selectedIndex=1;"/>
    			<s:Button label="选择面板3" click="mynavigator.selectedIndex=2;"/>
    		</s:HGroup>
    </s:Panel>
    	
    </s:Application></span>
    

      

    如果想要换成是如下图的这种导航

      只需要将<mx:TabNavigator换成<mx:Accordion对应的标签即可

    最后要说明的是ViewStack可不一样,如果我们直接将<mx:TabNavigator换成<mx:ViewStack那么只能显示一项的内容并且也没有导航条,需要添加一行导航条代码即可

    在<mx:TabNavigator代码块之前加上<mx:LinkBar dataProvider="{mynavigator}" />

    或者是<mx:TabBar dataProvider="{mynavigator}" />或者是

    <s:ButtonBar dataProvider="{mynavigator}" />

    或者是<mx:ToggleButtonBar dataProvider="{mynavigator}"/>

    都会显示出很好的导航条效果,这个mynavigator指的是<mx:ViewStack id="navigator"的这个ID了

    LinkBar的效果图

    TabBar的效果图

    ButtonBar和ToggerButtonBar和的效果图一样

  • 相关阅读:
    [vue]vue路由篇vue-router
    [vue]spa单页开发及vue-router基础
    [css]table的拆分
    [sh]md5sum接变量,find排除,sh判断文件存在
    [vue]通过watch实现数据双向绑定
    [django]form不清空问题解决
    [vue]实现父子组件数据双向绑定
    springboot2.0 如何异步操作,@Async失效,无法进入异步
    kafka搭建笔记
    Springboot2.x+shiro+redis(Lettuce)整合填坑
  • 原文地址:https://www.cnblogs.com/regalys168/p/3626886.html
Copyright © 2011-2022 走看看