Flex中如何利用indicatorGap样式设置一个Form表单空间间隔的例子

By Minidxer | November 14, 2008

接下来的例子演示了Flex中如何利用indicatorGap样式，设置一个Form表单空间间隔。

让我们先来看一下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.         creationComplete="init();">
  7.  
  8.     <mx:Style>
  9.         FormItem {
  10.             backgroundColor: haloSilver;
  11.         }
  12.     </mx:Style>
  13.  
  14.     <mx:Script>
  15.         <![CDATA[
  16.             import mx.events.SliderEvent;
  17.  
  18.             private var indicatorGapStyle:CSSStyleDeclaration;
  19.  
  20.             private function init():void {
  21.                 indicatorGapStyle = StyleManager.getStyleDeclaration("FormItem");
  22.             }
  23.  
  24.             private function slider_change(evt:SliderEvent):void {
  25.                 indicatorGapStyle.setStyle("indicatorGap", evt.value);
  26.             }
  27.         ]]>
  28.     </mx:Script>
  29.  
  30.     <mx:ApplicationControlBar dock="true">
  31.         <mx:Label text="indicatorGap:" />
  32.         <mx:HSlider id="slider"
  33.                 minimum="14"
  34.                 maximum="100"
  35.                 value="14"
  36.                 snapInterval="1"
  37.                 liveDragging="true"
  38.                 dataTipPlacement="bottom"
  39.                 dataTipPrecision="0"
  40.                 change="slider_change(event);" />
  41.     </mx:ApplicationControlBar>
  42.  
  43.     <mx:Form>
  44.         <mx:FormItem label="Lorem ipsum:">
  45.             <mx:TextInput />
  46.         </mx:FormItem>
  47.         <mx:FormItem label="The quick brown fox jumped:" required="true">
  48.             <mx:TextInput />
  49.         </mx:FormItem>
  50.         <mx:FormItem label="over the lazy dog:" required="true">
  51.             <mx:Text text="The quick brown fox jumped over the lazy dog." />
  52.         </mx:FormItem>
  53.     </mx:Form>
  54.  
  55. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Other | No Comments » | 187 views Tags: , ,

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll