`

Flex SearchInput扩展

    博客分类:
  • FLEX
阅读更多
SearchInput扩展TextInput
增加:
    imageSource属性(右侧图片);
    tipText属性(为空时出现的提示文字);
    buttonClick事件(点击button及input中敲击回车触发)。


多说无益,上代码
package {
import flash.events.Event;
import flash.events.FocusEvent;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.ui.Keyboard;

import mx.controls.Alert;
import mx.controls.Button;
import mx.controls.Image;
import mx.controls.TextInput;
import mx.events.FlexEvent;

[Event(name="buttonClick", type="flash.events.Event")]
public class SearchInput extends TextInput {
    protected var buttonImage:Button;
    private var _imageHeight:int;
    private var _imageWidth:int;

    private var _isUseTip:Boolean = false;
    private var _tipText:String = "";
    private var _tipStyle:String = "italic";
    private var _tipColor:String = "#766767";


    [Bindable]
    [Embed(source="assets/icoSearch.png")]
    private var _imageSource:Class;

    public function SearchInput() {
        super();

        this.setStyle("borderColor", "#66B3FF");
        this.addEventListener(FlexEvent.CREATION_COMPLETE, addButton);
        this.addEventListener(KeyboardEvent.KEY_DOWN, KeyEnter);
    }

    override protected function createChildren():void {
        super.createChildren();

        this._isUseTip = this._tipText != "";
        if (_isUseTip) {
            setTip();
            this.addEventListener(FocusEvent.FOCUS_IN, focusTip);
            this.addEventListener(FocusEvent.FOCUS_OUT, focusTip);
        }
    }

    private function setTip():void {
        if (this.text == "") {
            this.text = _tipText;
            this.setStyle("fontStyle", _tipStyle);
            this.setStyle("color", _tipColor);
        }
    }

    private function clearTip():void {
        if (this.getStyle("fontStyle") == _tipStyle) {
            this.text = "";
            this.setStyle("fontStyle", "");
            this.setStyle("color", "");
        }
    }

    private function focusTip(e:FocusEvent):void {
        switch (e.type) {
            case FocusEvent.FOCUS_IN :
                return clearTip();
            case FocusEvent.FOCUS_OUT :
                return setTip();
        }
    }


    private function addButton(event:FlexEvent):void {
        buttonImage = new Button();
        buttonImage.setStyle("skin", _imageSource);
        buttonImage.height = imageHeight;
        buttonImage.width = imageWidth;
        buttonImage.useHandCursor = true;
        buttonImage.move(this.width - buttonImage.width - (this.height - buttonImage.height) / 2,
                (this.height - buttonImage.height) / 2);
        buttonImage.addEventListener(MouseEvent.CLICK, buttonClick);
        this.addChild(buttonImage);
    }

    private function KeyEnter(event:KeyboardEvent):void {
        if (event.charCode != Keyboard.ENTER) return;
        this.dispatchEvent(new Event("buttonClick"));
    }

    private function buttonClick(event:MouseEvent):void {
        this.dispatchEvent(new Event("buttonClick"));
    }

    public function get imageHeight():int {
        if (_imageHeight == 0) _imageHeight = this.height;
        return _imageHeight;
    }

    public function set imageHeight(value:int):void {
        _imageHeight = value;
    }

    public function get imageWidth():int {
        if (_imageWidth == 0) _imageWidth = this.height;
        return _imageWidth;
    }

    public function set imageWidth(value:int):void {
        _imageWidth = value;
    }

    public function get imageSource():Class {
        return _imageSource;
    }

    public function set imageSource(value:Class):void {
        _imageSource = value;
    }

    public function get tipText():String {
        return _tipText;
    }

    public function set tipText(value:String):void {
        _tipText = value;
    }
}
}


  • 大小: 8.1 KB
分享到:
评论

相关推荐

    flex支持过滤的input

    在IT行业中,Flex是一种基于ActionScript和MXML的开源框架,用于构建富互联网应用程序(RIA)。这个场景中提到的“flex支持过滤的input”是指在Flex应用中的输入框(Input)组件,它允许用户进行模糊查询,即在输入...

    HTML Select 下拉菜单功能扩展

    var input = document.getElementById('searchInput'); input.addEventListener('input', function() { fetch('api.php?query=' + this.value) .then(response => response.json()) .then(data => { var ...

    扩展 jQuery TableSorter 插件 的搜索/过滤器插件

    5. **自定义行为**:根据项目需求,可以使用 TableSorter 和 tablesorterFilter 提供的 API 进行自定义扩展。 ### 示例代码 ```html <!DOCTYPE html> <script src="https://code.jquery.com/jquery.js"></script...

    GoogleChromeExtension:Google Chrome搜索扩展

    document.getElementById('searchInput').addEventListener('keyup', function(e) { var keyword = e.target.value; chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { chrome.tabs....

    search-input:帮助搜索输入更好的模块

    this.searchInput = new SearchInput( { 'inputEl': '#search-input', // the input element 'bgEl': '#top-search-back', // the input element's parent 'resultsEl': '#search-list' // where the results ...

    页面一载入光标定位到文本框,并选中其中文字

    var searchInput = document.getElementById('searchInput'); // 光标定位 searchInput.focus(); // 选中文本 if (searchInput.setSelectionRange) { // 对于支持setSelectionRange的浏览器 searchInput....

    jQuery实现文本框获得焦点文字消失

    在网页设计中,交互性是提升用户体验的关键因素之一。jQuery作为一个强大的JavaScript库...在实际项目中,可以根据需要对代码进行优化和扩展,例如,为多个文本框添加此功能,或者根据不同的应用场景定制更复杂的逻辑。

    html5和css3全屏搜索框样式

    <input type="search" id="searchInput" placeholder="请输入关键词"> ``` `placeholder`属性用于设置输入框的提示文字。此外,HTML5还提供了`<form>`元素来包裹搜索框,以实现表单提交功能,同时可以通过`<button>...

    可输入的下拉框

    const searchInput = document.getElementById('searchInput'); const optionsContainer = document.getElementById('optionsContainer'); searchInput.addEventListener('input', () => { const searchText = ...

    响应式搜索框

    响应式设计是现代网页开发中的一个重要概念,它允许网页在不同...通过不断优化和扩展,你可以构建更复杂的响应式组件,满足不同场景下的需求。记得在实际开发中进行跨设备测试,确保在各种屏幕尺寸下的表现都符合预期。

    微信小程序实现搜索功能并跳转搜索结果页面

    input class=searchInput value='{{keyWord}}' bindconfirm='goSearch' placeholder=请输入搜索关键字 type=text /> search.wxss样式: .form { position: relative; height: 40px; } .searchInput { border...

    jquery搜索栏select下拉选择框

    例如,可以通过计算屏幕宽度和选项宽度来决定每行显示多少个选项,然后用CSS的`display: flex`和`flex-wrap: wrap`属性来实现换行。 5. **响应式设计**:确保搜索栏和下拉选择框在不同设备和屏幕尺寸上都能良好工作...

    vue.js 仿百度搜索

    Vue的组件化和插件生态系统让我们能够轻松地扩展功能,提升代码的可维护性和复用性。 这个项目不仅可以帮助开发者熟悉Vue.js的基本用法,还能深入理解组件化开发和异步数据处理。通过实践,你可以进一步掌握Vue.js...

    输入框下拉列表提示.rar

    在网页设计和开发中,"输入框下拉列表提示"是一种常见的交互元素,它提高了用户在填写表单时的效率和体验。...在实际项目中,可以根据需求进行扩展,比如添加异步数据加载、模糊搜索等功能,以提供更丰富的用户体验。

    jquery搜索框下拉列表选择搜索分类效果

    var $searchInput = $('#searchInput'); var $searchDropdown = $('#searchDropdown'); // 当搜索框获取焦点时显示下拉列表 $searchInput.on('focus', function() { $searchDropdown.removeClass('hidden'); ...

    javascript经典特效---导航条前的INPUT.rar

    <input type="text" id="searchInput" placeholder="搜索..."> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">联系我们</a></li> ``` 接着,我们用CSS来美化这个导航条...

    jquery仿google自动提示

    **jQuery仿Google自动提示技术详解** 在Web开发中,用户输入体验是至关重要的,而Google的搜索框自动提示功能就是一种提升用户体验的经典设计。...在实践中,可以根据具体需求进行调整和扩展,以适应不同的应用场景。

    jQuery搜索框删除文字代码

    var $searchInput = $('#searchInput'); var $clearSearch = $('#clearSearch'); // 当搜索框有内容时显示清除按钮 $searchInput.on('input', function() { if ($(this).val()) { $clearSearch.show(); } ...

    没有form表单情况下敲回车键提交表单的js代码.docx

    #### 扩展知识点 1. **事件对象**:在JavaScript中,事件对象包含了关于触发事件的信息,比如`keyCode`属性可以用来判断按下的是哪个键。 2. **事件类型**:除了`keydown`事件外,还有`keyup`和`keypress`等其他...

    搜索框的设计

    <input type="search" id="searchInput" placeholder="请输入搜索关键词"> 搜索 ``` 接下来,CSS3的使用让搜索框的外观更加丰富和动态。我们可以利用以下CSS3特性: 1. **边框-radius**:创建圆角,使搜索框看...

Global site tag (gtag.js) - Google Analytics