Flex中如何利用borderThicknessLeft, borderThicknessRight, borderThicknessTop和borderThicknessBottom样式设置Panel容器各边框厚度的例子

By Minidxer | February 21, 2009

接下来的例子演示了Flex中如何利用borderThicknessLeft, borderThicknessRight, borderThicknessTop和borderThicknessBottom样式，设置Panel容器各边框厚度。

让我们先来看一下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:Style>
  8.         .nakedButton {
  9.             skin: ClassReference(null);
  10.         }
  11.     </mx:Style>
  12.  
  13.     <mx:ApplicationControlBar dock="true">
  14.         <mx:Form styleName="plain">
  15.             <mx:FormItem label="borderThicknessLeft:"
  16.                     direction="horizontal">
  17.                 <mx:HSlider id="sliderLeft"
  18.                         minimum="0"
  19.                         maximum="50"
  20.                         value="10"
  21.                         snapInterval="1"
  22.                         tickInterval="10"
  23.                         liveDragging="true" />
  24.                 <mx:Label text="{sliderLeft.value}" />
  25.             </mx:FormItem>
  26.             <mx:FormItem label="borderThicknessRight:"
  27.                     direction="horizontal">
  28.                 <mx:HSlider id="sliderRight"
  29.                         minimum="0"
  30.                         maximum="50"
  31.                         value="10"
  32.                         snapInterval="1"
  33.                         tickInterval="10"
  34.                         liveDragging="true" />
  35.                 <mx:Label text="{sliderRight.value}" />
  36.             </mx:FormItem>
  37.             <mx:FormItem label="borderThicknessTop:"
  38.                     direction="horizontal">
  39.                 <mx:HSlider id="sliderTop"
  40.                         minimum="0"
  41.                         maximum="50"
  42.                         value="0"
  43.                         snapInterval="1"
  44.                         tickInterval="10"
  45.                         liveDragging="true" />
  46.                 <mx:Label text="{sliderTop.value}" />
  47.             </mx:FormItem>
  48.             <mx:FormItem label="borderThicknessBottom:"
  49.                     direction="horizontal">
  50.                 <mx:HSlider id="sliderBottom"
  51.                         minimum="0"
  52.                         maximum="50"
  53.                         value="10"
  54.                         snapInterval="1"
  55.                         tickInterval="10"
  56.                         liveDragging="true" />
  57.                 <mx:Label text="{sliderBottom.value}" />
  58.             </mx:FormItem>
  59.         </mx:Form>
  60.     </mx:ApplicationControlBar>
  61.  
  62.     <mx:Panel id="panel"
  63.             title="The quick brown fox jumped over the lazy dog."
  64.             borderThicknessLeft="{sliderLeft.value}"
  65.             borderThicknessRight="{sliderRight.value}"
  66.             borderThicknessTop="{sliderTop.value}"
  67.             borderThicknessBottom="{sliderBottom.value}"
  68.             layout="absolute"
  69.             width="100%" height="100%">
  70.  
  71.         <mx:Button label="borderThicknessLeft"
  72.                 labelPlacement="right"
  73.                 icon="@Embed('assets/arrow_left.png')"
  74.                 styleName="nakedButton"
  75.                 left="0"
  76.                 verticalCenter="0"
  77.                 toolTip="{sliderLeft.value}"
  78.                 errorString="{sliderLeft.value}" />
  79.  
  80.         <mx:Button label="borderThicknessRight"
  81.                 labelPlacement="left"
  82.                 icon="@Embed('assets/arrow_right.png')"
  83.                 styleName="nakedButton"
  84.                 right="0"
  85.                 verticalCenter="0" />
  86.  
  87.         <mx:Button label="borderThicknessTop"
  88.                 labelPlacement="bottom"
  89.                 icon="@Embed('assets/arrow_up.png')"
  90.                 styleName="nakedButton"
  91.                 top="0"
  92.                 horizontalCenter="0" />
  93.  
  94.         <mx:Button label="borderThicknessBottom"
  95.                 labelPlacement="top"
  96.                 icon="@Embed('assets/arrow_down.png')"
  97.                 styleName="nakedButton"
  98.                 bottom="0"
  99.                 horizontalCenter="0" />
  100.  
  101.     </mx:Panel>
  102.  
  103. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Panel | No Comments » | Tags: , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll