当前位置：文江博客话题详情

Flex TextInput 控件：搜索样式渲染

发布于 2024-07-26 03:35:24 字数 200 浏览 3 评论 0原文

我有一个 TextInput 控件，它具有系统中人员的搜索功能。效果很好。我所需要的只是将其样式设置为右侧有搜索图像，单击该图像时将进行搜索。它实际上是应用程序的外观和感觉的一部分，这将使搜索框看起来更好。

这与 Firefox 中嵌入的搜索框中实现的行为完全相同。

有什么办法解决这个问题吗？

谢谢：）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

被翻牌 2024-08-02 03:35:24

确认，避免子类化。可以说，跳出框框思考，并使用画布：

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

如果您想让它更整洁，那么就将其本身作为一个组件。与其他地方一样，在 MXML 中更倾向于组合而不是继承。

Ack, avoid subclassing. Think outside the Box, as it were, and use a Canvas:

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

Then make that a component itself if you want to make it neater. Favour composition over inheritance, in MXML as elsewhere.

回复收藏 0 原文

春风十里 2024-08-02 03:35:24

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

就这样！

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

That's all!

回复收藏 0 原文

风轻花落早 2024-08-02 03:35:24

您可以编写 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;

    }

这是您的自定义组件

You could write a subclass of TextInput Class which has as an image for "yourSearchIcon" image such as:

[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);
}

obviously you have to handle the resize event

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

    }

That's your custom component

回复收藏 0 原文

独守阴晴ぅ圆缺 2024-08-02 03:35:24

希望这段代码对您有帮助。此代码在 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);

}
}

Hope this code will help you. This code adds a search icon to the left of the 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);

}
}

回复收藏 0 原文

~没有更多了~