87,910
社区成员
发帖
与我相关
我的任务
分享各位大神谁能给我解释一下为什么我给easyUI的textbox添加清空按钮的时候会出现多个按钮
源码：
<!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>
效果图：
...全文
请发表友善的回复…
发表回复
Go 旅城通票 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:
Web开发学习资料推荐
easyui开发技巧
easyui datebox设置日期范围
$('#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设置日期范围
