rain/jiapu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

家谱现有接口调试50%

Browse Source
This commit is contained in:
rain
2026-07-09 17:29:25 +08:00
commit 6050508144
262 changed files with 63354 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/lay-module/layuimini/miniAdmin.js
+368
View File
@@ -0,0 +1,368 @@
/**
* date:2020/02/27
* author:Mr.Chung
* version:2.0
* description:layuimini 主体框架扩展
*/
layui.define(["jquery", "miniMenu", "element", "miniTab", "miniTheme"], function (exports) {
var $ = layui.$,
layer = layui.layer,
miniMenu = layui.miniMenu,
miniTheme = layui.miniTheme,
element = layui.element ,
miniTab = layui.miniTab;
if (!/http(s*):\/\//.test(location.href)) {
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示";
return layer.alert(tips);
}
var miniAdmin = {
/**
* 后台框架初始化
* @param options.iniUrl 后台初始化接口地址
* @param options.clearUrl 后台清理缓存接口
* @param options.urlHashLocation URL地址hash定位
* @param options.bgColorDefault 默认皮肤
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
* @param options.loadingTime 初始化加载时间
* @param options.pageAnim iframe窗口动画
* @param options.maxTabNum 最大的tab打开数量
*/
render: function (options) {
options.iniUrl = options.iniUrl || null;
options.clearUrl = options.clearUrl || null;
options.urlHashLocation = options.urlHashLocation || false;
options.bgColorDefault = options.bgColorDefault || 0;
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
options.loadingTime = options.loadingTime || 0;
options.pageAnim = options.pageAnim || false;
options.maxTabNum = options.maxTabNum || 200;
options.isHideOpenMenu = !options.isHideOpenMenu ? options.isHideOpenMenu : true;
$.getJSON(options.iniUrl, function (data) {
if (data == null) {
miniAdmin.error('暂无菜单信息')
} else {
miniAdmin.renderLogo(data.logoInfo);
miniAdmin.renderClear(options.clearUrl);
miniAdmin.renderHome(data.homeInfo);
miniAdmin.renderAnim(options.pageAnim);
miniAdmin.listen();
miniMenu.render({
menuList: data.menuInfo,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen
});
miniTab.render({
filter: 'layuiminiTab',
urlHashLocation: options.urlHashLocation,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen,
maxTabNum: options.maxTabNum,
menuList: data.menuInfo,
homeInfo: data.homeInfo,
listenSwichCallback: function () {
miniAdmin.renderDevice();
}
});
miniTheme.render({
bgColorDefault: options.bgColorDefault,
listen: true,
});
miniAdmin.deleteLoader(options.loadingTime);
miniAdmin.isHideOpenMenu(options.isHideOpenMenu);
}
}).fail(function () {
miniAdmin.error('菜单接口有误');
});
},
/**
* 点击左侧下拉菜单，关闭其他下拉菜单
* @param data
*/
isHideOpenMenu: function (data) {
$(".layui-side").on("click", ".layui-nav-item", function () {
if (data) {
$(this).siblings('li').attr('class', 'layui-nav-item');
}
});
},
/**
* 初始化logo
* @param data
*/
renderLogo: function (data) {
var html = '<a href="' + data.href + '"><img src="' + data.image + '" style="width:95%;" alt="logo"><h1>' + data.title + '</h1></a>';
$('.layuimini-logo').html(html);
},
/**
* 初始化首页
* @param data
*/
renderHome: function (data) {
sessionStorage.setItem('layuiminiHomeHref', data.href);
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
$('#layuiminiHomeTabId').attr('lay-id', data.href);
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
},
/**
* 初始化缓存地址
* @param clearUrl
*/
renderClear: function (clearUrl) {
$('.layuimini-clear').attr('data-href',clearUrl);
},
/**
* 初始化iframe窗口动画
* @param anim
*/
renderAnim: function (anim) {
if (anim) {
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}' +
'</style>');
}
},
fullScreen: function () {
var el = document.documentElement;
var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
if (typeof rfs != "undefined" && rfs) {
rfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
} else if (el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (el.oRequestFullscreen) {
el.oRequestFullscreen();
} else if (el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else if (el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else {
miniAdmin.error('浏览器不支持全屏调用！');
}
},
/**
* 退出全屏
*/
exitFullScreen: function () {
var el = document;
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
if (typeof cfs != "undefined" && cfs) {
cfs.call(el);
} else if (typeof window.ActiveXObject != "undefined") {
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
} else if (el.msExitFullscreen) {
el.msExitFullscreen();
} else if (el.oRequestFullscreen) {
el.oCancelFullScreen();
}else if (el.mozCancelFullScreen) {
el.mozCancelFullScreen();
} else if (el.webkitCancelFullScreen) {
el.webkitCancelFullScreen();
} else {
miniAdmin.error('浏览器不支持全屏调用！');
}
},
/**
* 初始化设备端
*/
renderDevice: function () {
if (miniAdmin.checkMobile()) {
$('.layuimini-tool i').attr('data-side-fold', 1);
$('.layuimini-tool i').attr('class', 'layui-icon layui-icon-list');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
}
},
/**
* 初始化加载时间
* @param loadingTime
*/
deleteLoader: function (loadingTime) {
if (loadingTime) {
setTimeout(function () {
$('.layuimini-loader').fadeOut();
}, loadingTime * 1000)
} else {
$('.layuimini-loader').fadeOut();
}
},
/**
* 成功
* @param title
* @returns {*}
*/
success: function (title) {
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
},
/**
* 失败
* @param title
* @returns {*}
*/
error: function (title) {
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
},
/**
* 判断是否为手机
* @returns {boolean}
*/
checkMobile: function () {
var ua = navigator.userAgent.toLocaleLowerCase();
var pf = navigator.platform.toLocaleLowerCase();
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|| (/ucweb.*linux/i.test(ua));
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
var clientWidth = document.documentElement.clientWidth;
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
return false;
} else {
return true;
}
},
/**
* 监听
*/
listen: function () {
/**
* 清理
*/
$('body').on('click', '[data-clear]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
sessionStorage.clear();
// 判断是否清理服务端
var clearUrl = $(this).attr('data-href');
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
$.getJSON(clearUrl, function (data, status) {
layer.close(loading);
if (data.code != 0) {
return miniAdmin.error(data.msg);
} else {
return miniAdmin.success(data.msg);
}
}).fail(function () {
layer.close(loading);
return miniAdmin.error('清理缓存接口有误');
});
} else {
layer.close(loading);
return miniAdmin.success('清除缓存成功');
}
});
/**
* 刷新
*/
$('body').on('click', '[data-refresh]', function () {
$(".layui-tab-item.layui-show").find("iframe")[0].contentWindow.location.reload();
miniAdmin.success('刷新成功');
});
/**
* 监听提示信息
*/
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
if (miniAdmin.checkMobile()) {
return false;
}
var classInfo = $(this).attr('class'),
tips = $(this).prop("innerHTML"),
isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0 && tips) {
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
window.openTips = layer.tips(tips, $(this), {
tips: [2, '#2f4056'],
time: 300000,
skin:"popup-tips",
success:function (el) {
var left = $(el).position().left - 10 ;
$(el).css({ left:left });
element.render();
}
});
}
});
$("body").on("mouseleave", ".popup-tips", function () {
if (miniAdmin.checkMobile()) {
return false;
}
var isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0) {
try {
layer.close(window.openTips);
} catch (e) {
console.log(e.message);
}
}
});
/**
* 全屏
*/
$('body').on('click', '[data-check-screen]', function () {
var check = $(this).attr('data-check-screen');
if (check == 'full') {
miniAdmin.fullScreen();
$(this).attr('data-check-screen', 'exit');
$(this).html('<i class="layui-icon layui-icon-screen-restore"></i>');
} else {
miniAdmin.exitFullScreen();
$(this).attr('data-check-screen', 'full');
$(this).html('<i class="layui-icon layui-icon-screen-full"></i>');
}
});
/**
* 点击遮罩层
*/
$('body').on('click', '.layuimini-make', function () {
miniAdmin.renderDevice();
});
}
};
exports("miniAdmin", miniAdmin);
});
public/js/lay-module/layuimini/miniMenu.js
+253
View File
@@ -0,0 +1,253 @@
/**
* date:2020/02/27
* author:Mr.Chung
* version:2.0
* description:layuimini 菜单框架扩展
*/
layui.define(["element","laytpl" ,"jquery"], function (exports) {
var element = layui.element,
$ = layui.$,
laytpl = layui.laytpl,
layer = layui.layer;
var miniMenu = {
/**
* 菜单初始化
* @param options.menuList 菜单数据信息
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
*/
render: function (options) {
options.menuList = options.menuList || [];
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
if (options.multiModule) {
miniMenu.renderMultiModule(options.menuList, options.menuChildOpen);
} else {
miniMenu.renderSingleModule(options.menuList, options.menuChildOpen);
}
miniMenu.listen();
},
/**
* 单模块
* @param menuList 菜单数据
* @param menuChildOpen 是否默认展开
*/
renderSingleModule: function (menuList, menuChildOpen) {
menuList = menuList || [];
var leftMenuHtml = '',
childOpenClass = '',
leftMenuCheckDefault = 'layui-this';
var me = this ;
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ;
$('.layui-layout-body').addClass('layuimini-single-module'); //单模块标识
$('.layuimini-header-menu').remove();
$('.layuimini-menu-left').html(leftMenuHtml);
element.init();
},
/**
* 渲染一级菜单
*/
compileMenu: function(menu,isSub){
var menuHtml = '<li {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} class="layui-nav-item menu-li {{d.childOpenClass}} {{d.className}}" {{#if( d.id){ }} id="{{d.id}}" {{#}}}> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} {{#if( d.dizhi){ }} layuimini-href="{{d.dizhi}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}}>{{#if( d.icon){ }} <i class="layui-icon layui-icon-{{d.icon}}"></i> {{#}}} <span class="layui-left-nav {{-d.title}}">{{-d.title}}</span></a> {{# if(d.children){}} {{-d.children}} {{#}}} </li>' ;
if(isSub){
menuHtml = '<dd class="menu-dd {{d.childOpenClass}} {{ d.className }}"> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{d.menu}}" {{#}}} {{#if( d.id){ }} id="{{d.id}}" {{#}}} {{#if(( !d.children || !d.children.length ) && d.dizhi){ }} layuimini-href="{{d.dizhi}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}}> {{#if( d.icon){ }} <i class="layui-icon layui-icon-{{d.icon}}"></i> {{#}}} <span class="layui-left-nav {{-d.title}}"> {{-d.title}}</span></a> {{# if(d.children){}} {{-d.children}} {{#}}}</dd>'
}
return laytpl(menuHtml).render(menu);
},
compileMenuContainer :function(menu,isSub){
var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{d.className}}" id="{{d.id}}">{{-d.children}}</ul>' ;
if(isSub){
wrapperHtml = '<dl class="layui-nav-child">{{-d.children}}</dl>' ;
}
if(!menu.children){
return "";
}
return laytpl(wrapperHtml).render(menu);
},
each:function(list,callback){
var _list = [];
for(var i = 0 ,length = list.length ; i<length ;i++ ){
_list[i] = callback(i,list[i]) ;
}
return _list ;
},
renderChildrenMenu:function(menuList,options){
var me = this ;
menuList = menuList || [] ;
// console.log("menuList",menuList);
var html = this.each(menuList,function (idx,menu) {
if(menu.children && menu.children.length){
menu.children = me.renderChildrenMenu(menu.children,{ childOpenClass: options.childOpenClass || '' });
}
menu.className = "" ;
menu.childOpenClass = options.childOpenClass || ''
return me.compileMenu(menu,true)
}).join("");
return me.compileMenuContainer({ children:html },true)
},
renderLeftMenu :function(leftMenus,options){
options = options || {};
var me = this ;
var leftMenusHtml = me.each(leftMenus || [],function (idx,leftMenu) { // 左侧菜单遍历
var children = me.renderChildrenMenu(leftMenu.children, { childOpenClass:options.childOpenClass });
var leftMenuHtml = me.compileMenu({
href: leftMenu.href,
dizhi: leftMenu.dizhi,
id:leftMenu.id,
target: leftMenu.target,
childOpenClass: options.childOpenClass,
icon: leftMenu.icon,
title: leftMenu.title,
children: children,
className: '',
});
return leftMenuHtml ;
}).join("");
leftMenusHtml = me.compileMenuContainer({ id:options.parentMenuId,className:options.leftMenuCheckDefault,children:leftMenusHtml }) ;
return leftMenusHtml ;
},
/**
* 多模块
* @param menuList 菜单数据
* @param menuChildOpen 是否默认展开
*/
renderMultiModule: function (menuList, menuChildOpen) {
menuList = menuList || [];
var me = this ;
var headerMenuHtml = '',
headerMobileMenuHtml = '',
leftMenuHtml = '',
leftMenuCheckDefault = 'layui-this',
childOpenClass = '',
headerMenuCheckDefault = 'layui-this';
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
var headerMenuHtml = this.each(menuList, function (index, val) { //顶部菜单渲染
var menu = 'multi_module_' + index ;
var id = menu+"HeaderId";
var topMenuItemHtml = "" ;
topMenuItemHtml = me.compileMenu({
className:headerMenuCheckDefault,
menu:menu,
id:id,
title:val.title,
href:"",
target:"",
children:""
});
leftMenuHtml+=me.renderLeftMenu(val.children,{
parentMenuId:menu,
childOpenClass:childOpenClass,
leftMenuCheckDefault:leftMenuCheckDefault
});
headerMobileMenuHtml +=me.compileMenu({ id:id,menu:menu,id:id,icon:val.icon, title:val.title, },true);
headerMenuCheckDefault = "";
leftMenuCheckDefault = "layui-hide" ;
return topMenuItemHtml ;
}).join("");
$('.layui-layout-body').addClass('layuimini-multi-module'); //多模块标识
$('.layuimini-menu-header-pc').html(headerMenuHtml); //电脑
$('.layuimini-menu-left').html(leftMenuHtml);
$('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); //手机
element.init();
},
/**
* 监听
*/
listen: function () {
/**
* 菜单模块切换
*/
$('body').on('click', '[data-menu]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var menuId = $(this).attr('data-menu');
// header
$(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this');
$(this).addClass('layui-this');
// left
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this").addClass('layui-hide');
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this.layui-hide").removeClass('layui-this');
$("#" + menuId).removeClass('layui-hide');
$("#" + menuId).addClass('layui-this');
layer.close(loading);
});
/**
* 菜单缩放
*/
$('body').on('click', '.layuimini-site-mobile', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if (isShow == 1) { // 缩放
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-spread-left');
$('.layui-layout-body').removeClass('layuimini-all');
$('.layui-layout-body').addClass('layuimini-mini');
} else { // 正常
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-shrink-right');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
layer.close(window.openTips);
}
element.init();
layer.close(loading);
});
/**
* 菜单缩放
*/
$('body').on('click', '[data-side-fold]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if (isShow == 1) { // 缩放
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-spread-left');
$('.layui-layout-body').removeClass('layuimini-all');
$('.layui-layout-body').addClass('layuimini-mini');
// $(".menu-li").each(function (idx,el) {
// $(el).addClass("hidden-sub-menu");
// });
} else { // 正常
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
$('.layuimini-tool [data-side-fold]').attr('class', 'layui-icon layui-icon-shrink-right');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
// $(".menu-li").each(function (idx,el) {
// $(el).removeClass("hidden-sub-menu");
// });
layer.close(window.openTips);
}
element.init();
layer.close(loading);
});
/**
* 手机端点开模块
*/
$('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if(check === "1"){
$('.layuimini-site-mobile').trigger("click");
element.init();
}
layer.close(loading);
});
},
};
exports("miniMenu", miniMenu);
});
public/js/lay-module/layuimini/miniTab.js
+676
View File
@@ -0,0 +1,676 @@
/**
* date:2020/02/27
* author:Mr.Chung
* version:2.0
* description:layuimini tab框架扩展
* 新增功能: 点击左侧菜单，如果标签存在则刷新，不存在则新建
* 修改bug: 打开多个标签时，点击关闭当前标签时会把当前标签及后面的标签全部关闭的bug，364行
*/
layui.define(["element", "layer", "jquery","tabs"], function (exports) {
var element = layui.element,
tabs=layui.tabs,
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 || 200;
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.href = options.href || null;
options.tabId = options.tabId || options.href;
options.title = options.title || null;
options.isIframe = options.isIframe || false;
options.maxTabNum = options.maxTabNum || 200;
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;
//
console.log('aaa');
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" id="'+options.tabId+'" src="' + options.href + '"></iframe>'
, id: options.tabId
});
console.log('bbb');
//
$('.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.id = options.id || options.href;
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.id, true);
if (!checkTab) {
parent.layui.element.tabChange('layuiminiTab','0');
setTimeout(function(){
miniTab.create({
tabId: options.id,
href: options.href,
title: options.title,
isIframe: true,
});
parent.layui.element.tabChange('layuiminiTab', options.id);
parent.layer.close(loading);
},100);
}else{
parent.layui.element.tabChange('layuiminiTab', options.id);
parent.layer.close(loading);
}
},
openNewTab: function (options) {
// console.log(options,'o');
options.href = options.href || null;
options.id = options.id || options.href;
options.title = options.title || null;
// console.log(options,'p');
var loading = 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.id, true);
// console.log(checkTab,'po',options.id);
if (!checkTab) {
layui.element.tabChange('layuiminiTab','0');
setTimeout(() => {
miniTab.create({
tabId: options.id,
href: options.href,
title: options.title,
isIframe: true,
});
layui.element.tabChange('layuiminiTab', options.id);
layer.close(loading);
}, 100);
}else{
layui.element.tabChange('layuiminiTab', options.id);
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) {
// 判断选项卡上是否有
tabId=tabId+"";
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' +
'<dd><a href="javascript:;" layuimini-tab-menu-close="divorced">脱 离 标 签</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 || 200;
/**
* 打开新窗口
*/
$('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.change(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);
return false;
} else if (closeType === 'other' && currentTabId !== tabId) {
miniTab.delete(tabId);
} else if (closeType === 'divorced' && currentTabId === tabId) {
miniTab.divorced(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');
if (options.urlHashLocation) {
location.hash = '/' + tabId;
}
if (typeof options.listenSwichCallback === 'function') {
options.listenSwichCallback();
}
if (typeof options.switchtoindex === 'function') {
options.switchtoindex();
}
// 判断是否为新增窗口
if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') {
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no')
}
$("div.layui-side ul li.layui-nav-itemed").removeClass("layui-nav-itemed");
$("[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 || 200;
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);
}
},
/**
* 脱离标签栏
* @param tabId
*/
divorced: function (tabId) {
let tabtitle = $("ul.layui-tab-title").children('li[lay-id="' + tabId + '"]');
let title = tabtitle.children("span").text();
let tab = $("div.layui-tab-item").children("iframe[id='" + tabId + "']");
let id = tabId.replace(/[^\u4e00-\u9fa5\w]/g, "");
layer.open({
id: id,
title: title,
type: 1,
content: "",
shadeClose: false,
shade: 0,
maxmin: true,
area: ['50%', '80%'],
success: function (layero, index) {
//layero tab
tabtitle.hide();
tabtitle.removeClass("layui-this");
tab.parent("div.layui-tab-item").attr("layui-id", index);
tab.appendTo($(layero).children("div#" + id));
//$(layero).children("div#" + id)[0].addendChild(tab[0]);
},
cancel: function (index, layero) {
let iframe = $(layero).children("div#" + id).children("iframe");
iframe.appendTo($("div.layui-tab-item[layui-id=" + index + "]"));
//$("div.layui-tab-item.layui-show")[0].addendChild(iframe[0]);
tabtitle.addClass("layui-this");
tabtitle.show();
},
end: function () {
layer.msg("已关闭");
}
});
}
};
exports("miniTab", miniTab);
});
public/js/lay-module/layuimini/miniTheme.js
+469
View File
@@ -0,0 +1,469 @@
/**
* date:2020/02/28
* author:Mr.Chung
* version:2.0
* description:layuimini tab框架扩展
*/
layui.define(["jquery", "layer"], function (exports) {
var $ = layui.$,
layer = layui.layer;
var miniTheme = {
/**
* 主题配置项
* @param bgcolorId
* @returns {{headerLogo, menuLeftHover, headerRight, menuLeft, headerRightThis, menuLeftThis}|*|*[]}
*/
config: function (bgcolorId) {
var bgColorConfig = [
{
headerRightBg: '#ffffff', //头部右侧背景色
headerRightBgThis: '#e4e4e4', //头部右侧选中背景色,
headerRightColor: 'rgba(107, 107, 107, 0.7)', //头部右侧字体颜色,
headerRightChildColor: 'rgba(107, 107, 107, 0.7)', //头部右侧下拉字体颜色,
headerRightColorThis: '#565656', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(160, 160, 160, 0.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#247AE0', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#565656', //头部缩放按钮样式,
headerLogoBg: '#192027', //logo背景颜色,
headerLogoColor: 'rgb(191, 187, 187)', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#28333E', //左侧菜单背景,
leftMenuBgThis: '#247AE0', //左侧菜单选中背景,
leftMenuChildBg: '#0c0f13', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#247AE0', //tab选项卡选中颜色,
},
{
headerRightBg: '#23262e', //头部右侧背景色
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#23262e', //左侧菜单背景,
leftMenuBgThis: '#737373', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#23262e', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffa4d1', //头部右侧背景色
headerRightBgThis: '#bf7b9d', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ffa4d1', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#e694bd', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#737373', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffa4d1', //tab选项卡选中颜色,
},
{
headerRightBg: '#1aa094', //头部右侧背景色
headerRightBgThis: '#197971', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#23262e', //左侧菜单背景,
leftMenuBgThis: '#1aa094', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#1aa094', //tab选项卡选中颜色,
},
{
headerRightBg: '#1e9fff', //头部右侧背景色
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1e9fff', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#1e9fff', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffb800', //头部右侧背景色
headerRightBgThis: '#d09600', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#243346', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#8593a7', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
},
{
headerRightBg: '#e82121', //头部右侧背景色
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0c0c0c', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#e82121', //tab选项卡选中颜色,
},
{
headerRightBg: '#963885', //头部右侧背景色
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#243346', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#586473', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#963885', //tab选项卡选中颜色,
},
{
headerRightBg: '#2D8CF0', //头部右侧背景色
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#0069b7', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#0069b7', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#2D8CF0', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#2d8cf0', //tab选项卡选中颜色,
},
{
headerRightBg: '#ffb800', //头部右侧背景色
headerRightBgThis: '#d09600', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#d09600', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
},
{
headerRightBg: '#e82121', //头部右侧背景色
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#d91f1f', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#1f1f1f', //左侧菜单背景,
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#e82121', //tab选项卡选中颜色,
},
{
headerRightBg: '#963885', //头部右侧背景色
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
headerLogoBg: '#772c6a', //logo背景颜色,
headerLogoColor: '#ffffff', //logo字体颜色,
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
leftMenuBg: '#2f4056', //左侧菜单背景,
leftMenuBgThis: '#626f7f', //左侧菜单选中背景,
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
tabActiveColor: '#963885', //tab选项卡选中颜色,
}
];
if (bgcolorId === undefined) {
return bgColorConfig;
} else {
return bgColorConfig[bgcolorId];
}
},
/**
* 初始化
* @param options
*/
render: function (options) {
options.bgColorDefault = options.bgColorDefault || false;
options.listen = options.listen || false;
var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
bgcolorId = options.bgColorDefault;
}
miniTheme.buildThemeCss(bgcolorId);
if (options.listen) miniTheme.listen(options);
},
/**
* 构建主题样式
* @param bgcolorId
* @returns {boolean}
*/
buildThemeCss: function (bgcolorId) {
if (!bgcolorId) {
return false;
}
var bgcolorData = miniTheme.config(bgcolorId);
var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
'.layui-layout-admin .layui-header {\n' +
' background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧选中背景色 headerRightBgThis */\n' +
'.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {\n' +
' background-color: ' + bgcolorData.headerRightBgThis + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧字体颜色 headerRightColor */\n' +
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {\n' +
' color: ' + bgcolorData.headerRightColor + ';\n' +
'}\n' +
'/**头部右侧下拉字体颜色 headerRightChildColor */\n' +
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {\n' +
' color: ' + bgcolorData.headerRightChildColor + '!important;\n' +
'}\n'+
'\n' +
'/*头部右侧鼠标选中 headerRightColorThis */\n' +
'.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {\n' +
' color: ' + bgcolorData.headerRightColorThis + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
'.layui-header .layui-nav .layui-nav-more {\n' +
' border-top-color: ' + bgcolorData.headerRightNavMore + ' !important;\n' +
'}\n' +
'\n' +
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
'.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {\n' +
' border-color: transparent transparent ' + bgcolorData.headerRightNavMore + ' !important;\n' +
'}\n' +
'\n' +
'/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */\n' +
'.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {\n' +
' background-color: ' + bgcolorData.headerRightNavMoreBg + ' !important;\n' +
' color:' + bgcolorData.headerRightNavMoreColor + ' !important;\n' +
'}\n' +
'\n' +
'/*头部缩放按钮样式 headerRightToolColor */\n' +
'.layui-layout-admin .layui-header .layuimini-tool i {\n' +
' color: ' + bgcolorData.headerRightToolColor + ';\n' +
'}\n' +
'\n' +
'/*logo背景颜色 headerLogoBg */\n' +
'.layui-layout-admin .layuimini-logo {\n' +
' background-color: ' + bgcolorData.headerLogoBg + ' !important;\n' +
'}\n' +
'\n' +
'/*logo字体颜色 headerLogoColor */\n' +
'.layui-layout-admin .layuimini-logo h1 {\n' +
' color: ' + bgcolorData.headerLogoColor + ';\n' +
'}\n' +
'\n' +
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-more,.layuimini-menu-left-zoom.layui-nav .layui-nav-more {\n' +
' border-top-color: ' + bgcolorData.leftMenuNavMore + ';\n' +
'}\n' +
'\n' +
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {\n' +
' border-color: transparent transparent ' + bgcolorData.leftMenuNavMore + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单背景 leftMenuBg */\n' +
'.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {\n' +
' background-color: ' + bgcolorData.leftMenuBg + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单选中背景 leftMenuBgThis */\n' +
'.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {\n' +
' background-color: ' + bgcolorData.leftMenuBgThis + ' !important\n' +
'}\n' +
'\n' +
'/*左侧菜单子菜单背景 leftMenuChildBg */\n' +
'.layuimini-menu-left .layui-nav-itemed > .layui-nav-child{\n' +
' background-color: ' + bgcolorData.leftMenuChildBg + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单字体颜色 leftMenuColor */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {\n' +
' color: ' + bgcolorData.leftMenuColor + ' !important;\n' +
'}\n' +
'\n' +
'/*左侧菜单选中字体颜色 leftMenuColorThis */\n' +
'.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {\n' +
' color:' + bgcolorData.leftMenuColorThis + ' !important;\n' +
'}\n' +
'\n' +
'/**tab选项卡选中颜色 tabActiveColor */\n' +
'.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {\n' +
' background-color: ' + bgcolorData.tabActiveColor + ';\n' +
'}\n';
$('#layuimini-bg-color').html(styleHtml);
},
/**
* 构建主题选择html
* @param options
* @returns {string}
*/
buildBgColorHtml: function (options) {
options.bgColorDefault = options.bgColorDefault || 0;
var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
var bgColorConfig = miniTheme.config();
var html = '';
$.each(bgColorConfig, function (key, val) {
if (key === bgcolorId) {
html += '<li class="layui-this" data-select-bgcolor="' + key + '">\n';
} else {
html += '<li data-select-bgcolor="' + key + '">\n';
}
html += '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">\n' +
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: ' + val.headerLogoBg + ';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: ' + val.headerRightBg + ';"></span></div>\n' +
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: ' + val.leftMenuBg + ';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #ffffff;"></span></div>\n' +
'</a>\n' +
'</li>';
});
return html;
},
/**
* 监听
* @param options
*/
listen: function (options) {
$('body').on('click', '[data-bgcolor]', function () {
var loading = layer.load(0, {shade: false, time: 2 * 1000});
var clientHeight = (document.documentElement.clientHeight) - 60;
var bgColorHtml = miniTheme.buildBgColorHtml(options);
var html = '<div class="layuimini-color">\n' +
'<div class="color-title">\n' +
'<span>配色方案</span>\n' +
'</div>\n' +
'<div class="color-content">\n' +
'<ul>\n' + bgColorHtml + '</ul>\n' +
'</div>\n' +
'</div>';
layer.open({
type: 1,
title: false,
closeBtn: 0,
shade: 0.2,
anim: 2,
shadeClose: true,
id: 'layuiminiBgColor',
area: ['340px', clientHeight + 'px'],
offset: 'rb',
content: html,
success: function (index, layero) {
},
end: function () {
$('.layuimini-select-bgcolor').removeClass('layui-this');
}
});
layer.close(loading);
});
$('body').on('click', '[data-select-bgcolor]', function () {
var bgcolorId = $(this).attr('data-select-bgcolor');
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
$(this).attr('class', 'layui-this');
sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
miniTheme.render({
bgColorDefault: bgcolorId,
listen: false,
});
});
}
};
exports("miniTheme", miniTheme);
})
;
public/js/lay-module/layuimini/xphp.js
+248
View File
@@ -0,0 +1,248 @@
/**
* date:2020/02/27
* author:Mr.Chung
* version:2.0
* description:layuimini 主体框架扩展
*/
layui.define(["jquery","element", "miniTab"], function (exports) {
var $ = layui.$,
layer = layui.layer,
dropdown = layui.dropdown,
element = layui.element ,
miniTab = layui.miniTab;
if (!/http(s*):\/\//.test(location.href)) {
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示";
return layer.alert(tips);
}
var xphp = {
/**
* 后台框架初始化
* @param options.iniUrl 后台初始化接口地址
* @param options.urlHashLocation URL地址hash定位
* @param options.bgColorDefault 默认皮肤
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
* @param options.loadingTime 初始化加载时间
* @param options.pageAnim iframe窗口动画
* @param options.maxTabNum 最大的tab打开数量
*/
render: function (options) {
options.iniUrl = options.iniUrl || null;
options.urlHashLocation = options.urlHashLocation || false;
options.bgColorDefault = options.bgColorDefault || 0;
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
options.loadingTime = options.loadingTime || 0;
options.pageAnim = options.pageAnim || false;
options.maxTabNum = options.maxTabNum || 200;
options.isHideOpenMenu = !options.isHideOpenMenu ? options.isHideOpenMenu : true;
$.getJSON(options.iniUrl, function (data) {
if (data == null) {
xphp.error('暂无菜单信息')
} else {
xphp.renderHome(data.homeInfo);
xphp.renderAnim(options.pageAnim);
xphp.listen();
dropdown.render({
elem: '.menuitemon',
data:data.menuInfo,
customName: {
id: 'id',
title: 'title',
children: 'children'
},
trigger: 'hover',
click: function(obj){
miniTab.openNewTab({...obj,href:obj.dizhi});
}
});
//tab页
miniTab.render({
filter: 'layuiminiTab',
urlHashLocation: options.urlHashLocation,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen,
maxTabNum: options.maxTabNum,
menuList: data.menuInfo,
homeInfo: data.homeInfo,
switchtoindex:options.switchtoindex||false,
listenSwichCallback: function () {
xphp.renderDevice();
}
});
xphp.deleteLoader(options.loadingTime);
xphp.isHideOpenMenu(options.isHideOpenMenu);
}
}).fail(function () {
xphp.error('菜单接口有误');
});
},
/**
* 点击左侧下拉菜单，关闭其他下拉菜单
* @param data
*/
isHideOpenMenu: function (data) {
$(".layui-side").on("click", ".layui-nav-item", function () {
if (data) {
$(this).siblings('li').attr('class', 'layui-nav-item');
}
});
},
/**
* 初始化首页
* @param data
*/
renderHome: function (data) {
sessionStorage.setItem('layuiminiHomeHref', data.href);
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
$('#layuiminiHomeTabId').attr('lay-id', data.id);
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
},
/**
* 初始化iframe窗口动画
* @param anim
*/
renderAnim: function (anim) {
if (anim) {
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}\n' +
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
'}' +
'</style>');
}
},
/**
* 初始化设备端
*/
renderDevice: function () {
if (xphp.checkMobile()) {
$('.layuimini-tool i').attr('data-side-fold', 1);
$('.layuimini-tool i').attr('class', 'layui-icon layui-icon-list');
$('.layui-layout-body').removeClass('layuimini-mini');
$('.layui-layout-body').addClass('layuimini-all');
}
},
/**
* 初始化加载时间
* @param loadingTime
*/
deleteLoader: function (loadingTime) {
if (loadingTime) {
setTimeout(function () {
$('.layuimini-loader').fadeOut();
}, loadingTime * 1000)
} else {
$('.layuimini-loader').fadeOut();
}
},
/**
* 成功
* @param title
* @returns {*}
*/
success: function (title) {
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
},
/**
* 失败
* @param title
* @returns {*}
*/
error: function (title) {
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
},
/**
* 判断是否为手机
* @returns {boolean}
*/
checkMobile: function () {
var ua = navigator.userAgent.toLocaleLowerCase();
var pf = navigator.platform.toLocaleLowerCase();
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|| (/ucweb.*linux/i.test(ua));
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
var clientWidth = document.documentElement.clientWidth;
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
return false;
} else {
return true;
}
},
/**
* 监听
*/
listen: function () {
/**
* 监听提示信息
*/
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
if (xphp.checkMobile()) {
return false;
}
var classInfo = $(this).attr('class'),
tips = $(this).prop("innerHTML"),
isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0 && tips) {
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>"+tips+"</li></ul>" ;
window.openTips = layer.tips(tips, $(this), {
tips: [2, '#2f4056'],
time: 300000,
skin:"popup-tips",
success:function (el) {
var left = $(el).position().left - 10 ;
$(el).css({ left:left });
element.render();
}
});
}
});
$("body").on("mouseleave", ".popup-tips", function () {
if (xphp.checkMobile()) {
return false;
}
var isShow = $('.layuimini-tool i').attr('data-side-fold');
if (isShow == 0) {
try {
layer.close(window.openTips);
} catch (e) {
console.log(e.message);
}
}
});
/**
* 点击遮罩层
*/
$('body').on('click', '.layuimini-make', function () {
xphp.renderDevice();
});
}
};
exports("xphp", xphp);
});