PopUpButton技术汇总

PopUpButton的例子汇总

http://blog.minidx.com/category/flex/popupbutton-flex

 

1.Flex中如何通过popUpGap样式设置PopUpButton和弹出菜单间距离的例子

http://blog.minidx.com/2009/03/14/2284.html

2.Flex中如何通过width属性设置PopUpButton弹出菜单宽度的例子

http://blog.minidx.com/2009/03/09/2270.html

3.走近Flex组件系列(三)：按扭组件（Button,CheckBox,LinkBar,LinkButton,PopUpButton,RadioButton,ToggleButtonBar）

 

 

4.Flex中如何通过popUpStyleName和alternatingItemColors样式设置PopUpButton下拉菜单交互颜色的例子

http://blog.minidx.com/2009/03/06/2232.html

 

 

4.Flex 给PopUpButton 设置皮肤

Flex PopUpButton组件是由一个"Label区域"和一个下拉箭头"Arrow区域"所组成的。如图


对我来说，PopUpButton默认的Style有几个地方不适合我：
1 点击Label区域不会弹出窗口
2 有时候我不想要"Arrow区域"，想把"Arrow区域"去掉
3 在开发过程中，都一般会给组件创建自己的皮肤。假如我给PopUpButton设置一个over-skin皮肤，当我鼠标移动到"Arrow区域"的时候over-skin的效果就不见了。

解决方法
1 把openAlways属性设定为"true"，这样点击Label区域也会弹出窗口
2,3都暂时没有单独的解决方法，但是2，3可以用点小技巧来联合解决
首先，因为没有直接的属性来去掉"Arrow区域"，那既然如此，我们就让Arrow区域占满整个PopUpButton，然后覆盖上我们自己的皮肤。这样Label区域就没有了。
方法： 设置让PopUpButton的arrow-button-width属性=PopUpButton的width属性。
这样第3个问题也就解决了，因为我们的鼠标永远只能移动到"Arrow区域"。但需要注意，这个时候皮肤我们就不能使用over-skin了，而要使用pop-up-over-skin属性来设定Arrow区域的皮肤，同样pop-up-down-skin也要设定
.facePopUpButton {
   arrow-button-width:25;           
   up-skin: Embed(source="assets/skin.swf",symbol="FacePupupButton_upSkin");
   pop-up-over-skin: Embed(source="assets/skin.swf",symbol="FacePupupButton_overSkin");
   pop-up-down-skin: Embed(source="assets/skin.swf",symbol="FacePupupButton_upSkin");
}

效果如下，图中最底下那个笑脸表情就是PopUpButton，点击后就弹出了显示上面一堆表情的窗口，现在鼠标在PopUpButton上移动，skin显示不会有任何问题了。