May 28

Flex中如何通过borderStyle和borderSides样式设置NumericStepper控件特定边框(上下左右边)的例子

FlexAdd comments

接下来的例子演示了Flex中如何通过borderStyle和borderSides样式设置NumericStepper控件特定边框(上下左右边)。和前面Flex中如何通过borderThickness样式设置NumericStepper控件边框厚度的例子一样，只有在borderStyle被设置为“solid”的情况下，才支持borderSides样式。Demo中分别通过上下左右的CheckBox框设置相应边的显示。

让我们先来看一下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 checkBox_change(evt:Event):void {
  10.                 var sidesStr:String;
  11.                 var sidesArr:Array = [];
  12.                 if (leftCheckBox.selected) {
  13.                     sidesArr.push("left");
  14.                 }
  15.                 if (rightCheckBox.selected) {
  16.                     sidesArr.push("right");
  17.                 }
  18.                 if (topCheckBox.selected) {
  19.                     sidesArr.push("top");
  20.                 }
  21.                 if (bottomCheckBox.selected) {
  22.                     sidesArr.push("bottom");
  23.                 }
  24.                 sidesStr = sidesArr.join(" ");
  25.                 numericStepper.setStyle("borderSides", sidesStr);
  26.             }
  27.         ]]>
  28.     </mx:Script>
  29.  
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Form styleName="plain">
  32.             <mx:FormItem label="border left:">
  33.                 <mx:CheckBox id="leftCheckBox"
  34.                         selected="true"
  35.                         change="checkBox_change(event);" />
  36.             </mx:FormItem>
  37.             <mx:FormItem label="border right:">
  38.                 <mx:CheckBox id="rightCheckBox"
  39.                         selected="true"
  40.                         change="checkBox_change(event);" />
  41.             </mx:FormItem>
  42.             <mx:FormItem label="border top:">
  43.                 <mx:CheckBox id="topCheckBox"
  44.                         selected="true"
  45.                         change="checkBox_change(event);" />
  46.             </mx:FormItem>
  47.             <mx:FormItem label="border bottom:">
  48.                 <mx:CheckBox id="bottomCheckBox"
  49.                         selected="true"
  50.                         change="checkBox_change(event);" />
  51.             </mx:FormItem>
  52.             <mx:FormItem label="borderThickness:">
  53.                 <mx:HSlider id="slider"
  54.                         minimum="0"
  55.                         maximum="10"
  56.                         value="4"
  57.                         snapInterval="1"
  58.                         tickInterval="1"
  59.                         liveDragging="true" />
  60.             </mx:FormItem>
  61.         </mx:Form>
  62.     </mx:ApplicationControlBar>
  63.  
  64.     <mx:NumericStepper id="numericStepper"
  65.             borderStyle="solid"
  66.             borderThickness="{slider.value}"
  67.             borderSides="left right top bottom" />
  68.  
  69. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , ,

Related Post

Leave a Reply