TextBox 英文文档

TextBox

Extend from $.fn.validatebox.defaults. Override defaults with $.fn.textbox.defaults.

The TextBox component is a enhanced input field that allows users build their form easily. It is the base component for building other complex components such as combo,datebox,spinner,etc.

Dependencies
  • validatebox
  • linkbutton
Usage Example

Create textbox from markup.

  1. <input class="easyui-textbox" data-options="iconCls:'icon-search'" style="width:300px">

Create textbox by using javascript.

  1. <input id="tb" type="text" style="width:300px">
  1. $('#tb').textbox({
  2. buttonText:'Search',
  3. iconCls:'icon-man',
  4. iconAlign:'left'
  5. })
Properties

The properties extend from validatebox, below is the added properties for textbox:

NameTypeDescriptionDefault
widthnumberThe width of the component.auto
heightnumberThe height of the component.22
promptstringThe prompt message to be displayed in input box.''
valuestringThe default value. 
typestringThe textbox type. Possible values are 'text' and 'password'.text
multilinebooleanDefines if this is a multiline textbox.false
editablebooleanDefines if user can type text directly into the field.true
disabledbooleanDefines if to disable the field.false
readonlybooleanDefines if the component is read-only.false
iconsarrayThe icons attached to the textbox. Each item has the following properties:
iconCls: string, the icon class.
disabled: boolean, indicate if the icon is disabled.
handler: function, the function to process the clicking action on this icon.

Code example:

$('#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');
		}
	}]
})
[]
iconClsstringThe background icon displayed on the textbox.null
iconAlignstringPosition of the icons. Possible values are 'left','right'.right
iconWidthnumberThe icon width.18
buttonTextstringThe displaying text of button that attached to the textbox. 
buttonIconstringThe displaying icon of button that attached to the textbox.null
buttonAlignstringPosition of the button. Possible values are 'left','right'.right
Events

The events extend from validatebox, below is the added events for textbox.

NameParametersDescription
onChangenewValue,oldValueFires when the field value is changed.
onResizewidth,heightFires when the textbox is resized.
onClickButtonnoneFires when the user click the button.
onClickIconindexFires when the user click a icon.
Methods

The methods extend from validatebox, below is the added methods for textbox.

NameParameterDescription
optionsnoneReturn the options object.
textboxnoneReturn the textbox object. The user can bind any events to this editing box.

Code example:

var t = $('#tt');
t.textbox('textbox').bind('keydown', function(e){
	if (e.keyCode == 13){	// when press ENTER key, accept the inputed value.
		t.textbox('setValue', $(this).val());
	}
});
buttonnoneReturn the button object.
destroynoneDestroy the textbox component.
resizewidthResize the component width.
disablenoneDisable the component.
enablenoneEnable the component.
readonlymodeEnable/Disable readonly mode.

Code example:

$('#tb').textbox('readonly');	// enable readonly mode
$('#tb').textbox('readonly',true);	// eanble readonly mode
$('#tb').textbox('readonly',false);	// disable readonly mode
clearnoneClear the component value.
resetnoneReset the component value.
initValuevalueInitialize the component value. Calling this method does not trigger the 'onChange' event.
setTexttextSet the displaying text value.
getTextnoneGet the displaying text value.
setValuevalueSet the component value.
getValuenoneGet the component value.
getIconindexGet specified icon object.

原文:http://www.jeasyui.com/documentation/index.php#

转载于:https://www.cnblogs.com/langtianya/p/4882047.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值