395 lines
15 KiB
JavaScript
395 lines
15 KiB
JavaScript
/**
|
||
* 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 = '<a lay-href="" href="javascript:;" class="layuimini-back-home">' + options.homeInfo.title + '</a><span lay-separator="">/</span>\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 += '<a><cite>' + pageTitleArray[key] + '</cite></a><span lay-separator="">/</span>\n';
|
||
} else {
|
||
pageTitleHtml += '<a><cite>' + pageTitleArray[key] + '</cite></a>\n';
|
||
}
|
||
}
|
||
} else {
|
||
var title = sessionStorage.getItem('layuimini_page_title');
|
||
if (title === null || title === undefined || title === '') {
|
||
$('.layuimini-page-header').addClass('layui-hide');
|
||
} else {
|
||
pageTitleHtml += '<a><cite>' + title + '</cite></a>\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);
|
||
});
|