flex中使用HSlider滑动条组件控制PopUpButton

发布于，归属于flex实例。 沙发还空着，抢！ 共有450人围观    

这个示例演示如何使用HSlider来控制PopUpButton的圆角程度。
来看演示：http://www.36ria.com/flex/HSlider.swf

来看其代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/01/31/setting-the-corner-radius-on-a-flex-popupbutton-control/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="top"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Style>
  9.         Application{
  10.             fontSize:12px;
  11.         }
  12.         PopUpButton {
  13.             popUpStyleName: myCustomPopUpStyleName;
  14.         }
  15.  
  16.         .myCustomPopUpStyleName {
  17.             fontWeight: normal;
  18.             textAlign: left;
  19.             leftIconGap: 0;
  20.         }
  21.     </mx:Style>
  22.  
  23.     <mx:Script>
  24.         <![CDATA[
  25.             import mx.controls.Menu;
  26.  
  27.             private function init():void {
  28.                 var menu:Menu = new Menu();
  29.                 menu.dataProvider = arr;
  30.                 popUpButton.popUp = menu;
  31.             }
  32.  
  33.             private function resizePopUp():void {
  34.                 popUpButton.popUp.width = popUpButton.width;
  35.             }
  36.         ]]>
  37.     </mx:Script>
  38.  
  39.     <mx:Array id="arr">
  40.         <mx:Object label="Alert" />
  41.         <mx:Object label="Button" />
  42.         <mx:Object label="ButtonBar" />
  43.         <mx:Object type="separator" />
  44.         <mx:Object label="CheckBox" />
  45.         <mx:Object label="ColorPicker" />
  46.         <mx:Object label="ComboBox" />
  47.     </mx:Array>
  48.     <mx:PopUpButton id="popUpButton"
  49.             label="请选择一个元素"
  50.             cornerRadius="{slider.value}"
  51.             arrowButtonWidth="{popUpButton.height}"
  52.             openAlways="true"
  53.             initialize="init();"
  54.             creationComplete="resizePopUp();" />
  55.  
  56.     <mx:ApplicationControlBar dock="true">
  57.         <mx:Form styleName="plain">
  58.             <mx:FormItem label="这是个滑动条:">
  59.                 <mx:HSlider id="slider"
  60.                         minimum="0"
  61.                         maximum="{popUpButton.height / 2}"
  62.                         value="0"
  63.                         liveDragging="true"
  64.                         snapInterval="1"
  65.                         tickInterval="1" />
  66.             </mx:FormItem>
  67.         </mx:Form>
  68.     </mx:ApplicationControlBar>
  69.  
  70. </mx:Application>

说明下其关键参数

  1. <mx:PopUpButton id="popUpButton"
  2.             label="请选择一个元素"
  3.             cornerRadius="{slider.value}"
  4.             arrowButtonWidth="{popUpButton.height}"
  5.             openAlways="true"
  6.             initialize="init();"
  7.             creationComplete="resizePopUp();" />

cornerRadius=”{slider.value}”这个属性的值与滑动条的值相绑定。
虽然这个功能实际意义不大，但举一反三的话，flex组件与组件之间的调用方式便可知一二了

（如果您喜欢这篇教程，可以通过支付宝打赏我们1元哦，拜谢！）

跟作者说两句

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :idea: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-? :) :( :!: 8-O 8)

同类