各位大神谁能给我解释一下为什么我给easyUI的textbox添加清空按钮的时候会出现多个按钮

houboTech 2017-08-24 08:10:06

源码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
$.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');
$('#tt2').textbox().textbox('addClearBtn', 'icon-clear');
$('#tt1').textbox().textbox('addClearBtn', 'icon-clear');
});
</script>
</head>
<body>
文本框：<input type="text" class="easyui-textbox" addClear id="tt"/><br/>
文本框：<input type="text" class="easyui-textbox" addClear id="tt1"/><br/>
文本框：<input type="text" class="easyui-textbox" addClear id="tt2"/>
</body>
</html>

效果图：

...全文

371 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

斯洛文尼亚旅游 2017-08-24

打赏
举报

不用自己写，1.5已经有icons配置了 icons array The 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');
		}
	}]
})

Web开发学习资料推荐
easyui开发技巧
easyui datebox设置日期范围