Flex中如何通过dropdownStyleName和verticalScrollBarStyleName样式设置ComboBox竖直滚动条上下图标风格的例子

By Minidxer | January 19, 2009

接下来的例子演示了Flex中如何通过dropdownStyleName和verticalScrollBarStyleName样式,设置ComboBox竖直滚动条上下图标风格。

让我们先来看一下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="top"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Style>
  8.         .myCustomComboBox {
  9.             dropdownStyleName: myCustomDropdown;
  10.         }
  11.  
  12.         .myCustomDropdown {
  13.             fontWeight: normal;
  14.             verticalScrollBarStyleName: myCustomVertScroll;
  15.         }
  16.  
  17.         .myCustomVertScroll {
  18.             trackColors: white, white;
  19.             upArrowSkin: Embed("bullet_delete.png");
  20.             downArrowSkin: Embed("bullet_add.png");
  21.         }
  22.     </mx:Style>
  23.  
  24.     <mx:Array id="arr">
  25.         <mx:Object label="One" />
  26.         <mx:Object label="Two" />
  27.         <mx:Object label="Three" />
  28.         <mx:Object label="Four" />
  29.         <mx:Object label="Five" />
  30.         <mx:Object label="Six" />
  31.         <mx:Object label="Seven" />
  32.     </mx:Array>
  33.  
  34.     <mx:Form>
  35.         <mx:FormItem label="default:">
  36.             <mx:ComboBox id="comboBox1"
  37.                     dataProvider="{arr}" />
  38.         </mx:FormItem>
  39.         <mx:FormItem label="skinned:">
  40.             <mx:ComboBox id="comboBox2"
  41.                     dataProvider="{arr}"
  42.                     styleName="myCustomComboBox" />
  43.         </mx:FormItem>
  44.     </mx:Form>
  45.  
  46. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: ComboBox | No Comments » | 973 views Tags: , ,

Search Posts