4.11.指定TextField中的HTML樣式

2024-04-27 13:51:54

字體：大中小

供稿：網(wǎng)友

4.11.1. 問(wèn)題
我想通過(guò)外部加載的CSS 文件或是寫(xiě)在程序里的CSS 樣式，來(lái)實(shí)現(xiàn)TextField 中的HTML的CSS 樣式。
4.11.2. 解決辦法
使用StyleSheet parseStyle 方法來(lái)對(duì)TextArea 進(jìn)行字符串解析和樣式表分配。
4.11.3. 討論
StyleSheet 對(duì)象可以把任何正確的CSS 當(dāng)成字符串解析，處理它的所有信息，把它分配到一個(gè)組件或是在HTML 文本中應(yīng)用。要實(shí)現(xiàn)這個(gè)，你需要用一個(gè)URLLoader 對(duì)象加載文件，把加載的數(shù)據(jù)當(dāng)作字符串傳遞給parseCSS 方法，也可以把字符串寫(xiě)出來(lái)直接傳給StyleSheet對(duì)象。下面的例子就是把樣式寫(xiě)成字符串，當(dāng)creationComplete 事件發(fā)生時(shí)，就將它解析。

TextArea 的htmlText 屬性在樣式被應(yīng)用后就會(huì)進(jìn)行設(shè)置，確保樣式被完全應(yīng)用到HTML 里。

使用如下樣式屬性會(huì)<span>的樣式:
"<span class='largered'>
This style is specified in the string that will be passed to the StyleSheet.parseStyle method:
.largered { font-family:Arial, Helvetica; font-size:16; color: #ff0000; }
例子：

-XML

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="1000" height="800" creationComplete="createStyle()">
<mx:Script>
<![CDATA[
//note even though names are camel cased here when used, all lowercase
private var styleText:String = '.largered { fontfamily: Arial, Helvetica; font-size:16; color: #ff0000; }' +
'.smallblue { font-size: 11; color: #0000ff; font-family:Times New Roman, Times; }' +
'li { color:#00ff00; font-size:14; }' +
'ul {margin-left:50px;}';
[Bindable]
private var lipsum:String = "<span class='largered'>Nulla metus.</span> Nam ut dolor vitae risus condimentum auctor."+
" <span class='smallblue'>Cras sem quam,</span> malesuada eu, faucibus aliquam, dictum ac, dui. Nullam blandit"+
" ligula sed arcu. Fusce nec est.<ul><li> Etiam</li><li> aliquet,</li> <li>nunc</li></ul> eget pharetra dictum, magna"+
" leo suscipit pede, in tempus erat arcu et velit. Aenean condimentum. Nunc auctor"+
" nulla vitae velit imperdiet gravida";
[Bindable]
private var style:StyleSheet;
private function createStyle():void
{
style = new StyleSheet();
style.parseCSS(styleText);
text.styleSheet = style;
text.htmlText = lipsum;
}

]]>
</mx:Script>
<mx:TextArea id="text" width="200" height="300"/>
</mx:Application>