`

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 帮助文档

    只是我在网上找的 operamasks-ui api 文档 , 希望对你们有帮助

    operamasks-ui-2.0

    operamasks-ui-2.0 这个帮助文档很难才找到的,感谢CSDN,其中的说明真的是很详细了,维护旧代码用到的这个框架,相比easyui和bootstrap这个框架简单一些,不过用起来还是不错的,除了文档太少,不过有这个就基本...

    operamasks-ui-2.0-demo.zip

    开发者可能需要确保这个UI框架在其他主流浏览器(如Chrome、Firefox、Safari和Edge)上也能正常工作。 9. **响应式设计**: 作为用户界面的升级版本,"UI 2.0"很可能考虑了不同设备和屏幕尺寸的适配,采用了响应式...

    operamasks-ui_demo

    operamasks-ui的demo程序,能够直接部署,运行。查看om-ui上优秀的标签。

    金蝶operamasks-ui(API)

    1、将operamasks-ui.war部署到符合Servlet 2.5/JSP2.1的所有Web容器或J2EE应用服务器(如:Tomcat) 2、war包部署成功后访问:http://127.0.0.1:8080/operamasks-ui/

    operamasks-ui 最新.

    operamasks-ui 最新.完成的,下载下来直接可以点击查看,跟官网一模一样

    operamasks-ui

    "Operamasks-UI" 是一个专为Opera浏览器设计的用户界面增强插件的源代码包,其版本为1.2,存储在一个名为"operamasks-ui-1.2.zip"的压缩文件中。这个插件的目标是提供更加个性化、高效且易用的浏览体验。在了解这个...

    operamasks-ui和struts2、springMVC框架整合实践

    springMVC框架开发 博文链接:https://lyg8266.iteye.com/blog/1404821

    operamasks-ui-2.0.zip

    总的来说,OperaMasks UI 2.0是一个强大且全面的前端UI框架,无论你是前端新手还是经验丰富的开发者,都能从中受益。它不仅提高了开发效率,也为用户带来了更优质的交互体验。结合金蝶的其他产品,可以构建出功能...

    operamasks-ui-2.1-demo

    总之,“operamasks-ui-2.1-demo”提供了一个实践OperaMasks UI框架的平台,对于想要提升浏览器扩展开发技能的开发者和设计师来说,这是一个宝贵的资源。通过阅读readme.txt和运行war文件,我们可以深入学习这个框架...

    operamasks-ui-master.zip

    【标题】"operamasks-ui-master.zip" 是一个包含了 OperaMasks UI 2.0 框架的源代码压缩包。这个框架是基于前端开发的,尤其适用于构建企业级的 Web 应用程序,其设计目标是提高开发效率,提供良好的用户体验。...

    operamasks-ui-2.1.zip

    "Operamasks UI 2.1" 是一个轻量级且高效的前端框架,主要用于构建用户界面。这个框架可能特别注重易用性和性能,使得开发者能够快速地开发出响应式和美观的网页应用。"OMUI"是其简称,可能是"Opera Masks User ...

    operamasks-ui-2.0-demo--.zip

    1. **API文档**:可能包含关于如何与Opera Masks UI 2.0进行交互的详细说明,包括创建、修改和管理UI元素的方法。 2. **示例代码**:通过实例代码,开发者可以学习如何在实际项目中应用这些API,理解如何触发特定的...

    OperaMasks-UI-Guide帮助文档

    OperaMasks-UI-Guide帮助文档

    Operamasks-UI

    OM-UI简介 OM-UI是一个基于jQuery的前端组件库。它提供了丰富的组件,包括各种表单组件、布局组件、功能性组件等。它旨在帮助用户快速构建企业应用。它是简单易用的,并配有丰富的文档、示例和详实的开发手册。最...

    operamasks-ui-2.0-doc

    "Operamasks UI 2.0 Doc"是一个针对 Operamasks 用户界面的开发文档,它提供了详尽的指导和信息,帮助开发者理解和构建基于Operamasks的Web应用程序。这个离线版文档对于开发者来说尤其珍贵,因为在线寻找这类资源...

    OperaMasks-UI-Guide.rar

    指南会涵盖如何访问设置界面,以及如何修改各种选项,如更改默认搜索引擎、开启或关闭通知等。 6. **故障排查**:对于常见问题和错误,指南通常会提供解决方案。这包括无法加载扩展、设置不生效、与网站兼容性问题...

Global site tag (gtag.js) - Google Analytics