Flex中如何利用useRollOver样式使List控件的项目在鼠标移动上去时高亮显示的例子

By Minidxer | September 21, 2008

接下来的例子演示了Flex中如何利用useRollOver样式，使List控件的项目在鼠标移动上去时高亮显示。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="List_useRollOver_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Array id="arr">
  9.         <mx:Object label="Button"
  10.                 icon="@Embed('assets/Button.png')" />
  11.         <mx:Object label="ButtonBar"
  12.                 icon="@Embed('assets/ButtonBar.png')" />
  13.         <mx:Object label="CheckBox"
  14.                 icon="@Embed('assets/CheckBox.png')" />
  15.         <mx:Object label="ColorPicker"
  16.                 icon="@Embed('assets/ColorPicker.png')" />
  17.         <mx:Object label="ComboBox"
  18.                 icon="@Embed('assets/ComboBox.png')" />
  19.         <mx:Object label="DataGrid"
  20.                 icon="@Embed('assets/DataGrid.png')" />
  21.         <mx:Object label="DateChooser"
  22.                 icon="@Embed('assets/DateChooser.png')" />
  23.         <mx:Object label="DateField"
  24.                 icon="@Embed('assets/DateField.png')" />
  25.         <mx:Object label="HorizontalList"
  26.                 icon="@Embed('assets/HorizontalList.png')" />
  27.         <mx:Object label="HRule"
  28.                 icon="@Embed('assets/HRule.png')" />
  29.         <mx:Object label="HScrollBar"
  30.                 icon="@Embed('assets/HScrollBar.png')" />
  31.         <mx:Object label="HSlider"
  32.                 icon="@Embed('assets/HSlider.png')" />
  33.     </mx:Array>
  34.  
  35.     <mx:ApplicationControlBar dock="true">
  36.         <mx:Form styleName="plain">
  37.             <mx:FormItem label="useRollOver:">
  38.                 <mx:CheckBox id="checkBox" selected="true" />
  39.             </mx:FormItem>
  40.         </mx:Form>
  41.     </mx:ApplicationControlBar>
  42.  
  43.     <mx:List id="list"
  44.             dataProvider="{arr}"
  45.             useRollOver="{checkBox.selected}"
  46.             verticalScrollPolicy="on"
  47.             width="150" />
  48.  
  49. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads