easyui textbox添加清除内容图标

  目的:给easyui的textbox对象添加icon-clear图标,默认图标隐藏(如果有值则默认显示),当textbox输入内容后显示图标,删除内容后隐藏清除内容图标。

其实easyui的textbox提供了icons配置,可以配置textbox的图标,但是图标都是显示的,没有依据内容进行显示。
cons     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');
        }
    }]
})


 

  easyui textbox添加清除内容图标扩展方法源代码和效果如下

easyui textbox添加清除内容图标

<div id="dvX">姓名:<input type="text" /><br /><br />邮箱:<input type="text" /><br /><br />电话:<input type="text" /></div>
<script>
    $(function () {
        $('#dvX input').textbox().textbox('addClearBtn', 'icon-clear');
    });
    $.extend($.fn.textbox.methods, {
        addClearBtn: function (jq, iconCls) {
            var opts = jq.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');
                }
            });
            return jq.each(function () {
                var t = $(this);
                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');
                    }
                });
            });
        }
    });
</script>

 



原创文章,转载请注明出处:easyui textbox添加清除内容图标
评论(0)Web开发网
阅读(169)喜欢(0)不喜欢(0)easyui