Apr 01

Flex中如何利用Style Sheet和<mx:style>标签嵌入图片/图标的例子

FlexAdd comments

接下来的例子演示了如何利用<mx:Style>标签，将一个PNG的图标嵌入到Flex应用的按钮(Button)中。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">
  3.  
  4.     <mx:Style>
  5.         /* This style applies to all Buttons, including those in Alert controls. */
  6.         Button {
  7.             icon: Embed(source="assets/bulletCheck.png");
  8.         }
  9.  
  10.         /* Create a custom style class. */
  11.         .bulletWarning {
  12.             icon: Embed(source="assets/bulletWarning.png");
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:Script>
  17.         <![CDATA[
  18.             import mx.controls.Alert;
  19.  
  20.             private var a:Alert;
  21.  
  22.             private function showAlert():void {
  23.                 a = Alert.show("message");
  24.             }
  25.         ]]>
  26.     </mx:Script>
  27.  
  28.     <mx:Button label="bug" />
  29.     <mx:Button label="also a bug"/>
  30.     <mx:Button label="Alert.show()" click="showAlert()" styleName="bulletWarning" />
  31.  
  32. </mx:Application>

written by Minidxer  |  tags: , , , , , ,

Related Post

One Response to “Flex中如何利用Style Sheet和<mx:style>标签嵌入图片/图标的例子”

Trackbacks

Leave a Reply