operamasks-ui框架tabs的bug修改

在使用operamasks-ui框架的时候,发现它的tab用起来不太方便。如果是动态添加tab页,当关闭掉所有的tabs后,再打开一个tab,出现页面是空白的现象,若没有全部关闭tab,则不会出现该现象

而我的系统需要首页不能被关闭,而它默认是不支持的。所以我就查看了它的源码,对其进行了修改,是增加属性的方式,不影响其原有的功能和使用。

1、首先在它的options里面增加一个属性:

  /**
* 当tabMenu为true的时候该设置生效,设置为true则右键关闭时可以让第一个页签关闭
* @default true
* @type Boolean
* @example
* $('#make-tab').omTabs({closeFirst : true});
* 2012.12.27 11:40 修改 by zengyouyuan
*/
closeFirst: true,


该属性来决定是否关闭首页

2、修改它的_render方法,在点击tabs的右键菜单中,修改它的事件

将以前的
   

if (options.closable && options.tabMenu && $.fn.omMenu) {}

修改成:

// 2012.12.27 11:40 修改 by zengyouyuan
if (options.closable && options.tabMenu && $.fn.omMenu) {
if(!options.closeFirst)
{
var tabId = $self.attr('id');
this.menu = this.$menu.omMenu({
contextMenu : true,
dataSource : [{id:tabId+'_001',label:'关闭'},
{id:tabId+'_002',label:'关闭其它'},
{id:tabId+'_003',label:'关闭所有'}
],
onSelect : function(item,e){
if(item.id == tabId+'_001'){
var itemId = $(self.$currentLi).find('a.om-tabs-inner').attr('tabid');
if("firstTab" === itemId)
{
return;
}
else
{
self.close(self.getAlter(itemId));
}
}else if(item.id == tabId+'_002'){
$headers.find('ul li').each(function(index,item){
var currentLiId = $(self.$currentLi).find('a.om-tabs-inner').attr('tabid');
var itemId = $(item).find('a.om-tabs-inner').attr('tabid');
if(currentLiId === itemId)
return;
if("firstTab" === itemId)
return;
self.close(self.getAlter(itemId));
});
}else if(item.id == tabId+'_003'){
$headers.find('ul li').each(function(index,item){
var itemId = $(item).find('a.om-tabs-inner').attr('tabid');
if("firstTab" === itemId)
return;
self.close(self.getAlter(itemId));
});
}
}
});
}
else
{
var tabId = $self.attr('id');
this.menu = this.$menu.omMenu({
contextMenu : true,
dataSource : [{id:tabId+'_001',label:'关闭'},
{id:tabId+'_002',label:'关闭其它'},
{id:tabId+'_003',label:'关闭所有'}
],
onSelect : function(item,e){
if(item.id == tabId+'_001'){
self.close(self.getAlter($(self.$currentLi).find('a.om-tabs-inner').attr('tabid')));
}else if(item.id == tabId+'_002'){
$headers.find('ul li').each(function(index,item){
var currentLiId = $(self.$currentLi).find('a.om-tabs-inner').attr('tabid');
var itemId = $(item).find('a.om-tabs-inner').attr('tabid');
if(currentLiId === itemId)return;
self.close(self.getAlter(itemId));
});
}else if(item.id == tabId+'_003'){
self.closeAll();
}
}
});
}
}



3、在使用的时候,可以这样:

var tabs = $("#tabs").omTabs({
width : '100%',
height : '100%',
tabMenu : true,
closeFirst: false, //不关闭首页
closable : true,
// switchMode : 'mouseover',
tabWidth : 100
});

那么首页的tab页就不会被关闭了,而此时前面提到的bug也不会出现了
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值