控件篇——能保留操作状态的工具栏按钮

  能够保留操作状态的工具栏按钮，名称有点拗口。

                                           

看上图，是一个很常见的工具栏按钮，左边是当前操作按钮图标，右边是下拉菜单按钮，点击能够显示更多操作。

当点击下拉菜单的操作后，左边的按钮图标也相应的改变为最后点击的菜单操作，这样用户下次再使用该操作时就无须在点击下拉菜单选取操作，直接点左边的按钮即可。

 

我把这款按钮封装成一个通用的控件，控件内部自己管理操作列表与当前操作。

看下面代码，我为按钮控件定义了一个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 "上边框":

                     //略…

 

这款按钮在工具型的软件使用的较多，看看以下实际的使用效果。