Flex TextInput控件：搜索樣式渲染

我有一個TextInput控件，它具有系統中人員的搜索功能。它工作正常。我所需要的就是以這樣一種方式來設計它，它會在右側顯示搜索圖像，點擊時搜索圖像。它實際上是外觀和感覺的應用程序的一部分，這將使搜索框看起來更好。Flex TextInput控件：搜索樣式渲染

這與在Firefox中嵌入的搜索框中執行的行爲完全相同。

對此的任何解決方案？

謝謝:)

來源

2009-06-29 online19

在Flex 4 Spark TextInput中，您可以將skinClass設置爲您自己的自定義TextInputSkin。在皮膚中，您可以使用基本佈局將搜索圖標圖像放置在您想要的位置。在這種情況下，將圖標錨定到右邊緣並將labelDisplay寬度設置爲100％。然後將其他paddingRight添加到labelDisplay以防止文本與圖標重疊。 – 2011-08-27 19:44:04

<mx:HBox> 
    <mx:TextInput id  = "txtSearch"/> 
    <mx:Image source  = "yourSearchIcon.png" 
       click  = "doSearch()" 
       buttonMode = "true"/> 
</mx:HBox>

這一切！

來源

2009-06-29 15:29:57

這就是我現在所擁有的... 我需要嵌入/搜索textInput本身，並需要擺脫搜索按鈕 – online19 2009-06-29 15:44:02

然後只需執行以下操作 2009-06-29 16:46:42

'll try that 但是，我們不能讓textinput控件在文本框的某個位置添加圖片嗎？ – online19 2009-06-29 17:41:55

你可以寫TextInput類的子類，爲擁有「yourSearchIcon」的圖像，如圖像：

[Embed(source='../../libs/graphic_elements.swf#search_ico')] 
private var searchIcon:Class; 
private var searchImg:Image = new Image(); 

private function onCreationComplete(event:Event) : void { 
    searchImg.source = searchIcon; 
    searchImg.x = this.width - 40; 
    this.addChild(searchImg); 
    this.addEventListener(ResizeEvent.RESIZE, onResize); 
}

很明顯，你必須處理調整大小事件

private function onResize(event:ResizeEvent) : void { 
     searchImg.x = event.currentTarget.width - 40; 

    }

這是您的自定義組件

來源

2009-07-10 08:31:34

確認，避免子類別。條條框框，因爲它是，並且用帆布：

<mx:Canvas> 
    <mx:TextInput change="doSearchFor(event.currentTarget.text)" /> 
    <mx:Image source="search_icon.png" verticalCenter="0" right="5" /> 
</mx:Canvas>

然後做出一個組件本身，如果你想讓它更整潔。與其他地方一樣，喜歡在繼承中使用MXML。

來源

2009-07-15 07:27:39

希望這段代碼能幫到你。此代碼在TextInput的左側添加了一個搜索圖標。

public class SearchInputBox extends TextInput 
{ 

[Embed(source='../../../../assets/images/icons/searchIcon.png')] 
private var searchIcon:Class; 
private var searchImg:Image;   

override protected function createChildren():void 
{ 
     super.createChildren(); 
     searchImg = new Image(); 
     searchImg.source = searchIcon; 
     searchImg.width=15; 
     searchImg.height=15; 
     searchImg.x = 2; 
     searchImg.y = 3; 

     setStyle("paddingLeft",searchImg.width+2); 
     addChild(searchImg); 

} 
}

來源

2009-08-20 17:00:51

Flex TextInput控件：搜索樣式渲染

回答

相關問題