Flex中的CSS: (3)CSS会被编译器转换为什么样的AS代码--伪类:
发布时间:2020-12-15 04:58:23 所属栏目:百科 来源:网络整理
导读:熟悉html和css的朋友们都知道,伪类是用来设置组件在不同状态下的样式。 test1.mxml ?xml version="1.0" encoding="utf-8"?s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.ad
熟悉html和css的朋友们都知道,伪类是用来设置组件在不同状态下的样式。 test1.mxml <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Button:up{ color: #FF0000; } s|Button:down{ color: #FF00FF; } s|Button:over{ color: #0000FF; } </fx:Style> <s:VGroup> <s:Button label="button"/> </s:VGroup> </s:Application> 执行结果: 鼠标在按钮上移入、移出、按下、弹开,看看有什么变化。 编译器自动生成代码: var conditions:Array; var condition:CSSCondition; var selector:CSSSelector; selector = null; conditions = null; conditions = []; condition = new CSSCondition("pseudo","up"); conditions.push(condition); selector = new CSSSelector("spark.components.Button",conditions,selector); // spark.components.Button:up style = styleManager.getStyleDeclaration("spark.components.Button:up"); if (!style) { style = new CSSStyleDeclaration(selector,styleManager); } if (style.factory == null) { style.factory = function():void { this.color = 0xff0000; }; } selector = null; conditions = null; conditions = []; condition = new CSSCondition("pseudo","down"); conditions.push(condition); selector = new CSSSelector("spark.components.Button",selector); // spark.components.Button:down style = styleManager.getStyleDeclaration("spark.components.Button:down"); if (!style) { style = new CSSStyleDeclaration(selector,styleManager); } if (style.factory == null) { style.factory = function():void { this.color = 0xff00ff; }; } selector = null; conditions = null; conditions = []; condition = new CSSCondition("pseudo","over"); conditions.push(condition); selector = new CSSSelector("spark.components.Button",selector); // spark.components.Button:over style = styleManager.getStyleDeclaration("spark.components.Button:over"); if (!style) { style = new CSSStyleDeclaration(selector,styleManager); } if (style.factory == null) { style.factory = function():void { this.color = 0x0000ff; }; } 可见,每种状态都被转换为独立的AS代码。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |