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

<sdt id="89512093" sdtgroup="t" contentlocked="t" sdtlocked="t"><span lang="EN-US" style="font-family:'Calibri','sans-serif';font-size: 1pt; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: 宋体; mso-fareast-theme-font: minor-fareast; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-US; mso-fareast-language: ZH-CN; mso-bidi-language: AR-SA;"><sdtpr></sdtpr><sdt id="89512082" title="文章标题" storeitemid="X_DD88BB91-77E5-474A-8E9F-6D1801B0D62E" text="t" docpart="89512082" xpath="/ns0:BlogPostInfo/ns0:PostTitle"></sdt></span> </sdt>能够保留操作状态的工具栏按钮，名称有点拗口。

<shapetype id="_x0000_t75" stroked="f" filled="f" path="m@4@5l@4@11@9@11@9@5xe" o:preferrelative="t" o:spt="75" coordsize="21600,21600"><img src="https://img-my.youkuaiyun.com/uploads/201206/03/1338720214_7295.png" alt=""><stroke joinstyle="miter"><formulas><f eqn="if lineDrawn pixelLineWidth 0"><f eqn="sum @0 1 0"><f eqn="sum 0 0 @1"><f eqn="prod @2 1 2"><f eqn="prod @3 21600 pixelWidth"><f eqn="prod @3 21600 pixelHeight"><f eqn="sum @0 0 1"><f eqn="prod @6 1 2"><f eqn="prod @7 21600 pixelWidth"><f eqn="sum @8 21600 0"><f eqn="prod @7 21600 pixelHeight"><f eqn="sum @10 21600 0"></f></f></f></f></f></f></f></f></f></f></f></f></formulas><path o:connecttype="rect" gradientshapeok="t" o:extrusionok="f"><lock aspectratio="t" v:ext="edit"></lock></path></stroke></shapetype>

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

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

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

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

//略…

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