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
分享到:
相关推荐
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 ...
input class=searchInput value='{{keyWord}}' bindconfirm='goSearch' placeholder=请输入搜索关键字 type=text /> search.wxss样式: .form { position: relative; height: 40px; } .searchInput { border...
有趣的jquery搜索框插件zySearch是一款用户体验超棒,搞笑,新颖搜索框代码。
后端表 Simple Datatables的插件,可以对数据表进行后端分页,排序,过滤和搜索。 安装 只需在简单数据表之后导入后端表插件 import {DataTable} from "simple-datatables" ... searchInput: searchInput
SearchInput组件 StatesTable组件 页数 国家页面 布局组件 转换索引结构 在module.css文件中应用样式 导入徽标svg SearchInput组件 从材质ui图标导入图标 通过module.css应用样式 带道具的输入元素 StatesTable组件 ...
木偶弦 用于常见浏览器自动化工作流程的更好界面 例子 import { openBrowser , closeBrowser , openTab , waitForNavigation , ... const searchInput = await findElement ( tab , '[name="q"]' ) await fillIn
React本机搜索过滤器 具有过滤功能的 React Native 搜索组件。 入门 安装 使用npm : $ npm install react-...import SearchInput , { createFilter } from 'react-native-search-filter' ; import emails from './ema
安装 $ npm install 启动开发环境 $ npm run start ...更改API代理 ... 文件目录 project tree ├── App.js ...│ └── SearchInput ├── index.scss ├── index.tsx ├── module.scss ├── pages //pa
纳米状态-React的可共享状态可以在React树之外的组件之间共享的快速状态。 通过让React仅在使用该值的特定组件之间进行协调,可以实现快速更新。...const SearchInput = ( ) => { // All we need to s
灰烬筛选和列表 该插件为您提供了基于出色的bootstrap-datepicker库的日期输入组件。 它支持弹出和内联模式,并且可以... {{ input value = searchInput }} {{ #sift-and-list sortBy = " title " list = list sear
阻止我的阅读 的项目7。 对于用户 该应用程序的目标是帮助您管理书籍清单的状态。 您可以在3个书架之间进行选择: “当前阅读” , “想要阅读”和...---------- <SearchInput> ---------- --------------- <Move
C语言编写的通讯录管理程序设计 #include"stdio.h" #include"stdlib.h" #include"string.h" #include"conio.h" #define HEADER1"------------------------------------------MESSAGE MENU--------------------------...
/*在数组temp中查找编号为searchinput值的元素,并返回该数组元素的下标值*/ if(p!=-1) /*若找到该记录*/ { printheader(); printdata(temp[p]); printf(END); printf("press any key to return"); getchar...
React本机材料设计搜索栏 React Native材质设计SearchBar 建立 使用npm i -S react-native-material-design-searchbar searchbar从npm安装SearchBar。 然后,使用import SearchBar from 'react-native-material-...
JSP下载文件说明包括两部分内容,一部分是JSP基础知识;另一部分是综合实例。读者可根据相应的使用说明直接使用这些源代码。 一、基础知识部分 此部分是指文件夹名为第1~9章中的内容(如表1),这些是书中介绍JSP...