Flex3 - 高亮文本框中一段文字
作者:hangge | 2015-03-03 10:25
下面是一个可以高亮TextArea中某一段文字背景的组件,使用时只需要传入需要高亮的文字起始,结束位置索引即可。
组件使用:
(注意:如果文本区域有滚动条,则滚动后需重新设置高亮)
效果图如下:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="0xffffff" applicationComplete="initApp();" xmlns:highlight="highlight.*"> <mx:Script> <![CDATA[ import mx.events.ScrollEvent; import mx.managers.ToolTipManager; private var updateTimer:Timer; private function initApp():void { ToolTipManager.showDelay = 0; //timer updateTimer = new Timer(5, 1); updateTimer.addEventListener(TimerEvent.TIMER, validate, false, 0, true); lightText.addEventListener(ScrollEvent.SCROLL, scrollEvent); lightText.htmlText = "Documentation for classes includes syntax, " + "<b><font size='18'>usage</font></b> information, and code samples for methods, " + "properties, " + "in ActionScript (as opposed to global functions or properties). " + "The <font size='24'>classes</font> are listed alphabetically. " + "If you are not sure to which class a certain method or property belongs, " + "you can look it up in the Index."; beginIndexInput.text = "43"; endIndexInput.text = "200"; } private function showBlock():void { lightText.showBlock(parseInt(beginIndexInput.text), parseInt(endIndexInput.text)); } //validate private function validate(event:TimerEvent):void { showBlock(); } //scrollEvent private function scrollEvent(event:ScrollEvent):void { updateBlock(); } //更新 private function updateBlock():void { updateTimer.reset(); updateTimer.start(); } ]]> </mx:Script> <highlight:BlockTextArea id="lightText" width="300" height="100" y="10" x="10"/> <mx:Button x="10" y="148" label="Show Highlight" click="showBlock();"/> <mx:TextInput id="beginIndexInput" x="92" y="118" width="60"/> <mx:TextInput id="endIndexInput" x="232" y="118" width="60"/> <mx:Label x="10" y="121" text="beginIndex:"/> <mx:Label x="160" y="121" text="endIndex:"/> </mx:Application>组件下载:HighlightTest.zip
全部评论(0)