多标签页完成

This commit is contained in:
caoqianming 2021-05-19 22:52:03 +08:00
parent 96d60bf2d4
commit c9c7ce6067
3 changed files with 86 additions and 54 deletions

View File

@ -321,13 +321,28 @@ function isIntNum(val) {
// }
// }
function changehref(o) {
_clickTab = $(o).attr('url');// 找到链接a中的targer的值
_title = $(o).attr('title');
_value = $(o).attr('value');
$("#main").attr('value', _value);
$("#main").panel({ href: _clickTab, title: $(o).attr('title') });
if ($('#tt').tabs('tabs').length > 10) {
alert('标签页过多,请先关闭')
return
}
if ($('#tt').tabs('exists', _title)) {
$('#tt').tabs('select', _title);
//var tab2 = $('#tt').tabs('getSelected');
//tab2.panel('refresh');
} else {
$('#tt').tabs('add', {
title: _title,
href: _clickTab,
closable: true,
});
}
// $.ajax({
// type: "get",
// url: _clickTab,

View File

@ -114,7 +114,7 @@
headimgurl="{{headimgurl}}" menus="{{menus}}" style="display:none;" />
<button style="margin: 15px;background-color: transparent;border: 0;color: white;cursor: pointer;"
onclick="javascript:$('#main').panel({href:'mainhtml',title:'主页'})"><span
onclick="javascript:$('#tt').tabs('select',0)"><span
style="font-size:24px">{{companyname}}</span><br /><span
style="font-size:20px">安全生产管理系统</span></button>
</div>
@ -178,16 +178,11 @@
<input type="hidden" id="in" show="" total="" target="" show2="" />
<!-- <button type="hidden" id="getb" onclick="test()" /> -->
<div id="rcmenu" class="easyui-menu">
<div id="closecur">
关闭
</div>
<div id="closeall">
关闭全部
</div>
<div id="closeother">
关闭其他
</div>
<!-- tab页的右键菜单 -->
<div id="home-tabs-menu" class="easyui-menu">
<div data-options="name:1">关闭</div>
<div data-options="name:2">关闭其他</div>
<div data-options="name:3">关闭所有</div>
</div>
<script>
$(document).ready(function () {
@ -198,7 +193,8 @@
var allTabs = $('#tt').tabs('tabs');
var selectTab = $('#tt').tabs('getSelected');
for (var i = 0; i < allTabs.length; i++) {
if (allTabs[i].panel('options').title != selectTab.panel('options').title) {
if(allTabs[i]){
if (allTabs[i].panel('options').title != selectTab.panel('options').title) {
$('#tt').tabs('update', {
tab: allTabs[i],
options: {
@ -206,46 +202,31 @@
}
});
}
}
}
selectTab.panel('refresh')
//selectTab.panel('refresh')
// console.log(allTabs[0].panel('options').content)
},
onContextMenu: function(e, title, index){
       //该方法通知浏览器不要执行与此事件关联的默认动作
       //即屏蔽了浏览器在tab页上的鼠标右键事件
e.preventDefault();
var mm = $("#home-tabs-menu");
//显示右键菜单
mm.menu("show",{
top: e.pageY,
left: e.pageX
}).data("tabTitle",title);
//为右键菜单选项绑定事件
mm.menu({
onClick: function(item){
closeTab(this, item.name);
}
});
$(".tabs-header").bind('contextmenu',function(e){
e.preventDefault();
$('#rcmenu').menu('show', {
left: e.pageX,
top: e.pageY
});
});
//关闭当前标签页
$("#closecur").bind("click",function(){
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
if(index!=0){
$('#tab').tabs('close',index);
}
});
//关闭所有标签页
$("#closeall").bind("click",function(){
var tablist = $('#tt').tabs('tabs');
for(var i=tablist.length-1;i>0;i--){
$('#tt').tabs('close',i);
}
});
//关闭非当前标签页(先关闭右侧,再关闭左侧)
$("#closeother").bind("click",function(){
var tablist = $('#tt').tabs('tabs');
var tab = $('#tt').tabs('getSelected');
var index = $('#tt').tabs('getTabIndex',tab);
for(var i=tablist.length-1;i>index;i--){
$('#tt').tabs('close',i);
}
var num = index-1;
for(var i=num;i>0;i--){
$('#tt').tabs('close',i);
}
});
});
});
$.messager.show({
@ -359,9 +340,9 @@
}
if ($('#tt').tabs('exists', title)) {
$('#tt').tabs('select', title);
var tab2 = $('#tt').tabs('getSelected');
var url = $(tab2.panel('options')).attr('href');
tab2.panel('refresh', url);
//var tab2 = $('#tt').tabs('getSelected');
// var url = $(tab2.panel('options')).attr('href');
//tab2.panel('refresh');
} else {
$('#tt').tabs('add', {
title: title,
@ -382,6 +363,42 @@
$.get('api/rights?a=have', function (res) {
localStorage.setItem('data', JSON.stringify(res));
})
function closeTab(menu, type){
var allTabs = $("#tt").tabs("tabs");
var allTabTitle = [];
$.each(allTabs, function(i, n){
var opt = $(n).panel("options");
if(opt.closable){
allTabTitle.push(opt.title);
}
});
var curTabTitle = $(menu).data("tabTitle");
switch(type){
case 1:
//关闭当前
$("#tt").tabs("close", curTabTitle);
return false;
break;
case 2:
//关闭其他
for(var i = 0; i < allTabTitle.length; i++){
if(curTabTitle != allTabTitle[i] && curTabTitle != '主页'){
$("#tt").tabs("close",allTabTitle[i]);
}
}
$("#tt").tabs("select",curTabTitle);
break;
case 3:
//关闭所有
for(var i = 0; i < allTabTitle.length; i++){
if(curTabTitle != '主页'){
$("#tt").tabs("close",allTabTitle[i]);
}
}
break;
}
}
</script>
</body>

View File

@ -97,7 +97,7 @@ float: left;">
font-weight: 300;
font-size: 11px;
color: #fff;
opacity: 0.7;height: 20px;cursor: pointer;" title="线培训" onclick="changehref(this)">
opacity: 0.7;height: 20px;cursor: pointer;" title="线培训" onclick="changehref(this)">
点击查看全部
<i style="background-position: -27px -10px;width: 14px;
height: 14px; vertical-align: top;background-repeat: no-repeat;margin-top: 4px;