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

<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="http://my.csdn.net/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 " 上边框 " :

// 略 …

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