在使用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 api 文档 , 希望对你们有帮助
operamasks-ui-2.0 这个帮助文档很难才找到的,感谢CSDN,其中的说明真的是很详细了,维护旧代码用到的这个框架,相比easyui和bootstrap这个框架简单一些,不过用起来还是不错的,除了文档太少,不过有这个就基本...
开发者可能需要确保这个UI框架在其他主流浏览器(如Chrome、Firefox、Safari和Edge)上也能正常工作。 9. **响应式设计**: 作为用户界面的升级版本,"UI 2.0"很可能考虑了不同设备和屏幕尺寸的适配,采用了响应式...
operamasks-ui的demo程序,能够直接部署,运行。查看om-ui上优秀的标签。
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" 是一个专为Opera浏览器设计的用户界面增强插件的源代码包,其版本为1.2,存储在一个名为"operamasks-ui-1.2.zip"的压缩文件中。这个插件的目标是提供更加个性化、高效且易用的浏览体验。在了解这个...
springMVC框架开发 博文链接:https://lyg8266.iteye.com/blog/1404821
总的来说,OperaMasks UI 2.0是一个强大且全面的前端UI框架,无论你是前端新手还是经验丰富的开发者,都能从中受益。它不仅提高了开发效率,也为用户带来了更优质的交互体验。结合金蝶的其他产品,可以构建出功能...
总之,“operamasks-ui-2.1-demo”提供了一个实践OperaMasks UI框架的平台,对于想要提升浏览器扩展开发技能的开发者和设计师来说,这是一个宝贵的资源。通过阅读readme.txt和运行war文件,我们可以深入学习这个框架...
【标题】"operamasks-ui-master.zip" 是一个包含了 OperaMasks UI 2.0 框架的源代码压缩包。这个框架是基于前端开发的,尤其适用于构建企业级的 Web 应用程序,其设计目标是提高开发效率,提供良好的用户体验。...
"Operamasks UI 2.1" 是一个轻量级且高效的前端框架,主要用于构建用户界面。这个框架可能特别注重易用性和性能,使得开发者能够快速地开发出响应式和美观的网页应用。"OMUI"是其简称,可能是"Opera Masks User ...
1. **API文档**:可能包含关于如何与Opera Masks UI 2.0进行交互的详细说明,包括创建、修改和管理UI元素的方法。 2. **示例代码**:通过实例代码,开发者可以学习如何在实际项目中应用这些API,理解如何触发特定的...
OperaMasks-UI-Guide帮助文档
OM-UI简介 OM-UI是一个基于jQuery的前端组件库。它提供了丰富的组件,包括各种表单组件、布局组件、功能性组件等。它旨在帮助用户快速构建企业应用。它是简单易用的,并配有丰富的文档、示例和详实的开发手册。最...
"Operamasks UI 2.0 Doc"是一个针对 Operamasks 用户界面的开发文档,它提供了详尽的指导和信息,帮助开发者理解和构建基于Operamasks的Web应用程序。这个离线版文档对于开发者来说尤其珍贵,因为在线寻找这类资源...
指南会涵盖如何访问设置界面,以及如何修改各种选项,如更改默认搜索引擎、开启或关闭通知等。 6. **故障排查**:对于常见问题和错误,指南通常会提供解决方案。这包括无法加载扩展、设置不生效、与网站兼容性问题...