Flex中如何利用focusIn和focusOut事件对表单中获得焦点的项目进行颜色高亮（highlight）显示的例子

By Minidxer | September 21, 2008

接下来的例子演示了Flex中如何利用focusIn和focusOut事件，对表单中获得焦点的项目进行颜色高亮（highlight）显示。

让我们先来看一下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>
  8.         FormItem {
  9.             paddingLeft: 4;
  10.             paddingRight: 4;
  11.             paddingTop: 4;
  12.             paddingBottom: 4;
  13.         }
  14.     </mx:Style>
  15.  
  16.     <mx:Script>
  17.         <![CDATA[
  18.             private const BACKGROUND_COLOR:Object = "haloBlue";
  19.  
  20.             private function formItem_focusIn(evt:FocusEvent):void {
  21.                 var item:FormItem = FormItem(evt.currentTarget.parent);
  22.                 item.setStyle("backgroundAlpha", 0.2);
  23.                 item.setStyle("backgroundColor", BACKGROUND_COLOR);
  24.             }
  25.  
  26.             private function formItem_focusOut(evt:FocusEvent):void {
  27.                 var item:FormItem = FormItem(evt.currentTarget.parent);
  28.                 item.setStyle("backgroundColor", null);
  29.             }
  30.         ]]>
  31.     </mx:Script>
  32.  
  33.     <mx:Form>
  34.         <mx:FormItem label="First name:">
  35.             <mx:TextInput id="firstName"
  36.                     focusIn="formItem_focusIn(event);"
  37.                     focusOut="formItem_focusOut(event);" />
  38.         </mx:FormItem>
  39.         <mx:FormItem label="Last name:">
  40.             <mx:TextInput id="lastName"
  41.                     focusIn="formItem_focusIn(event);"
  42.                     focusOut="formItem_focusOut(event);" />
  43.         </mx:FormItem>
  44.     </mx:Form>
  45.  
  46. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Other | No Comments » | 362 views Tags: , , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll