Flex中如何利用labelStyleName样式设置FormItem容器个别标签颜色的例子

By Minidxer | November 24, 2008

接下来的例子演示了Flex中如何利用labelStyleName样式，设置FormItem容器个别标签颜色。

让我们先来看一下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"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style source="embeddedFonts.css" />
  8.     <mx:Style>
  9.         Form {
  10.             fontFamily: ArialEmbedded;
  11.         }
  12.  
  13.         FormHeading {
  14.             color: haloSilver;
  15.             fontSize: 24;
  16.         }
  17.  
  18.         FormItem {
  19.             labelStyleName: defaultLabel;
  20.         }
  21.  
  22.         .defaultLabel {
  23.             color: black;
  24.             fontSize: 10;
  25.             fontStyle: italic;
  26.             fontWeight: normal;
  27.         }
  28.  
  29.         .requiredLabel {
  30.             color: red;
  31.             fontSize: 12;
  32.             fontWeight: bold;
  33.         }
  34.     </mx:Style>
  35.  
  36.     <mx:String id="str">
  37.         <![CDATA[The quick brown fox jumped over the lazy dog.]]>
  38.     </mx:String>
  39.  
  40.     <mx:Form>
  41.         <mx:FormHeading label="Some form heading!" />
  42.         <!-- override the default labelStyleName for the FormItem -->
  43.         <mx:FormItem label="Field 1:"
  44.                 labelStyleName="requiredLabel"
  45.                 required="true">
  46.             <mx:Label id="lbl1" text="{str}" />
  47.         </mx:FormItem>
  48.  
  49.         <!-- override the default labelStyleName for the FormItem -->
  50.         <mx:FormItem label="Field 2:"
  51.                 labelStyleName="requiredLabel"
  52.                 required="true">
  53.             <mx:Label id="lbl2" text="{str}" />
  54.         </mx:FormItem>
  55.  
  56.         <!-- default -->
  57.         <mx:FormItem label="Field 3:">
  58.             <mx:Label id="lbl3" text="{str}" />
  59.         </mx:FormItem>
  60.  
  61.         <!-- default -->
  62.         <mx:FormItem label="Field 4:">
  63.             <mx:Label id="lbl4" text="{str}" />
  64.         </mx:FormItem>
  65.     </mx:Form>
  66.  
  67. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: FormItem | No Comments » | Tags: , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll