返回 导航

Flex

hangge.com

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)

回到顶部