为ligerui中tab页右键快捷菜单添加小图标

    在tab页上添加“关闭当前页” “关闭其他” “关闭所有” “刷新”,ligerui默认是不添加小图标的。 未添加小图标的右键快捷菜单

未添加小图标的右键快捷菜单 

    添加小图标的右键快捷菜单

添加小图标的右键快捷菜单 

    对比一下添加小图标的右键快捷菜单觉得精致了好多,那么怎么来修改呢? 1、修改ligerTab.js(位置一般在LigerUISourcelibligerUIjs下),把42行左右的代码修改成如下那样

$.ligerDefaults.TabString = {
closeMessage: "关闭当前页",
closeMessageIcon: "closethis",
closeOtherMessage: "关闭其他",
closeOtherMessageIcon: "closeother",
closeAllMessage: "关闭所有",
closeAllMessageIcon: "closeall",
reloadMessage: "刷新",
reloadMessageIcon: "freshen"
};

2、ligerTab.js,把82行左右的代码修改成如下那样

g.tab.menu = $.ligerMenu({ width: 100, items: [
{ text: p.closeMessage, id: 'close', icon: p.closeMessageIcon, click: function ()
{
g._menuItemClick.apply(g, arguments,2);
}
},
{ text: p.closeOtherMessage, id: 'closeother', icon: p.closeOtherMessageIcon, click: function ()
{
g._menuItemClick.apply(g, arguments,2);
}
},
{ text: p.closeAllMessage, id: 'closeall', icon: p.closeAllMessageIcon, click: function ()
{
g._menuItemClick.apply(g, arguments,2);
}
},
{ text: p.reloadMessage, id: 'reload', icon: p.reloadMessageIcon, click: function ()
{
g._menuItemClick.apply(g, arguments,2);
}
}
]
},2);

3、新增css

.l-icon-closethis {background:url('../images/icon/closethis.png') no-repeat center;}
.l-icon-closeall {background:url('../images/icon/closeall.png') no-repeat center;}
.l-icon-closeother {background:url('../images/icon/closeother.png') no-repeat center;}
.l-icon-freshen {background:url('../images/icon/freshen.png') no-repeat center;}

这样tab页右键快捷菜单小图片就添加上了。

如若转载,请注明出处:http://www.codingwhy.com/view/337.html

联系我们

在线咨询: 点击这里给我发消息

邮件:731000228@qq.com