在设置控件htmlText属性时,经常要涉及到设定样式,引用外部的css文件这种异步的方式用起来的确让人不顺畅。而flex中使用到的css通常都很小,所以有时候将样式直接写在代码里更简单。
以TextArea为例,为htmlText赋值以前,可以先设置它的css样式,即TextArea.styleSheet属性。
例如要添加的css样式为:
a:link{
color:#0000ff;
text-decoration:underline;
}
将这样一个样式添加到styleSheet中去。做法很简单:
//.......
var alinkStyle:Object = new Object();
alinkStyle["color"] = "#0000ff";
alinkStyle[“textDecoration”] = "underline";
styleSheet.setStyle("a:link",alinkStyle);
//......
tip:可以看到css中text-docoration变成了textDecoration了。
我们可以设计一个静态函数将上面的过程一步到位:
public static function addStyle(styleName:String,style:Object,styleSheet:StyleSheet):void{
styleSheet.setStyle(styleName,style);
}
有了这个函数,做上面的功能,就很easy了,而且看起来与css还挺像:
addStyle("a:link",
{
"color":"#0000ff",
"textDecoration":"underline"
},
styleSheet);
上个例子,应该就更清楚了:
代码:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" width="300" height="300">
<mx:Script>
<![CDATA[
import mx.controls.TextArea;
import flash.text.StyleSheet;
private var textArea:TextArea = null;
private var htmlText:String = null;
/**
* 为一个StyleSheet添加一个样式
* 样式的名称为styleName
* 样式内容放在sytle中
*/
public static function addStyle(styleName:String,style:Object,styleSheet:StyleSheet):void{
styleSheet.setStyle(styleName,style);
}
internal function initApp():void{
textArea = new TextArea();
htmlText = "<font size='12'>" +
"<b>我的<\/b>" +
"<i>blog<\/i>和" +
"<u>照片<\/u><br>" +
"<\/font>" +
"<a href='http://ioryioryzhan.iteye.com' target='_blank'>" +
"ioryioryzhan.iteye.com" +
"<img src='http://www.mjbox.com/r/io/ioryioryzhan/ZHANZHIHU.jpg'>" +
"<\/a>";
var my_css:StyleSheet = new StyleSheet();
//添加<a>标签的样式
addStyle("a:link",
{
"fontSize":"12",
"color":"#0000ff",
"textDecoration":"none"
},
my_css);
addStyle("a:hover",
{
"fontSize":"12",
"color":"#ff0000",
"textDecoration":"underline"
},
my_css);
textArea.styleSheet = my_css;
textArea.htmlText = this.htmlText;
textArea.width = 180;
textArea.height = 180;
addChild(textArea);
textArea.x = 50;
textArea.y = 50;
}
]]>
</mx:Script>
</mx:Application>
分享到:
相关推荐
1、flex 是开发swf方法的一种 2、flexBuilder基于eclipse的IDE集成Design、debug动态help 4j:ant脚本 3、flex framework visual components Manager classes RPC/Messaging/Data Service c Utilities 4、MxML ...
ES6 Flex砌体网格 ES6模块,用于在基于柔性的砌体布局中显示项目,而没有第三方依赖性。 网格布局仅使用css flexbox功能。 与众所周知的砌体布局相反,没有绝对的定位,这使其可用于各种CSS框架。 使用简单的转换...
css文本样式:使用text-decoration添加文本修饰,text-indent:2em添加首行缩进俩字符,line-height设置行间距,letter-spacing设置字符间距,word-spacing设置英文单词间距,text-align设置文本对齐方式;...
介绍 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。...style type="text/css"> .main{ width:200px; background-color: red
独立于任何网页位置处,声明一个样式文件(.css为后缀),在文件中声明样式,在使用的网页中引入.css文件。 使用步骤: 1.创建样式表文件(.css) 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <...
在Flash中使用ContainerMovieClip创建Flex容器 21.3节.导入FlashCS3的组件 21.4节.认识Cairngorm小型结构 21.5节.创建Cairngorm视图、事件和模型 21.6节.创建Cairngorm命令和事务代理类 21.7节.创建...
Learn new CSS3 functionality such as flex boxes, grids, animation, and transforms Control your styles from JavaScript for really powerful interactions See the styles implemented by built-in controls ...
用html+css制作的简单网页,使用display:flex 进行布局 点击项目下面饮品,切换饮品logo与背景颜色 js代码 <script type="text/javascript"> function imgSlider(anything){ document.querySelector('....
如题:高度已知,左右栏宽度300px,中间自适应: 弹性盒子本身就是并排的,我们设置宽度即可。 用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px...style type=text/css>
本文实例为大家分享了css3实现图片拖拽效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type=...
方法1:table-cell html结构: 垂直居中 css: .box1{ display: table-cell; vertical-align: middle; text-align: center; } 方法2:display:flex .box2{ display: flex; justify-content:center; ...
配置方案: 单独制作移动页面方案技术∶ 布局采取flex、rem、flexible.js、less初始化文件引入normalize.css lee中初始化body样式安装插件cssrem修改设定使用swiper插件下载拷贝这个文件到项目js资料夹找到合适的...
在webpack中使用sass 安装sass和sass-loader $ npm i sass sass-loader 由于使用了脚手架,安装完毕后重启前端即可 样式重置 其实就是样式的初始化 // reset * { box-sizing: border-box; // 以边框为准. css3盒...
Flexbox实现一个div元素在body页面中水平垂直居中: XML/HTML Code复制内容到剪贴板 <!DOCTYPE html> <html lang="en">...style type="text/css"> html { height: 100%; } body
[removed] 3、在body标签中加入以下格式的html代码 <div class="flexslider"> <ul class="slides"> <li> <img /> <p class="flex-caption">Caption, legend...</p> </li> <li> <img /> <p class="flex-caption">...
在ASP.NET中使用WINDOWS验证方式连接SQL SERVER数据库 改进ADO.Net数据库访问方式 ASP.NET 2.0 绑定高级技巧 简单实用的DataSet更新数据库的类+总结 [ADO.NET]由数据库触发器引发的问题 为ASP.NET封装的SQL数据库...
style type=text/css> .big { width: 100px; height: 100px; background: skyblue; display: flex; margin-top: 20px; } .small { width: 10px; height: 10px; ...
本文实例讲述了JS学习笔记之闭包小案例。分享给大家供大家参考,具体...style type="text/css"> *{ list-style:none; } ul{ display:flex; flex-wrap:wrap; } li{ width: 20%; text-align: center; } i