EasyUI-TextBox(文本框)

扩展自$.fn.validatebox.defaults,使用$.fn.textbox.defaults重写默认值对象。

TextBox(文本框)是一个增强的输入字段组件,
它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件,如:combodataboxspinner

 


  • validatebox
  • linkbutton

 
 

用法

通过标签创建验证框。


  1. class=-textbox”
    data-options=“iconCls:'icon-search'”
    style=”width:300px”> 


使用创建验证框。

  1. input
    id=“tb”
    type=“text”
    style=”width:300px”>


  1. $(‘#tb').textbox({   
  2.     buttonText:'Search‘,   
  3.     iconCls:'icon-man‘,
  4.     iconAlign:'left‘      
  5. })


 
 

属性

属性名

属性值类型

描述

默认值

width

number

组件的宽度。

auto

height

number

组件的高度。

22

prompt

string

在输入框显示提示消息。

value

string

默认值

 

type

string

文本框类型。可用值有:“text”“password”

text

multiline

boolean

定义是否是多行文本框。

false

editable

boolean

定义用户是否可以直接在该字段内输入文字。

true

disabled

boolean

定义是否禁用该字段。

false

readonly

boolean

定义是否将该控件设为只读。

false

icons

array

在文本框删贡献是图标。每一项都有以下属性:
iconCls
:类型string,图标的class名称;
disabled
:类型boolean,指明是否禁用该图标;
handler
:类型function,用于处理点击该图标以后的动作。

代码示例:

$(‘#tb').textbox({

    icons: [{

        iconCls:'icon-add',

        handler: function(e){

            $(e.data.target).textbox(‘setValue', ‘Something added!');

        }

    },{

        iconCls:'icon-remove',

        handler: function(e){

            $(e.data.target).textbox(‘clear');

        }

    }]

})

[]

iconCls

string

在文本框显示背景图标。

null

iconAlign

string

背景图标的位置。可用值有:“left”, “right”

right

iconWidth

number

图标宽度。

18

buttonText

string

文本框附加按钮显示的文本内容。

 

buttonIcon

string

文本框附加按钮显示的图标。

null

buttonAlign

string

附加按钮的位置。可用值有:“left”, “right”

right

 
 

事件

事件扩展自
validatebox
,以下是新增的文本框事件。

事件名

参数

描述

onChange

newValue, oldValue

在字段值更改的时候触发。

onResize

width, height

在文本框大小改变的时候触发。

onClickButton

none

在用户点击按钮的时候触发。

onClickIcon

index

在用户点击图标的时候触发。

 
 

方法

方法扩展自
validatebox
,以下是新增的文本框方法。

方法名

方法属性

描述

options

none

返回属性对象。

textbox

none

返回文本框对象。

button

none

返回按钮对象。

destroy

none

销毁文本框组件。

resize

width

调整文本框组件宽度。

disable

none

禁用组件。

enable

none

启用组件。

readonly

mode

启用/禁用只读模式。

代码示例:

$(‘#tb').textbox(‘readonly');                    // 启用只读模式

$(‘#tb').textbox(‘readonly',true);    // 启用只读模式

$(‘#tb').textbox(‘readonly',false);    // 禁用只读模式

clear

none

清除组件中的值。

reset

none

重置组件中的值。

setText

text

设置显示的文本值。

getText

none

获取显示的文本值。

setValue

value

设置组件的值。

getValue

none

获取组件的值。

getIcon

index

获取指定图标对象。

声明: 除非转自他站(如有侵权,请联系处理)外,本文采用 BY-NC-SA 协议进行授权 | 智乐兔
转载请注明:转自《EasyUI-TextBox(文本框)
本文地址:https://www.zhiletu.com/archives-2657.html
关注公众号:智乐兔

赞赏

wechat pay微信赞赏alipay pay支付宝赞赏

上一篇
下一篇

相关文章

在线留言

你必须 登录后 才能留言!

在线客服
在线客服 X

售前: 点击这里给我发消息
售后: 点击这里给我发消息

智乐兔官微