Flex中通过selectable属性控制用户是否可以对TextArea中的文本进行选中的例子

By Minidxer | August 7, 2008

接下来的例子演示了Flex中如何通过selectable属性,控制用户是否可以对TextArea中的文本进行选中。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="TextArea_selectable_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:ApplicationControlBar dock="true">
  9.         <mx:Form styleName="plain">
  10.             <mx:FormItem label="selectable:">
  11.                 <mx:CheckBox id="checkBox"
  12.                         selected="true" />
  13.             </mx:FormItem>
  14.         </mx:Form>
  15.     </mx:ApplicationControlBar>
  16.  
  17.     <mx:TextArea id="textArea"
  18.             selectable="{checkBox.selected}"
  19.             text="The quick brown fox jumped over the lazy dog." />
  20.  
  21. </mx:Application>
下面是ActionScript的实现:
Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/08/06/toggling-whether-a-user-can-select-text-in-a-textarea-control-in-flex/ -->
  3. <mx:Application name="TextArea_selectable_test"
  4.         xmlns:mx="http://www.adobe.com/2006/mxml"
  5.         layout="vertical"
  6.         verticalAlign="middle"
  7.         backgroundColor="white">
  8.  
  9.     <mx:Script>
  10.         <![CDATA[
  11.             private function checkBox_change(evt:Event):void {
  12.                 textArea.selectable = checkBox.selected;
  13.             }
  14.         ]]>
  15.     </mx:Script>
  16.  
  17.     <mx:ApplicationControlBar dock="true">
  18.         <mx:Form styleName="plain">
  19.             <mx:FormItem label="selectable:">
  20.                 <mx:CheckBox id="checkBox"
  21.                         selected="true"
  22.                         change="checkBox_change(event);" />
  23.             </mx:FormItem>
  24.         </mx:Form>
  25.     </mx:ApplicationControlBar>
  26.  
  27.     <mx:TextArea id="textArea"
  28.             text="The quick brown fox jumped over the lazy dog." />
  29.  
  30. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Flex | No Comments » | 82 views Tags: ,

Search Posts