看上图,是一个很常见的工具栏按钮,左边是当前操作按钮图标,右边是下拉菜单按钮,点击能够显示更多操作。
当点击下拉菜单的操作后,左边的按钮图标也相应的改变为最后点击的菜单操作,这样用户下次再使用该操作时就无须在点击下拉菜单选取操作,直接点左边的按钮即可。
我把这款按钮封装成一个通用的控件,控件内部自己管理操作列表与当前操作。
看下面代码,我为按钮控件定义了一个Items属性,接收一个数组,数组项主要是描述操作的图标、名称。然后,向按钮注册操作项的处理事件。
_BorderButton.Items = [
{icon:Icon16.OBJ_BORDER_BOTTOM,label:"下边框"},
{icon:Icon16.OBJ_BORDER_TOP,label:"上边框"},
{icon:Icon16.OBJ_BORDER_LEFT,label:"左边框"},
{icon:Icon16.OBJ_BORDER_RIGHT,label:"右边框"},
{icon:Icon16.OBJ_BORDER_NONE,label:"无边框"},
{icon:Icon16.OBJ_BORDER_ALL,label:"所有边框"},
{icon:Icon16.OBJ_BORDER_OUTER,label:"外侧边框"}];
_BorderButton.addEventListener(DropDownToolButtonEvent.ITEM_CLICK,OnBorderButtonItemClick);
事件的响应函数,根据操作名称判断执行的后续操作。
private function OnBorderButtonItemClick(e:DropDownToolButtonEvent):void
{
var label:String = e.Item.label;
switch(label)
{
case "下边框":
break;
case "上边框":
//略…
这款按钮在工具型的软件使用的较多,看看以下实际的使用效果。