浏览 5120 次
|
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2013-04-20
在使用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也不会出现了 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2013-04-20
最后修改：2013-04-20
这个改动很实用啊，但是对源代码进行了修改，总觉得不妥。
operamasks-ui还是有很多不完善的地方，而且现在学习和使用的人也少，用起来挺纠结的。 最近在学习和研究operamasks-ui，想通过自己的努力来使它更易用，不知道有没有兴趣一起交流一下？ http://www.iteye.com/topic/1130152 |
| 返回顶楼 | |
|
发表时间：2013-04-22
https://github.com/haiyupeter/operamasks-ui?source=cr
建议fork一下,然后提交. peter哥会把这个改动合并到主干上的 |
| 返回顶楼 | |
|
发表时间：2013-04-22
不错的建议，我找时间合并到github上面
|
| 返回顶楼 | |
|
发表时间：2013-04-22
dinguangx 写道 这个改动很实用啊，但是对源代码进行了修改，总觉得不妥。
operamasks-ui还是有很多不完善的地方，而且现在学习和使用的人也少，用起来挺纠结的。 最近在学习和研究operamasks-ui，想通过自己的努力来使它更易用，不知道有没有兴趣一起交流一下？ http://www.iteye.com/topic/1130152 对源码修改也未必不可，只要是好的修改，同样可以合并到主干里面 
|
| 返回顶楼 | |
|
发表时间：2013-04-26
var tab = $('#make-tab').omTabs({
closable : true, tabMenu : false, onBeforeClose : function(n,event) { if($('#make-tab').omTabs('getLength') == 1){ return false; } } }); |
| 返回顶楼 | |
