基于美化的需要,有时候我会被要求给按钮贴上图片
下面以flex4中使用mx:Button为例:
-----------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init()"
width="100%" height="100%">
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
</fx:Declarations>
<fx:Style >
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.myCustomButton {
overSkin:Embed(source="styles/assets/submitBtn.gif");
upSkin:Embed(source="styles/assets/submitBtn.gif");
downSkin:Embed(source="styles/assets/submitBtn.gif");
}
</fx:Style >
<fx:Script >
<![CDATA[
import flash.events.MouseEvent;
import mx.controls.Alert;
import mx.events.CloseEvent;
private function init():void{
saveBtn.addEventListener(MouseEvent.CLICK,function():void{
//提交这里是调用html页面上的test函数进行具体业务操作
ExternalInterface.call("test","0");
});
}
</fx:Script >
<s:HGroup ><mx:Spacer/></s:HGroup>
<s:HGroup >
<mx:Spacer/>
<mx:Button label="" styleName="myCustomButton" id="saveBtn" useHandCursor="true" buttonMode="true" width="80" height="25"/>
</s:HGroup>
</s:VGroup>
这里按钮禁用时图片好像是不能显示出来