layuimini tab切换刷新解决方案

需求：

我们在MVC 开发时用到了LayUImini，原因是上手简单。但是比如在做了一个订单需要审核，但切换到已打开的审核页需要刷新才能显示，这样很不方便，于是我就想能不能在切换到的焦点页能自动刷新。

在minTab.js 的374行插入：$(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();

以下是完整的JS代码

/*** date:2020/02/27* author:Mr.Chung* version:2.0* description:layuimini tab框架扩展*/
layui.define(["element", "layer", "jquery"], function (exports) {var element = layui.element,layer = layui.layer,$ = layui.$;var miniTab = {/*** 初始化tab* @param options*/render: function (options) {options.filter = options.filter || null;options.multiModule = options.multiModule || false;options.urlHashLocation = options.urlHashLocation || false;options.maxTabNum = options.maxTabNum || 20;options.menuList = options.menuList || [];  // todo 后期菜单想改为不操作dom, 而是直接操作初始化传过来的数据options.homeInfo = options.homeInfo || {};options.listenSwichCallback = options.listenSwichCallback || function () {};miniTab.listen(options);miniTab.listenRoll();miniTab.listenSwitch(options);miniTab.listenHash(options);},/*** 新建tab窗口* @param options.tabId* @param options.href* @param options.title* @param options.isIframe* @param options.maxTabNum*/create: function (options) {options.tabId = options.tabId || null;options.href = options.href || null;options.title = options.title || null;options.isIframe = options.isIframe || false;options.maxTabNum = options.maxTabNum || 20;if ($(".layuimini-tab .layui-tab-title li").length >= options.maxTabNum) {layer.msg('Tab窗口已达到限定数量，请先关闭部分Tab');return false;}var ele = element;if (options.isIframe) ele = parent.layui.element;ele.tabAdd('layuiminiTab', {title: '<span class="layuimini-tab-active"></span><span>' + options.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>' //用于演示, content: '<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0"   src="' + options.href + '"></iframe>', id: options.tabId});$('.layuimini-menu-left').attr('layuimini-tab-tag', 'add');sessionStorage.setItem('layuiminimenu_' + options.tabId, options.title);},/*** 切换选项卡* @param tabId*/change: function (tabId) {element.tabChange('layuiminiTab', tabId);},/*** 删除tab窗口* @param tabId* @param isParent*/delete: function (tabId, isParent) {// todo 未知BUG，不知道是不是layui问题，必须先删除元素$(".layuimini-tab .layui-tab-title .layui-unselect.layui-tab-bar").remove();if (isParent === true) {parent.layui.element.tabDelete('layuiminiTab', tabId);} else {element.tabDelete('layuiminiTab', tabId);}},/*** 在iframe层打开新tab方法*/openNewTabByIframe: function (options) {options.href = options.href || null;options.title = options.title || null;var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});if (options.href === null || options.href === undefined) options.href = new Date().getTime();var checkTab = miniTab.check(options.href, true);if (!checkTab) {miniTab.create({tabId: options.href,href: options.href,title: options.title,isIframe: true,});}parent.layui.element.tabChange('layuiminiTab', options.href);parent.layer.close(loading);},/*** 在iframe层关闭当前tab方法*/deleteCurrentByIframe: function () {var ele = $(".layuimini-tab .layui-tab-title li.layui-this", parent.document);if (ele.length > 0) {var layId = $(ele[0]).attr('lay-id');miniTab.delete(layId, true);}},/*** 判断tab窗口*/check: function (tabId, isIframe) {// 判断选项卡上是否有var checkTab = false;if (isIframe === undefined || isIframe === false) {$(".layui-tab-title li").each(function () {var checkTabId = $(this).attr('lay-id');if (checkTabId != null && checkTabId === tabId) {checkTab = true;}});} else {parent.layui.$(".layui-tab-title li").each(function () {var checkTabId = $(this).attr('lay-id');if (checkTabId != null && checkTabId === tabId) {checkTab = true;}});}return checkTab;},/*** 开启tab右键菜单* @param tabId* @param left*/openTabRignMenu: function (tabId, left) {miniTab.closeTabRignMenu();var menuHtml = '<div class="layui-unselect layui-form-select layui-form-selected layuimini-tab-mousedown layui-show" data-tab-id="' + tabId + '" style="left: ' + left + 'px!important">\n' +'<dl>\n' +'<dd><a href="javascript:;" layuimini-tab-menu-close="current">关 闭 当 前</a></dd>\n' +'<dd><a href="javascript:;" layuimini-tab-menu-close="other">关 闭 其 他</a></dd>\n' +'<dd><a href="javascript:;" layuimini-tab-menu-close="all">关 闭 全 部</a></dd>\n' +'</dl>\n' +'</div>';var makeHtml = '<div class="layuimini-tab-make"></div>';$('.layuimini-tab .layui-tab-title').after(menuHtml);$('.layuimini-tab .layui-tab-content').after(makeHtml);},/*** 关闭tab右键菜单*/closeTabRignMenu: function () {$('.layuimini-tab-mousedown').remove();$('.layuimini-tab-make').remove();},/*** 查询菜单信息* @param href* @param menuList*/searchMenu: function (href, menuList) {var menu;for (key in menuList) {var item = menuList[key];if (item.href === href) {menu = item;break;}if (item.child) {newMenu = miniTab.searchMenu(href, item.child);if (newMenu) {menu = newMenu;break;}}}return menu;},/*** 监听* @param options*/listen: function (options) {options = options || {};options.maxTabNum = options.maxTabNum || 20;/*** 打开新窗口*/$('body').on('click', '[layuimini-href]', function () {var loading = layer.load(0, {shade: false, time: 2 * 1000});var tabId = $(this).attr('layuimini-href'),href = $(this).attr('layuimini-href'),title = $(this).text(),target = $(this).attr('target');var el = $("[layuimini-href='" + href + "']", ".layuimini-menu-left");layer.close(window.openTips);if (el.length) {$(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this");$(el).parent().addClass("layui-this");}if (target === '_blank') {layer.close(loading);window.open(href, "_blank");return false;}if (tabId === null || tabId === undefined) tabId = new Date().getTime();var checkTab = miniTab.check(tabId);if (!checkTab) {miniTab.create({tabId: tabId,href: href,title: title,isIframe: false,maxTabNum: options.maxTabNum,});}element.tabChange('layuiminiTab', tabId);layer.close(loading);});/*** 在iframe子菜单上打开新窗口*/$('body').on('click', '[layuimini-content-href]', function () {var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});var tabId = $(this).attr('layuimini-content-href'),href = $(this).attr('layuimini-content-href'),title = $(this).attr('data-title'),target = $(this).attr('target');if (target === '_blank') {parent.layer.close(loading);window.open(href, "_blank");return false;}if (tabId === null || tabId === undefined) tabId = new Date().getTime();var checkTab = miniTab.check(tabId, true);if (!checkTab) {miniTab.create({tabId: tabId,href: href,title: title,isIframe: true,maxTabNum: options.maxTabNum,});}parent.layui.element.tabChange('layuiminiTab', tabId);parent.layer.close(loading);});/*** 关闭选项卡**/$('body').on('click', '.layuimini-tab .layui-tab-title .layui-tab-close', function () {var loading = layer.load(0, {shade: false, time: 2 * 1000});var $parent = $(this).parent();var tabId = $parent.attr('lay-id');if (tabId !== undefined || tabId !== null) {miniTab.delete(tabId);}layer.close(loading);});/*** 选项卡操作*/$('body').on('click', '[layuimini-tab-close]', function () {var loading = layer.load(0, {shade: false, time: 2 * 1000});var closeType = $(this).attr('layuimini-tab-close');$(".layuimini-tab .layui-tab-title li").each(function () {var tabId = $(this).attr('lay-id');var id = $(this).attr('id');var isCurrent = $(this).hasClass('layui-this');if (id !== 'layuiminiHomeTabId') {if (closeType === 'all') {miniTab.delete(tabId);} else {if (closeType === 'current' && isCurrent) {miniTab.delete(tabId);} else if (closeType === 'other' && !isCurrent) {miniTab.delete(tabId);}}}});layer.close(loading);});/*** 禁用网页右键*/$(".layuimini-tab .layui-tab-title").unbind("mousedown").bind("contextmenu", function (e) {e.preventDefault();return false;});/*** 注册鼠标右键*/$('body').on('mousedown', '.layuimini-tab .layui-tab-title li', function (e) {var left = $(this).offset().left - $('.layuimini-tab ').offset().left + ($(this).width() / 2),tabId = $(this).attr('lay-id');if (e.which === 3) {miniTab.openTabRignMenu(tabId, left);}});/*** 关闭tab右键菜单*/$('body').on('click', '.layui-body,.layui-header,.layuimini-menu-left,.layuimini-tab-make', function () {miniTab.closeTabRignMenu();});/*** tab右键选项卡操作*/$('body').on('click', '[layuimini-tab-menu-close]', function () {var loading = layer.load(0, {shade: false, time: 2 * 1000});var closeType = $(this).attr('layuimini-tab-menu-close'),currentTabId = $('.layuimini-tab-mousedown').attr('data-tab-id');$(".layuimini-tab .layui-tab-title li").each(function () {var tabId = $(this).attr('lay-id');var id = $(this).attr('id');if (id !== 'layuiminiHomeTabId') {if (closeType === 'all') {miniTab.delete(tabId);} else {if (closeType === 'current' && currentTabId === tabId) {miniTab.delete(tabId);} else if (closeType === 'other' && currentTabId !== tabId) {miniTab.delete(tabId);}}}});miniTab.closeTabRignMenu();layer.close(loading);});},/*** 监听tab切换* @param options*/listenSwitch: function (options) {options.filter = options.filter || null;options.multiModule = options.multiModule || false;options.urlHashLocation = options.urlHashLocation || false;options.listenSwichCallback = options.listenSwichCallback || function () {};element.on('tab(' + options.filter + ')', function (data) {var tabId = $(this).attr('lay-id');$(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();if (options.urlHashLocation) {location.hash = '/' + tabId;}if (typeof options.listenSwichCallback === 'function') {options.listenSwichCallback();}// 判断是否为新增窗口if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') {$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no')} else {$("[layuimini-href]").parent().removeClass('layui-this');if (options.multiModule) {miniTab.listenSwitchMultiModule(tabId);} else {miniTab.listenSwitchSingleModule(tabId);}}miniTab.rollPosition();});},/*** 监听hash变化* @param options* @returns {boolean}*/listenHash: function (options) {options.urlHashLocation = options.urlHashLocation || false;options.maxTabNum = options.maxTabNum || 20;options.homeInfo = options.homeInfo || {};options.menuList = options.menuList || [];if (!options.urlHashLocation) return false;var tabId = location.hash.replace(/^#\//, '');if (tabId === null || tabId === undefined || tabId ==='') return false;// 判断是否为首页if(tabId ===options.homeInfo.href) return false;// 判断是否为右侧菜单var menu = miniTab.searchMenu(tabId, options.menuList);if (menu !== undefined) {miniTab.create({tabId: tabId,href: tabId,title: menu.title,isIframe: false,maxTabNum: options.maxTabNum,});$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');element.tabChange('layuiminiTab', tabId);return false;}// 判断是否为快捷菜单var isSearchMenu = false;$("[layuimini-content-href]").each(function () {if ($(this).attr("layuimini-content-href") === tabId) {var title = $(this).attr("data-title");miniTab.create({tabId: tabId,href: tabId,title: title,isIframe: false,maxTabNum: options.maxTabNum,});$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');element.tabChange('layuiminiTab', tabId);isSearchMenu = true;return false;}});if (isSearchMenu) return false;// 既不是右侧菜单、快捷菜单,就直接打开var title = sessionStorage.getItem('layuiminimenu_' + tabId) === null ? tabId : sessionStorage.getItem('layuiminimenu_' + tabId);miniTab.create({tabId: tabId,href: tabId,title: title,isIframe: false,maxTabNum: options.maxTabNum,});element.tabChange('layuiminiTab', tabId);return false;},/*** 监听滚动*/listenRoll: function () {$(".layuimini-tab-roll-left").click(function () {miniTab.rollClick("left");});$(".layuimini-tab-roll-right").click(function () {miniTab.rollClick("right");});},/*** 单模块切换* @param tabId*/listenSwitchSingleModule: function (tabId) {$("[layuimini-href]").each(function () {if ($(this).attr("layuimini-href") === tabId) {// 自动展开菜单栏var addMenuClass = function ($element, type) {if (type === 1) {$element.addClass('layui-this');if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {$(".layuimini-header-menu li").attr('class', 'layui-nav-item');} else {addMenuClass($element.parent().parent(), 2);}} else {$element.addClass('layui-nav-itemed');if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {$(".layuimini-header-menu li").attr('class', 'layui-nav-item');} else {addMenuClass($element.parent().parent(), 2);}}};addMenuClass($(this).parent(), 1);return false;}});},/*** 多模块切换* @param tabId*/listenSwitchMultiModule: function (tabId) {$("[layuimini-href]").each(function () {if ($(this).attr("layuimini-href") === tabId) {// 自动展开菜单栏var addMenuClass = function ($element, type) {if (type === 1) {$element.addClass('layui-this');if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {var moduleId = $element.parent().attr('id');$(".layuimini-header-menu li").attr('class', 'layui-nav-item');$("#" + moduleId + "HeaderId").addClass("layui-this");$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');} else {addMenuClass($element.parent().parent(), 2);}} else {$element.addClass('layui-nav-itemed');if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {var moduleId = $element.parent().attr('id');$(".layuimini-header-menu li").attr('class', 'layui-nav-item');$("#" + moduleId + "HeaderId").addClass("layui-this");$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');} else {addMenuClass($element.parent().parent(), 2);}}};addMenuClass($(this).parent(), 1);return false;}});},/*** 自动定位*/rollPosition: function () {var $tabTitle = $('.layuimini-tab  .layui-tab-title');var autoLeft = 0;$tabTitle.children("li").each(function () {if ($(this).hasClass('layui-this')) {return false;} else {autoLeft += $(this).outerWidth();}});$tabTitle.animate({scrollLeft: autoLeft - $tabTitle.width() / 3}, 200);},/*** 点击滚动* @param direction*/rollClick: function (direction) {var $tabTitle = $('.layuimini-tab  .layui-tab-title');var left = $tabTitle.scrollLeft();if ('left' === direction) {$tabTitle.animate({scrollLeft: left - 450}, 200);} else {$tabTitle.animate({scrollLeft: left + 450}, 200);}}};exports("miniTab", miniTab);
});

layuimini tab切换刷新解决方案相关推荐

layuimini tab切换刷新
1.前端 <div class="easyui-layout" data-options="fit:true,border:false"><d ...
不刷新页面的tab_SwiftUI小技巧之如何解决Tab切换后页面重置和List刷新bug
SwiftUI的tabview非常好用,简单几行就能构建一套基于Tab的App.但是SwiftUI目前tabview存在一个小bug,当tab切换时内部中的list或NavigationLink将会重 ...
自定义Tab切换+自定义CheckBox+light7无限滑动/下拉刷新
这是一篇记录型的技术杂文,记录了这段时间做的一些小模块样式,正文之前先记录一下html上下标的写法,转载自 https://blog.csdn.net/bingle14/article/details ...
Alt+Tab切换应用程序窗口卡顿解决方案
转自百度贴吧的热心网友自从前一阵子笔者的win10系统更新后出现了一系列小毛病,其中有一个是通过Alt+Tab切换应用窗口出现明显的卡顿,笔者是该功能的重度使用者,因此这些日子真是"苦不堪 ...
tab选项卡转换html,前端开发tab选项卡切换各种解决方案
前端开发软件ide| tab切换,做前端的各位大神再熟悉不过,因为运用的场合太多,所以大家可能都不屑于去关心了.不晓得大家遇到这种时是自己马上梳理逻辑写一次呢,还是用已有的模板或自己的库,今天我对自己 ...
解决swiper在tab切换时，swiper不生效，以及display:none后，无法自动滑动的问题
解决swiper在tab切换时,swiper不生效,以及display:none后,无法自动滑动的问题问题是这样的:当你兴高采烈的写完一个tab,并且把swiper嵌入到每一个tab item 觉得 ...
tab vue 竖排_vue 实现tab切换保持数据状态
页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持tab里面的内容不会刷新,减少页面重新渲染以及减少请求实现方法:使用包裹组件列表页面跳转详情 ,列表页面保 ...
vue中怎么清空tab选项卡的缓存_vuejs 内置组件component实现tab切换懒加载和表单输入框内容的清空...
最近项目中使用了vue2.0 官网脚手架进行了开发.开发中的踩一些坑一直没有来得及整理.本篇文章就vuejs内置组件component的一些使用进行一些总结. 1.使用component 实现tab切 ...
Kotlin项目实战之手机影音---主界面tab切换、home界面适配、获得首页网络数据
主界面tab切换: 添加点击事件: 接下来需要处理一下主界面TAB的切换了,这里先添加BottomBar的监听事件: class MainActivity : BaseActivity(), Tool ...
微信小程序 tab切换
设置背景颜色就直接在page里设置 page {background-color: rgb(242, 242, 242);} tab切换: navigator 页面链接传参的格式为url=&q ...

layuimini tab切换刷新解决方案

layuimini tab切换刷新解决方案相关推荐

最新文章

热门文章