本文为原创文章,如果转载请注明出处:
http://summerofthatyear-gmail-com.iteye.com/blog/352348
Flex自带的TabBar只是单纯的显示一排Tab,它没有提供IE7那样后面有一个小Tab,点击后自动新建一个。
我写一个类似IE7 tab的控件,此控件继承自mx.controls.TabBar。功能就是TabBar里始终有一个Tab可供新建Tab页;
控件代码IE7TabBar .as:
package com.montage.controls
{
import com.montage.events.IE7TabBarEvent;
import flash.events.MouseEvent;
import mx.controls.Button;
import mx.controls.TabBar;
/**
* 点击新建tab时所要派发的事件
*/
[Event(name="newItemClick", type="com.montage.events.IE7TabBarEvent")]
/**
*
* @author Montage
*/
public class IE7TabBar extends TabBar
{
public function IE7TabBar()
{
super();
}
[Embed(source="/com/montage/icons/tab_add.png")]
public var addIcon:Class;
private var _newTab:Button;
protected function mouseOutHandler( event:MouseEvent ):void
{
var but:Button = Button( event.currentTarget );
but.setStyle("icon", null);
}
protected function mouseOverHandler( event:MouseEvent ):void
{
var but:Button = Button( event.currentTarget );
but.setStyle("icon", addIcon);
}
override protected function createChildren():void
{
super.createChildren();
_newTab = createNavItem("") as Button;
_newTab.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
_newTab.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);
}
override protected function commitProperties():void
{
super.commitProperties();
if( !contains(_newTab) )
addChild(_newTab);
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if( _newTab )
{
_newTab.toggle = false;
_newTab.setStyle("paddingLeft", 5);
_newTab.setStyle("paddingRight", 5);
_newTab.width = 30;
}
}
override protected function clickHandler(event:MouseEvent):void
{
if( event.currentTarget == _newTab )
{
var evt:IE7TabBarEvent = new IE7TabBarEvent( IE7TabBarEvent.NEW_ITEM_CLICK );
dispatchEvent(evt);
return;
}
super.clickHandler(event);
}
}
}
自定义事件IE7TabBarEvent.as
package com.montage.events
{
import flash.events.Event;
/**
* 给IE7TabBar提供事件支持
* @author Montage
*/
public class IE7TabBarEvent extends Event
{
public static const NEW_ITEM_CLICK:String = "newItemClick";
public function IE7TabBarEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
{
super(type, bubbles, cancelable);
}
}
}
使用范例:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:controls="com.montage.controls.*">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.montage.events.IE7TabBarEvent;
import mx.events.ItemClickEvent;
[Bindable]
public var dataSource:Array = ["AAA", "BBB", "CCC", "DDD"];
/**
* 侦听到点击新建tab的事件
*/
public function newItemClickHandler( event:IE7TabBarEvent ):void
{
Alert.show("sdssd");
}
]]>
</mx:Script>
<controls:IE7TabBar id="tabBar" dataProvider="{dataSource}" newItemClick="newItemClickHandler( event )"/>
</mx:Application>
- 大小: 488 Bytes
分享到:
相关推荐
flex4 TabBar skin
iOS tabbar navigation 控件结合实例。可以看下,很有参考价值。强烈推荐。
Sample-Flex4-TabBar使用例子。
tabbar控件 自定义tabbar
小程序tabbar素材小程序tabbar素材小程序tabbar素材小程序tabbar素材 微信小程序tabbar小图片
微信小程序源码(含截图)自定义tabbar微信小程序源码(含截图)自定义tabbar微信小程序源码(含截图)自定义tabbar微信小程序源码(含截图)自定义tabbar微信小程序源码(含截图)自定义tabbar微信小程序源码(含...
灵活易用的Android自定义TabBar选项卡控件,支持Tab选项卡的任意View组合布局,支持事件接口回调,扩展性非常强大的选项卡,可用来排版任意样式的选项卡布局。
小程序自定义tabbar,覆盖默认tabbar,实现中间凸起功能和样式,包括html和js
微信小程序tabbar图标素材
微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义tabbar (源码)微信小程序 自定义...
小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar (代码+截图)小程序源码 自定义tabbar ...
uniapp小程序自定义动态tabbar
flex tab bar samples
1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目,支持自由组合总数超过5个tabBar菜单。 4、本...
微信小程序——自定义tabbar(截图+源码).zip 微信小程序——自定义tabbar(截图+源码).zip 微信小程序——自定义tabbar(截图+源码).zip 微信小程序——自定义tabbar(截图+源码).zip 微信小程序——自定义...
tabbar练习小项目
NULL 博文链接:https://jzzwy.iteye.com/blog/1738572
tabbar--上下滑动控件tabbar和导航栏隐藏
是一个自适应的可定制的iOS TabBar 控件
uniapp小程序tabbar整套图标,包含选中和非选择的