Flex中如何通过useRollOver样式设置Tree项目在鼠标移在上面时高亮显示与否的例子

By Minidxer | February 18, 2009

接下来的例子演示了Flex中如何通过useRollOver样式,设置Tree项目在鼠标移在上面时高亮显示与否。

让我们先来看一下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:XML id="treeDP">
  8.         <root>
  9.             <node label="i) One" />
  10.             <node label="i) Two" />
  11.             <node label="i) Three" />
  12.             <node label="i) Four">
  13.                 <node label="ii) One" />
  14.                 <node label="ii) Two" />
  15.                 <node label="ii) Three">
  16.                     <node label="iii) One" />
  17.                     <node label="iii) Two" />
  18.                 </node>
  19.                 <node label="ii) Four" />
  20.             </node>
  21.             <node label="i) Five" />
  22.             <node label="i) Six" />
  23.         </root>
  24.     </mx:XML>
  25.  
  26.     <mx:ApplicationControlBar dock="true">
  27.         <mx:CheckBox id="checkBox"
  28.                 label="useRollOver:"
  29.                 labelPlacement="left"
  30.                 selected="true" />
  31.     </mx:ApplicationControlBar>
  32.  
  33.     <mx:Tree id="tree"
  34.             dataProvider="{treeDP}"
  35.             labelField="@label"
  36.             showRoot="false"
  37.             useRollOver="{checkBox.selected}"
  38.             width="200" />
  39.  
  40. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Tree | No Comments » | 1,093 views Tags: ,

Search Posts