扩展自$.fn.validatebox.defaults,使用$.fn.textbox.defaults重写默认值对象。(该组件自1.4版开始可用)
TextBox(文本框)是一个增强的输入字段组件, 它允许用户非常简单的创建一组表单。它是一个用于构建其他组合控件的基础组件,如:combo,databox、spinner等
通过标签创建文本框。
使用Javascript创建文本框。
| 属性名 | 属性值类型 | 描述 | 默认值 |
|---|---|---|---|
| width | number | 组件的宽度。 | auto |
| height | number | 组件的高度。 | 22 |
| cls | string | 允许给组件添加一个自定义css类名。(该属性自1.5.1版开始可用) | 22 |
| prompt | string | 在输入框显示提示消息。 | '' |
| value | string | 默认值 | |
| type | string | 文本框类型。可用值有:"text"和"password"。 | text |
| label | string,selector | 文本框标签。(该属性自1.5版开始可用)
代码示例: $('#email').textbox({
label: 'Email:' |
null |
| labelWidth | number | 标签宽度。(该属性自1.5版开始可用) | auto |
| labelPosition | string | 标签位置。可用值:'before','after','top'(该属性自1.5版开始可用) | before |
| labelAlign | string | 标签对齐方式。可用值:'left','right'(该属性自1.5版开始可用) | left |
| 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 |
返回文本框对象。 代码示例: var t = $('#tt');
t.textbox('textbox').bind('keydown', function(e){
if (e.keyCode == 13){ // 当按下回车键时接受输入的值。
t.textbox('setValue', $(this).val());
}
});
|
| 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 | 重置组件中的值。 |
| initValue | value | 初始化组件值。调用该方法不会触发“onChange”事件。(该方法自1.4.5版开始可用) |
| setText | text | 设置显示的文本值。 |
| getText | none | 获取显示的文本值。 |
| setValue | value | 设置组件的值。 |
| getValue | none | 获取组件的值。 |
| getIcon | index | 获取指定图标对象。 |