`
bootong
  • 浏览: 11500 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

TextInput中设置图标

    博客分类:
  • flex
阅读更多
package
{
	import flash.display.DisplayObject;
	
	import mx.controls.Image;
	import mx.controls.TextInput;
	import mx.core.mx_internal;
	
	use namespace mx_internal;
	
	public class MyTextInput extends TextInput
	{
		private var _image:Image;
		
		public function MyTextInput()
		{
			super();
		}
		
		override protected function createChildren():void
		{
			super.createChildren();
			
			_image = new Image();
			_image.source = "search.png";
			
			addChild(DisplayObject(_image));
		}
		
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			this._image.width = 16;
			this._image.height = 16;
			
			this._image.x = 0;
			this._image.y = (this.height - this._image.height)/2;
			
			this.textField.x = this._image.width+2;
			this.textField.y = (this.height - this.textField.height)/2;
			this.textField.width = this.width - this._image.width-5;
			//this.setStyle("paddingLeft",this._image.width+2);
			
			
		}
	}
}


比较简单的实现方式了,不过在网上很少查到。这个还是在外网blog上查到的,自己修改了下,本身它是仿照mac 的搜索做的图标在右边,改成左边了。谁要有跟好的解决方案,拿出来研究下啊!!!!o(∩_∩)o 哈哈
分享到:
评论

相关推荐

    纯CSS3实现漂亮的input输入框动画样式库(Text input love)

    分享一个用纯 CSS3 实现的,漂亮的 input 输入框动画样式库-Text input love。 点击每个输入框都用不同的动画效果,始终显示标签label,并显示 placeholder(占位符)文本。 演示地址:...

    带图标的input输入框

    在网页设计中,"带图标的input输入框"是一个常见的交互元素,它通过结合图标与文本输入框,提升用户界面的美观度和易用性。这样的设计可以使用户更直观地理解输入框的目的,例如,一个搜索图标常用于搜索框,锁型...

    bootstrap布局中input输入框右侧图标点击功能

    在Bootstrap布局中,我们经常需要在input输入框的右侧添加一些功能性的图标,例如清除按钮或切换密码可见性的图标。然而,Bootstrap默认情况下,并不直接支持这些图标触发点击事件。这是因为图标通常作为字体图标...

    react-native-textinput-effects:用于iOS和android的带有自定义标签和图标动画的文本输入。 内置响应本机,并受到Codrops的启发

    React本机文本输入效果我遇到了Codrops创建和的文本输入,并... 使用最新版本: $ npm install react-native-textinput-effects --save 如果您使用的是本机较旧的版本,则可以坚持使用0.4版: $ npm install react-nati

    在input中右边加上一个图标的css样式

    在网页设计中,为了增强用户体验或者提供更直观的指引,我们常常会在`input`元素的右侧添加图标。这种做法能够帮助用户理解输入框的目的,比如用于手机号码输入时,可能会添加电话图标。本文将详细解释如何使用CSS...

    vue+elementUi 实现密码显示/隐藏+小图标变化功能

    8. 根据`visible2`的值,动态地渲染两个`el-input`组件,一个使用`type="password"`来隐藏输入内容,另一个使用`type="text"`来显示内容。 9. 对应的图标也被赋予不同的类名来显示“显示密码”或“隐藏密码”的图标...

    input框添加图片按钮

    在网页设计中,为了优化用户体验及提升界面美观度,经常会遇到需要在`input`框旁边或内部加入图标按钮的情况。例如,一个登录表单中的“显示密码”按钮或者搜索框旁边的放大镜图标。本文将详细介绍如何在`input`框中...

    Android开发-DesignDemo-AndroidStudio(十二)TextInputLayout

    editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD); ``` 在"CoordinatorDemo"这个子项目中,可能还会涉及`CoordinatorLayout`的使用,它是Android的布局管理器,可以...

    Flex4开发的自定义输入框皮肤组件,代图标

    将新创建的皮肤类与自定义组件关联,可以在组件类中设置skinClass属性,或者在MXML中通过skinClass属性指定皮肤类。 7. **测试和优化**: 使用Flex Builder或命令行工具编译并运行CustomComponentSkinTest应用...

    JS Input里添加小图标的两种方法

    在网页设计中,为了提升用户体验和界面美观度,经常会在`<input>`元素中添加小图标,例如搜索图标、提示图标等。本文将详细介绍两种在JS中为`<input>`添加小图标的常见方法。 ### 方法一:背景图片法 这种方法是...

    Bootstrap3 input输入框插入glyphicon图标的方法

    在Bootstrap 3中,设计者和开发者经常需要在输入框(input)内或旁边添加图标,以增强界面的视觉效果和用户体验。本文将详细介绍如何在Bootstrap 3的input输入框中插入glyphicon图标。 Glyphicon是Bootstrap 3中内置...

    android自带的icons图标汇集

    9. 编辑框图标:edit_text、editbox_background、editbox_background_、editbox_dropdown_dark、editbox_dropdown_line 这些图标用于表示编辑框的样式,包括文本框、背景、下拉菜单背景等。 10. 图库图标:gallery_...

    TextInputDemo

    String inputText = usernameEditText.getText().toString(); // 切换密码可见性 TextInputLayout passwordInputLayout = findViewById(R.id.password_input_layout); passwordInputLayout....

    input输入款点击小眼睛显示或隐藏密码

    `type="password"`属性确保在浏览器中默认显示为星号或圆点,隐藏实际输入的字符。 ```html <input type="password" id="passwordInput" placeholder="请输入密码"> ``` 接下来,我们创建一个小眼睛图标,作为显示...

    layui实现input框添加tag

    <input type="text" id="layui-input-tag" class="layui-input layui-input-tag"> ``` **二、CSS样式** 为了让tag看起来更像一个标签,我们需要添加一些自定义的CSS样式。Layui本身提供了一些基础样式,但可能需要...

    带清除图标的 EditText ( 自定义EditText

    android:inputType="text"/> ``` 要添加清除图标,我们可以使用`android:drawableEnd`或`android:drawableRight`属性(对于右对齐的图标),这样当有内容输入时,图标会显示在文本右侧。例如,可以添加一个资源ID...

    在应用程序图标上叠加构建信息.zip

    这里,`input_path`是原始图标的位置,`output_path`是生成带有版本信息图标的路径,`text`是要叠加的文本,`font_size`和`color`分别定义字体大小和颜色。 3. **集成到构建流程**:将`version_icon` lane集成到你...

Global site tag (gtag.js) - Google Analytics