easyui textbox 隐藏_EasyUI 带清除图标的文本框(TextBox with Clear Icon)_easyui demo

TextBox with Clear Icon

This example shows how to create an textbox with an icon to clear the input element itself.

源代码

TextBox with Clear Icon - jQuery EasyUI Demo

TextBox with Clear Icon

This example shows how to create an textbox with an icon to clear the input element itself.

$.extend($.fn.textbox.methods, {

addClearBtn: function(jq, iconCls){

return jq.each(function(){

var t = $(this);

var opts = t.textbox('options');

opts.icons = opts.icons || [];

opts.icons.unshift({

iconCls: iconCls,

handler: function(e){

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

$(this).css('visibility','hidden');

}

});

t.textbox();

if (!t.textbox('getText')){

t.textbox('getIcon',0).css('visibility','hidden');

}

t.textbox('textbox').bind('keyup', function(){

var icon = t.textbox('getIcon',0);

if ($(this).val()){

icon.css('visibility','visible');

} else {

icon.css('visibility','hidden');

}

});

});

}

});

$(function(){

$('#tt').textbox().textbox('addClearBtn', 'icon-clear');

});