easyui tabs切换之前提醒保存修改的信息

当存在多个tabs,相互切换时提醒保存修改的信息：

这里用的鼠标mousedown事件

var tabs = $('#tabsId').tabs().tabs('tabs');for(var item=0; item<tabs.length; item++){tabs[item].panel('options').tab.unbind().bind('mousedown',{index:item},function(obj){$.messager.confirm('确认保存修改信息', '是否已经保存修改的信息?', function (row) {if (row) {$('#tabsId'').tabs('select', obj.data.index);}});});}

例子：一个tab标签页面内有定时器，需要不在当前页时暂定并保存，回到当前页面时，继续

关闭标签或页面，需要保存的情况：
关闭tab相关的情况:

1. 右键关闭所有标签
2. tab标签上的关闭按钮
3. tab刷新按钮
4. tab之前切换

页面或浏览器相关的情况：

5. 页面大刷新（浏览器上的刷新按钮，或按F5）
6. 页面切换（浏览器上的标签切换）
7. 页面关闭（当前网站关闭）
8. 浏览器关闭
9. 浏览器最小化

$(function(){// tabs默认显示主页$('#tabBox').tabs('add',{title: "主页",content: '<iframe src="" width="100%" height="100%" align="center" frameborder="0" border="0"></iframe>',closable: false});$('#tabBox').tabs('select',0);// tab切换保存taskTime()
})
function taskTime(){// 页面或浏览器相关的情况 都会执行// document.visibilityState == 'hidden',visible// 页面切换$(document).on('visibilitychange', function(e){if($('#tabBox') && $('#tabBox').length > 0) {let tabs = $('#tabBox').tabs('tabs');if (tabs.length > 0) {if (document.visibilityState == 'hidden') {// console.log('页面tab切换，保存并暂停')$.each(tabs, function (i, n) {let title = $(n).panel('options').title;pauseSave(title);})}if (document.visibilityState == 'visible') {$.each(tabs, function (i, n) {let title = $(n).panel('options').title;if(TITLESAVE == title){ // tab切换时会走判断//继续getContinue(title);}})}}}});$('#tabBox').tabs({onBeforeClose: function(title){// 情况2：tab标签上的关闭按钮// 关闭之前保存closeSave(title);return true;},onUpdate: function(title){// 情况3：tab刷新按钮// 刷新之前保存closeSave(title);return true;},onSelect(title){// 情况4： tab之前切换// tab切换调用onSelect,获取到当前选中的title,继续计时TITLESAVE = titlegetContinue(title)},onUnselect(title){// 不选中时，停止计时pauseSave(title);}})// 情况1：关闭所有，循环保存// 关闭所有$("#closeAll").hide();$("#tabBox").tabs({onContextMenu:function(e,title){e.preventDefault();$("#closeAll").menu('show', {left: e.pageX+10,top: e.pageY+5});}});$("#closeAll").menu({onClick:function(item){if(item.text=='关闭所有'){// 循环保存closeTabsAll();}else if(item.text=="刷新当前标签页"){}}});}
function closeTabsAll(){var allTabBoxs = $('#tabBox').tabs('tabs');// 循环出所有的tab标签$.each(allTabBoxs,function(i,n){let title = $(n).panel('options').title;closeSave(title)})var count=$('#tabBox').tabs('tabs').length;for(var index=count;index>1;index--){$('#tabBox').tabs('close', index);}
}
// 继续
function getContinue(title){if (document.getElementById(title)) {const iframeWindow = document.getElementById(title).contentWindow;if (iframeWindow.timerShow) {let timerShow = iframeWindow.timerShow();if (timerShow == 'true') {// 调用子tab中的bts继续计时方法iframeWindow.bts(0);}}}
}
// 暂停保存
function pauseSave(title){if (document.getElementById(title)) {const iframeWindow = document.getElementById(title).contentWindow;if (iframeWindow.timerShow) {let timerShow = iframeWindow.timerShow();if (timerShow == 'true') {// 调用子tab中的bts暂停计时方法，调用tab子页面的保存方法iframeWindow.bts(1);iframeWindow.saveTime();}}}
}
// 关闭保存
function closeSave(title){if(document.getElementById(title)) {const iframeWindow = document.getElementById(title).contentWindow;// iframeWindow.timerShow 判断计时组件存在时，调用保存方法，// timerShow在tab子页面中，保存方法saveTime也在tab子页面中if (iframeWindow.timerShow) {let timerShow = iframeWindow.timerShow();if (timerShow == 'true') {iframeWindow.saveTime();}}}
}