easyUI重绘combobox中下拉箭头

下午群里一个朋友问了我一个问题,她行要重绘combobox的下拉箭头。我当时第一想法就是让她把原生的图标替换不就好了嘛。可人家又说,要单选和多选的下拉箭头图标是不一样的。一段时间没用也不知道easyUI有没有给combobox开这个口子的,于是看了看文档,发现没有。那么看样子只能看源码咯,不过combo没有源码,只有变态的“_1,_2”命名的版本:

if(_4.hasDownArrow){
    _6.push({iconCls:"combo-arrow",handler:function(e){
    _a(e.data.target);
}});

hasDownArrow控制了是否显示下拉箭头,这里如果设置为false,那么就没有下拉箭头了,但是随之没有的也就是绑定在 下拉箭头上的事件。

好了,再接着看看,发现上面还有:

var _4=_3.options;
// 中间有省略
var _6=$.extend(true,[],_4.icons);

那么可以想到_4就是comboboxoptions,而_6则是_4中的icons属性。噢?还有icons属性,怎么官方文档上没有看到?难道是隐藏属性吗?呵呵
再看看最开始那段代码:

if(_4.hasDownArrow){
    _6.push({iconCls:"combo-arrow",handler:function(e){
    _a(e.data.target);
}});

应该能想到icon的格式了吧,对,就是{iconCls:"", handler:function(){}}。而icons呢则是一个数组,这样下面就可以写了:

    hasDownArrow:false,
    icons:[{
        iconCls:'icon-room-16',
        handler:function(){
            $(this).parent().next().click();
        }
    }],
    editable:false

其实也就是完全不使用DownArrow的逻辑,而自己放图标自己处理点击事件,而这里的handler也实现的很简单,就是模拟点击了combobox的非图标部分,所以这里editable设置为false是必须的。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值