Flex之旅:第二部分:容器与布局(3)---高级的TabNavigator(SuperTabNavigator)
2015-03-26 16:16
477 查看
SuperTabNavigator
SuperTabNavigator来自flexlib(https://github.com/flex-users/flexlib)
可以下载下来,配置一下,运行看看flexlib自带的例子。但是个人感觉,功能是有的,但是肯定有bug,但是页面效果还是不太美观。
而且感觉flexlib三年都人没有维护了,在sdk4.5上编译后的效果不好看~~~~tabbar的位置都不好。
看看代码吧:
几点说明:
例子里面,我创建了SuperTabNavigator和TabNavigator
SuperTabNavigator默认是支持拖拽(drag & drop)的去排列各个tab的位置(index),在这里我给禁用了
SuperTabNavigator上面还是有bug的,所以我就不太相信flexlib里面的组件了。。。。。。。。。。。。。
xmlns:flexlib="http://code.google.com/p/flexlib/" 去定义flexlib的命名空间
通过nav.setClosePolicyForTab( 0, SuperTab.CLOSE_NEVER ); 设置第一个tab页是不可以关闭的。
我觉得这里面最重要的就是callLater(),它可以:
提高页面初始化性能
确保某个方法要引用的属性存在
adobe对其的解释:http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7b06.html
SuperTabNavigator和TabNavigator 在绘制好之后,tabbar区域和内容区域之间默认的会有间隙的!!!那么可以通过设置paddingTop="50"来调整
运行截图:(有点丑
)
好吧,感觉flexlib还是不太靠铺,虽然多一些功能性组件,但是觉得会有bug。
如果想用第三方的flex高能组件库,还是看看这个商业收费版吧:http://www.ardisialabs.com/demo/
但是不提供下载,本人无法使用。。。。。。。。也就只能看看了。。。。。。。。。。。。。。
SuperTabNavigator来自flexlib(https://github.com/flex-users/flexlib)
可以下载下来,配置一下,运行看看flexlib自带的例子。但是个人感觉,功能是有的,但是肯定有bug,但是页面效果还是不太美观。
而且感觉flexlib三年都人没有维护了,在sdk4.5上编译后的效果不好看~~~~tabbar的位置都不好。
看看代码吧:
<?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" xmlns:flexlib="http://code.google.com/p/flexlib/" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)"> <fx:Script> <![CDATA[ import flexlib.controls.tabBarClasses.SuperTab; import mx.events.FlexEvent; protected function application1_creationCompleteHandler(event:FlexEvent):void { callLater( initNonClosableTab ); } private function initNonClosableTab():void { nav.setClosePolicyForTab( 0, SuperTab.CLOSE_NEVER ); } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:VGroup width="100%" height="100%" horizontalAlign="center"> <s:HGroup width="100%" height="100%"> <flexlib:SuperTabNavigator id="nav" scrollSpeed="25" stopScrollingEvent="{MouseEvent.MOUSE_UP}" startScrollingEvent="{MouseEvent.MOUSE_DOWN}" width="200" height="400" horizontalGap="0" closePolicy="{SuperTab.CLOSE_ROLLOVER}" dragEnabled="false" > <mx:Box id="b1" width="600" height="600" label="1" backgroundColor="#F20808" ></mx:Box> <mx:Box id="b2" width="200" height="200" label="2" backgroundColor="#08EEE6"></mx:Box> <mx:Box id="b3" width="400" height="400" label="3" backgroundColor="#E6FA05"></mx:Box> <mx:Box label="4" id="b4"></mx:Box> <mx:Box label="5" id="b5"></mx:Box> <mx:Box label="6" id="b6"></mx:Box> <mx:Box label="7" id="b7"></mx:Box> <mx:Box label="8" id="b8"></mx:Box> <mx:Box label="9" id="b9"></mx:Box> </flexlib:SuperTabNavigator> <mx:TabNavigator paddingTop="50"> <mx:Box label="1" id="b11"></mx:Box> <mx:Box label="2" id="b12"></mx:Box> <mx:Box label="3" id="b13"></mx:Box> <mx:Box label="4" id="b14"></mx:Box> <mx:Box label="5" id="b15"></mx:Box> <mx:Box label="6" id="b16"></mx:Box> <mx:Box label="7" id="b17"></mx:Box> <mx:Box label="8" id="b18"></mx:Box> <mx:Box label="9" id="b19"></mx:Box> </mx:TabNavigator> </s:HGroup> </s:VGroup> </s:Application>
几点说明:
例子里面,我创建了SuperTabNavigator和TabNavigator
SuperTabNavigator默认是支持拖拽(drag & drop)的去排列各个tab的位置(index),在这里我给禁用了
SuperTabNavigator上面还是有bug的,所以我就不太相信flexlib里面的组件了。。。。。。。。。。。。。
xmlns:flexlib="http://code.google.com/p/flexlib/" 去定义flexlib的命名空间
通过nav.setClosePolicyForTab( 0, SuperTab.CLOSE_NEVER ); 设置第一个tab页是不可以关闭的。
我觉得这里面最重要的就是callLater(),它可以:
提高页面初始化性能
确保某个方法要引用的属性存在
adobe对其的解释:http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7b06.html
SuperTabNavigator和TabNavigator 在绘制好之后,tabbar区域和内容区域之间默认的会有间隙的!!!那么可以通过设置paddingTop="50"来调整
运行截图:(有点丑
)
好吧,感觉flexlib还是不太靠铺,虽然多一些功能性组件,但是觉得会有bug。
如果想用第三方的flex高能组件库,还是看看这个商业收费版吧:http://www.ardisialabs.com/demo/
但是不提供下载,本人无法使用。。。。。。。。也就只能看看了。。。。。。。。。。。。。。
相关文章推荐
- Flex之旅:第二部分:容器与布局(2)---动态添加组件(TabNavigator)
- Flex之旅:第二部分:容器与布局(5)---如何管理多个弹出的页面
- Flex之旅:第二部分:容器与布局(7)---使用IdeferredInstance 创建模板,实现组件的延迟加载
- Flex之旅:第二部分:容器与布局(4)--- callLater()方法的使用
- Flex之旅:第二部分:容器与布局(6)---在容器中滚动到某个指定的子组件
- Flex之旅:第二部分:容器与布局(1)---容器的初始化顺序
- 第二部分: Dijit 3.3 布局容器
- Flex4的导航容器TabNavigator
- Java高级部分容器重点总结上
- 第二部分:容器和算法
- Silverlight 教程第二部分:使用布局管理
- Silverlight 教程第二部分:使用布局管理
- Flex中如何通过paddingTop样式,设置TabNavigator控件内容与Tabs间距离
- 微信小程序测试:navigator组件使用flex布局不兼容问题及解决方案
- 《Spring Security3》第四章第二部分翻译(JdbcDaoImpl的高级配置)
- Flex的TabNavigator中tab触发的事件
- (2011.09.25)《C++ Primer》第二部分学习笔记汇总——容器与算法
- C#语言 第四部分 图形界面编程(五) 布局容器类(4)
- Flex之旅--Flex4容器和布局定位