Flex中通过buttonWidth样式在ButtonBar组件中创建一定宽度按钮（Button）的例子

By Minidxer | August 23, 2008

接下来的例子演示了Flex中如何通过buttonWidth样式，在ButtonBar组件中创建一定宽度按钮（Button）。要恢复原来的状态，只需要简单的将buttonWidth设置为NaN就可以了。

让我们先来看一下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 slider_change(evt:Event):void {
  10.                 if (checkBox.selected) {
  11.                     buttonBar.setStyle("buttonWidth", slider.value);
  12.                 } else {
  13.                     buttonBar.setStyle("buttonWidth", NaN);
  14.                 }
  15.             }
  16.         ]]>
  17.     </mx:Script>
  18.  
  19.     <mx:ApplicationControlBar dock="true">
  20.         <mx:CheckBox id="checkBox"
  21.                 label="fixed width:"
  22.                 labelPlacement="left"
  23.                 change="slider_change(event)" />
  24.  
  25.         <mx:Spacer width="50" />
  26.  
  27.         <mx:Label text="buttonWidth:" />
  28.         <mx:HSlider id="slider"
  29.                 enabled="{checkBox.selected}"
  30.                 minimum="50"
  31.                 maximum="150"
  32.                 value="75"
  33.                 liveDragging="true"
  34.                 snapInterval="5"
  35.                 dataTipPrecision="0"
  36.                 tickInterval="10"
  37.                 change="slider_change(event)" />
  38.     </mx:ApplicationControlBar>
  39.  
  40.     <mx:ButtonBar id="buttonBar">
  41.         <mx:dataProvider>
  42.             <mx:Array>
  43.                 <mx:Object label="One" />
  44.                 <mx:Object label="Two" />
  45.                 <mx:Object label="Thirteen" />
  46.             </mx:Array>
  47.         </mx:dataProvider>
  48.     </mx:ButtonBar>
  49.  
  50. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll