easyui tabs切换-Toy模板网

这篇具有很好参考价值的文章主要介绍了easyui tabs切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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相关的情况:

右键关闭所有标签
tab标签上的关闭按钮
tab刷新按钮
tab之前切换

页面或浏览器相关的情况：文章来源地址https://www.toymoban.com/news/detail-604554.html

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

$(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 = title
			getContinue(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();
			}
		}
	}
}