operamasks-ui框架tabs的bug批改

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也不会出现了

operamasks-ui框架tabs的bug批改

相关推荐