/** * date:2020/02/27 * author:Mr.Chung * version:2.0 * description:layuimini 单页框架扩展 */ layui.define(["element", "jquery"], function (exports) { var element = layui.element, $ = layui.$, // miniAdmin = layui.miniAdmin, layer = layui.layer; var miniPage = { /** * 初始化tab * @param options */ render: function (options) { options.homeInfo = options.homeInfo || {}; options.menuList = options.menuList || []; options.multiModule = options.multiModule || false; options.renderPageVersion = options.renderPageVersion || false; options.listenSwichCallback = options.listenSwichCallback || function () { }; var href = location.hash.replace(/^#\//, ''); if (href === null || href === undefined || href === '') { miniPage.renderHome(options); } else { miniPage.renderPage(href, options); if (options.multiModule) { miniPage.listenSwitchMultiModule(href); } else { miniPage.listenSwitchSingleModule(href); } } miniPage.listen(options); miniPage.listenHash(options); }, /** * 初始化主页 * @param options */ renderHome: function (options) { options.homeInfo = options.homeInfo || {}; options.homeInfo.href = options.homeInfo.href || ''; options.renderPageVersion = options.renderPageVersion || false; $('.layuimini-page-header').addClass('layui-hide'); miniPage.renderPageContent(options.homeInfo.href, options); }, /** * 初始化页面 * @param href * @param options */ renderPage: function (href, options) { miniPage.renderPageTitle(href, options); miniPage.renderPageContent(href, options); }, /** * 初始化页面标题 * @param href * @param options */ renderPageTitle: function (href, options) { options.homeInfo = options.homeInfo || {}; options.homeInfo.title = options.homeInfo.title || '主页'; options.menuList = options.menuList || []; $('.layuimini-page-header').removeClass('layui-hide'); var pageTitleHtml = '' + options.homeInfo.title + '/\n'; var pageTitleArray = miniPage.buildPageTitleArray(href, options.menuList); if (pageTitleArray.length > 0) { for (var key in pageTitleArray) { key = parseInt(key); if (key !== pageTitleArray.length - 1) { pageTitleHtml += '' + pageTitleArray[key] + '/\n'; } else { pageTitleHtml += '' + pageTitleArray[key] + '\n'; } } } else { var title = sessionStorage.getItem('layuimini_page_title'); if (title === null || title === undefined || title === '') { $('.layuimini-page-header').addClass('layui-hide'); } else { pageTitleHtml += '' + title + '\n'; } } $('.layuimini-page-header .layuimini-page-title').empty().html(pageTitleHtml); }, /** * 初始化页面内容 * @param options * @param href */ renderPageContent: function (href, options) { options.renderPageVersion = options.renderPageVersion || false; var container = '.layuimini-content-page'; if (options.renderPageVersion) { var v = new Date().getTime(); href = href.indexOf("?") > -1 ? href + '&v=' + v : href + '?v=' + v; } if ($(".layuimini-page-header").hasClass("layui-hide")) { $(container).removeAttr("style"); } else { $(container).attr("style", "height: calc(100% - 36px)"); } $(container).html(''); $.ajax({ url: href, type: 'get', dataType: 'html', success: function (data) { $(container).html(data); element.init(); }, error: function (xhr, textstatus, thrown) { return layer.msg('Status:' + xhr.status + ',' + xhr.statusText + ',请稍后再试!'); } }); }, /** * 刷新页面内容 * @param options */ refresh: function (options) { var href = location.hash.replace(/^#\//, ''); if (href === null || href === undefined || href === '') { miniPage.renderHome(options); } else { miniPage.renderPageContent(href, options); } }, /** * 构建页面标题数组 * @param href * @param menuList */ buildPageTitleArray: function (href, menuList) { var array = [], newArray = []; for (key in menuList) { var item = menuList[key]; if (item.href === href) { array.push(item.title); break; } if (item.child) { newArray = miniPage.buildPageTitleArray(href, item.child); if (newArray.length > 0) { newArray.unshift(item.title); array = array.concat(newArray); break; } } } return array; }, /** * 获取指定链接内容 * @param href * @returns {string} */ getHrefContent: function (href) { var content = ''; var v = new Date().getTime(); $.ajax({ url: href.indexOf("?") > -1 ? href + '&v=' + v : href + '?v=' + v, type: 'get', dataType: 'html', async: false, success: function (data) { content = data; }, error: function (xhr, textstatus, thrown) { return layer.msg('Status:' + xhr.status + ',' + xhr.statusText + ',请稍后再试!'); } }); return content; }, /** * 获取弹出层的宽高 * @returns {jQuery[]} */ getOpenWidthHeight: function () { var clienWidth = $(".layuimini-content-page").width(); var clientHeight = $(".layuimini-content-page").height(); var offsetLeft = $(".layuimini-content-page").offset().left; var offsetTop = $(".layuimini-content-page").offset().top; return [clienWidth, clientHeight, offsetTop, offsetLeft]; }, /** * 单模块切换 * @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; } }); }, /** * 修改hash地址定位 * @param href */ hashChange: function (href) { window.location.hash = "/" + href; }, /** * 修改hash地址为主页 */ hashHome: function () { window.location.hash = "/"; }, /** * 监听 * @param options */ listen: function (options) { /** * 打开新窗口 */ $('body').on('click', '[layuimini-href]', function () { var loading = layer.load(0, {shade: false, time: 2 * 1000}); var href = $(this).attr('layuimini-href'), target = $(this).attr('target'); if(!href) return ; var me = this ; 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; } miniPage.hashChange(href); $('.layuimini-menu-left').attr('layuimini-page-add', 'yes'); layer.close(loading); }); /** * 在子页面上打开新窗口 */ $('body').on('click', '[layuimini-content-href]', function () { var loading = parent.layer.load(0, {shade: false, time: 2 * 1000}); var href = $(this).attr('layuimini-content-href'), title = $(this).attr('data-title'), target = $(this).attr('target'); if(!href) return ; var me = this ; 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') { parent.layer.close(loading); window.open(href, "_blank"); return false; } sessionStorage.setItem('layuimini_page_title', title); miniPage.hashChange(href); parent.layer.close(loading); }); /** * 返回主页 */ $('body').on('click', '.layuimini-back-home', function () { miniPage.hashHome(); }); }, /** * 监听hash变化 * @returns {boolean} */ listenHash: function (options) { options.homeInfo = options.homeInfo || {}; options.multiModule = options.multiModule || false; options.listenSwichCallback = options.listenSwichCallback || function () { }; window.onhashchange = function () { var href = location.hash.replace(/^#\//, ''); if (typeof options.listenSwichCallback === 'function') { options.listenSwichCallback(); } if (href === null || href === undefined || href === '') { $("[layuimini-href]").parent().removeClass('layui-this'); miniPage.renderHome(options); } else { miniPage.renderPage(href, options); } if ($('.layuimini-menu-left').attr('layuimini-page-add') === 'yes') { $('.layuimini-menu-left').attr('layuimini-page-add', 'no'); } else { // 从页面中打开的话,浏览器前进后退、需要重新定位菜单焦点 $("[layuimini-href]").parent().removeClass('layui-this'); if (options.multiModule) { miniPage.listenSwitchMultiModule(href); } else { miniPage.listenSwitchSingleModule(href); } } }; }, }; exports("miniPage", miniPage); });