Flex中如何通过borderSides和borderStyle样式指定TextInput控件的各边框颜色的例子

By Minidxer | July 9, 2008

接下来的例子演示了Flex中如何通过borderSides和borderStyle样式，指定TextInput控件的各边框颜色。Demo中通过上下左右选择框ON/OFF来切换效果。

让我们先来看一下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:Script>
  8.         <![CDATA[
  9.             private function setBorderSides():void {
  10.                 var arr:Array = [];
  11.                 if (leftCheckBox.selected) {
  12.                     arr.push("left");
  13.                 }
  14.                 if (rightCheckBox.selected) {
  15.                     arr.push("right");
  16.                 }
  17.                 if (topCheckBox.selected) {
  18.                     arr.push("top");
  19.                 }
  20.                 if (bottomCheckBox.selected) {
  21.                     arr.push("bottom");
  22.                 }
  23.                 textInput.setStyle("borderSides", arr.join(" "));
  24.             }
  25.         ]]>
  26.     </mx:Script>
  27.  
  28.     <mx:ApplicationControlBar dock="true">
  29.         <mx:Form styleName="plain">
  30.             <mx:FormItem label="left:">
  31.                 <mx:CheckBox id="leftCheckBox"
  32.                         selected="true"
  33.                         change="setBorderSides();" />
  34.             </mx:FormItem>
  35.             <mx:FormItem label="right:">
  36.                 <mx:CheckBox id="rightCheckBox"
  37.                         selected="true"
  38.                         change="setBorderSides();" />
  39.             </mx:FormItem>
  40.             <mx:FormItem label="top:">
  41.                 <mx:CheckBox id="topCheckBox"
  42.                         selected="true"
  43.                         change="setBorderSides();" />
  44.             </mx:FormItem>
  45.             <mx:FormItem label="bottom:">
  46.                 <mx:CheckBox id="bottomCheckBox"
  47.                         selected="true"
  48.                         change="setBorderSides();" />
  49.             </mx:FormItem>
  50.         </mx:Form>
  51.     </mx:ApplicationControlBar>
  52.  
  53.     <mx:TextInput id="textInput"
  54.             borderSides="left right"
  55.             borderColor="red"
  56.             borderStyle="solid" />
  57.  
  58. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | Tags: , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Recent Posts

Blogroll

Sponsored Ads