学习笔记 Flex中设置Flex滚动条的样式

开发 后端
本文向大家简单介绍一下如何在Flex中设置Flex滚动条的样式,在Flex中使用容器的时候,经常会遇到出现Flex滚动条的情况。

在学习Flex的过程中,你可能会遇到Flex中设置Flex滚动条的样式方面的问题,这里和大家分享一下,在Flex中,简单的修改控件的外观可以使用样式(Style)和皮肤(skin),这里修改滚动的外观也是如此.

Flex中设置Flex滚动条的样式

在Flex中使用容器的时候,经常会遇到出现Flex滚动条的情况,虽然官方提示的Flex滚动条外观已经非常漂亮,但有个时候我们还是会有种修改Flex滚动条外观的冲动,让我们的程序看起来更和谐些。

在Flex中,简单的修改控件的外观可以使用样式(Style)和皮肤(skin),这里修改滚动的外观也是如此.首先先来比较下修改前后的Flex滚动条样式(以横向Flex滚动条为例).

 虽然我更改后的样式没有自带的漂亮,但是相信你一定可以把它弄的比较漂亮.以上自定义是通过以下代码实现的(代码写在外部的CSS文件中,如main.css中).

  1. 1.  
  2. 2.HScrollBar{  
  3. 3.downArrowUpSkin:  
  4. 4.Embed(source=”/assets/downArrow.png”);  
  5. 5.downArrowOverSkin:  
  6. 6.Embed(source=”/assets/downArrow.png”);  
  7. 7.downArrowDownSkin:  
  8. 8.Embed(source=”/assets/downArrow.png”);  
  9. 9.upArrowUpSkin:  
  10. 10.Embed(source=”/assets/upArrow.png”);  
  11. 11.upArrowOverSkin:  
  12. 12.Embed(source=”/assets/upArrow.png”);  
  13. 13.upArrowDownSkin:  
  14. 14.Embed(source=”/assets/upArrow.png”);  
  15. 15.thumbDownSkin:  
  16. 16.Embed(source=”/assets/thumb.png”,  
  17. 17.scaleGridLeft=”7″,scaleGridTop=”5″,  
  18. 18.scaleGridRight=”8″,scaleGridBottom=”7″);  
  19. 19.thumbUpSkin:  
  20. 20.Embed(source=”/assets/thumb.png”,  
  21. 21.scaleGridLeft=”7″,scaleGridTop=”5″,  
  22. 22.scaleGridRight=”8″,scaleGridBottom=”7″);  
  23. 23.thumbOverSkin:  
  24. 24.Embed(source=”/assets/thumb.png”,  
  25. 25.scaleGridLeft=”7″,scaleGridTop=”5″,  
  26. 26.scaleGridRight=”8″,scaleGridBottom=”7″);  
  27. 27.trackSkin:  
  28. 28.Embed(source=”/assets/scrolltrack.png”,  
  29. 29.scaleGridLeft=”7″,scaleGridTop=”4″,  
  30. 30.scaleGridRight=”8″,scaleGridBottom=”6″);  
  31. 31.}  
  32.  

 以上CSS的代码都比较简单明了,只是thumbDownSkin,thumbUpSkin,thumbOverSkin,trackSkin四个中的后面4个属性(scaleGridLeft,scaleGridTop,scaleGridRight,scaleGridBottom)比较怪怪,一开始我也不懂是啥意思.Google了一下,原来是一个叫Scale-9的东西.简单的说,就是当图片拉伸的时候,只会对设置的格子之间的部分进行拉伸(横向拉伸时只对X坐标之间的部分位伸,纵向位伸时只对Y坐标之间的部分位伸),如上面的thumbUpSkin,横向拉伸时,会对X坐标为7,8之间的部分拉伸,纵向拉伸时,会对Y坐标为5,7之间的部分位伸,其它部分(只剩下四个角了)还是会等比例显示.这个鬼东西对像这样的Flex滚动条,或者在拉伸那种圆角矩形时,非常有用.

【编辑推荐】

  1. Flex滚动条常见问题解答
  2. FlexBuilder4十大新特性闪亮登场
  3. 解析AS3中Flex正则表达式的使用
  4. 揭开Flex正则表达式的神秘面纱
  5. FlexBuilder开发方法及特点解析 
责任编辑:佚名 来源: javaeye.com
相关推荐

2010-07-28 11:25:08

Flex滚动条

2010-09-09 09:47:02

DIV滚动条

2010-08-03 09:54:20

Flex鼠标样式设置

2010-08-03 09:27:29

设置Flex样式

2010-08-06 14:36:39

CSS样式Flex

2010-09-14 10:13:53

DIV滚动条

2011-05-12 16:30:44

自定义滚动条

2010-09-09 11:25:55

滚动条CSS

2010-08-09 10:34:05

Flex背景

2010-08-13 10:01:46

Flex样式定义

2010-08-13 08:57:20

Flex主题

2010-08-09 15:30:00

Flex字体

2010-08-05 13:27:06

Flex布局

2010-07-27 10:39:25

Flex组件

2010-07-29 13:18:45

Flex右键菜单

2010-07-29 13:34:36

Flex样式

2010-07-29 15:36:23

Flex安全沙箱

2010-08-10 16:41:54

FlexJSP

2010-08-04 09:26:27

Flex数据

2010-08-06 13:22:48

FlexCSS
点赞
收藏

51CTO技术栈公众号