TextBox(文本框)

扩展自$.fn.validatebox.defaults,使用$.fn.textbox.defaults重写默认值对象。(该组件自1.4版开始可用)


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


•   validatebox

•   linkbutton


通过标签创建文本框。

                    
                

使用Javascript创建文本框。

                    
        
                    $('#tb').textbox({
                        buttonText:'Search',
                        iconCls:'icon-man',
                        iconAlign:'left'
                    })
        
属性名 属性值类型 描述 默认值
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:'
                                   labelPosition: 'top',
                                   prompt: 'Ent'
                               });
                        

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 获取指定图标对象。