|
|
layui.define(["element","laytpl" ,"jquery"], function (exports) { // 定义一个模块，依赖element、laytpl和jquery
|
|
|
var element = layui.element, // 获取layui的element模块
|
|
|
$ = layui.$, // 获取layui的jQuery模块
|
|
|
laytpl = layui.laytpl, // 获取layui的模板引擎模块
|
|
|
layer = layui.layer; // 获取layui的弹出层模块
|
|
|
|
|
|
var miniMenu = { // 定义miniMenu对象
|
|
|
|
|
|
|
|
|
render: function (options) { // 定义渲染函数
|
|
|
options.menuList = options.menuList || []; // 如果未传入menuList，则默认为空数组
|
|
|
options.multiModule = options.multiModule || false; // 如果未传入multiModule，则默认为false
|
|
|
options.menuChildOpen = options.menuChildOpen || false; // 如果未传入menuChildOpen，则默认为false
|
|
|
if (options.multiModule) { // 如果开启多模块
|
|
|
miniMenu.renderMultiModule(options.menuList, options.menuChildOpen); // 调用多模块渲染函数
|
|
|
} else { // 否则
|
|
|
miniMenu.renderSingleModule(options.menuList, options.menuChildOpen); // 调用单模块渲染函数
|
|
|
}
|
|
|
miniMenu.listen(); // 监听事件
|
|
|
},
|
|
|
|
|
|
|
|
|
renderSingleModule: function (menuList, menuChildOpen) { // 定义单模块渲染函数
|
|
|
menuList = menuList || []; // 如果未传入menuList，则默认为空数组
|
|
|
var leftMenuHtml = '', // 初始化左侧菜单HTML字符串
|
|
|
childOpenClass = '', // 初始化子菜单打开类名
|
|
|
leftMenuCheckDefault = 'layui-this'; // 设置默认选中样式类名
|
|
|
var me = this ; // 保存当前上下文
|
|
|
if (menuChildOpen) childOpenClass = ' layui-nav-itemed'; // 如果需要展开子菜单，添加对应的类名
|
|
|
leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ; // 渲染左侧菜单HTML
|
|
|
$('.layui-layout-body').addClass('layuimini-single-module'); // 给布局主体添加单模块标识类名
|
|
|
$('.layuimini-header-menu').remove(); // 移除头部菜单
|
|
|
$('.layuimini-menu-left').html(leftMenuHtml); // 将渲染好的左侧菜单HTML插入到左侧菜单容器中
|
|
|
|
|
|
element.init(); // 初始化layui元素
|
|
|
},
|
|
|
|
|
|
compileMenu: function(menu,isSub){
|
|
|
// 定义菜单HTML模板，使用laytpl语法进行条件渲染
|
|
|
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 {{#if( d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }} <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav">{{d.title}}</span></a> {{# if(d.children){}} {{d.children}} {{#}}} </li>' ;
|
|
|
|
|
|
// 如果isSub为true，则使用不同的HTML模板
|
|
|
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.child || !d.child.length ) && d.href){ }} layuimini-href="{{d.href}}" {{#}}} {{#if( d.target){ }} target="{{d.target}}" {{#}}}> {{#if( d.icon){ }} <i class="{{d.icon}}"></i> {{#}}} <span class="layui-left-nav"> {{d.title}}</span></a> {{# if(d.children){}} {{d.children}} {{#}}}</dd>'
|
|
|
}
|
|
|
|
|
|
// 使用laytpl渲染菜单HTML模板并返回结果
|
|
|
return laytpl(menuHtml).render(menu);
|
|
|
},
|
|
|
|
|
|
compileMenuContainer :function(menu,isSub){
|
|
|
// 定义菜单容器的HTML模板，使用laytpl语法进行条件渲染
|
|
|
var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{d.className}}" id="{{d.id}}">{{d.children}}</ul>' ;
|
|
|
|
|
|
// 如果isSub为true，则使用不同的HTML模板
|
|
|
if(isSub){
|
|
|
wrapperHtml = '<dl class="layui-nav-child ">{{d.children}}</dl>' ;
|
|
|
}
|
|
|
|
|
|
// 如果菜单没有子项，则返回空字符串
|
|
|
if(!menu.children){
|
|
|
return "";
|
|
|
}
|
|
|
|
|
|
// 使用laytpl渲染菜单容器的HTML模板并返回结果
|
|
|
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 || [] ; // 如果未传入菜单列表，则使用空数组
|
|
|
var html = this.each(menuList,function (idx,menu) { // 遍历菜单列表
|
|
|
if(menu.child && menu.child.length){ // 如果当前菜单有子菜单
|
|
|
menu.children = me.renderChildrenMenu(menu.child,{ childOpenClass: options.childOpenClass || '' }); // 递归调用自身渲染子菜单
|
|
|
}
|
|
|
menu.className = "" ; // 清空菜单的类名
|
|
|
menu.childOpenClass = options.childOpenClass || '' // 设置子菜单打开时的类名
|
|
|
return me.compileMenu(menu,true) // 编译当前菜单并返回HTML字符串
|
|
|
}).join(""); // 将所有生成的HTML字符串连接成一个字符串
|
|
|
return me.compileMenuContainer({ children:html },true) // 将生成的HTML字符串包装在容器中并返回
|
|
|
},
|
|
|
renderLeftMenu :function(leftMenus,options){ // 定义渲染左侧菜单的函数，接收左侧菜单列表和选项作为参数
|
|
|
options = options || {}; // 如果未传入选项，则使用空对象
|
|
|
var me = this ; // 保存当前上下文的引用
|
|
|
var leftMenusHtml = me.each(leftMenus || [],function (idx,leftMenu) { // 遍历左侧菜单列表
|
|
|
var children = me.renderChildrenMenu(leftMenu.child, { childOpenClass:options.childOpenClass }); // 渲染子菜单
|
|
|
var leftMenuHtml = me.compileMenu({ // 编译当前左侧菜单
|
|
|
href:leftMenu.href, // 设置链接地址
|
|
|
target:leftMenu.target, // 设置链接目标
|
|
|
childOpenClass:options.childOpenClass, // 设置子菜单打开时的类名
|
|
|
icon:leftMenu.icon, // 设置图标
|
|
|
title:leftMenu.title, // 设置标题
|
|
|
children:children // 设置子菜单
|
|
|
});
|
|
|
return leftMenuHtml ; // 返回编译后的HTML字符串
|
|
|
}).join(""); // 将所有生成的HTML字符串连接成一个字符串
|
|
|
|
|
|
leftMenusHtml = me.compileMenuContainer({
|
|
|
id: options.parentMenuId, // 设置菜单容器的ID为options对象中的parentMenuId属性值
|
|
|
className: options.leftMenuCheckDefault, // 设置菜单容器的类名为options对象中的leftMenuCheckDefault属性值
|
|
|
children: leftMenusHtml // 将当前leftMenusHtml作为子元素传递给compileMenuContainer方法
|
|
|
}) ;
|
|
|
return leftMenusHtml ; // 返回处理后的leftMenusHtml
|
|
|
},
|
|
|
|
|
|
renderrenderMultiModule: function (menuList, menuChildOpen) {
|
|
|
menuList = menuList || []; // 如果menuList未定义或为空，则初始化为空数组
|
|
|
var me = this; // 保存当前上下文的引用
|
|
|
var headerMenuHtml = '', // 初始化顶部菜单HTML字符串
|
|
|
headerMobileMenuHtml = '', // 初始化移动端顶部菜单HTML字符串
|
|
|
leftMenuHtml = '', // 初始化左侧菜单HTML字符串
|
|
|
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; // 生成菜单ID
|
|
|
var id = menu + "HeaderId"; // 生成头部菜单ID
|
|
|
var topMenuItemHtml = ""; // 初始化顶部菜单项HTML字符串
|
|
|
topMenuItemHtml = me.compileMenu({
|
|
|
className: headerMenuCheckDefault, // 设置菜单项的类名
|
|
|
menu: menu, // 设置菜单ID
|
|
|
id: id, // 设置菜单项ID
|
|
|
title: val.title, // 设置菜单标题
|
|
|
href: "", // 设置链接地址（此处为空）
|
|
|
target: "", // 设置目标窗口（此处为空）
|
|
|
children: "" // 设置子菜单（此处为空）
|
|
|
});
|
|
|
leftMenuHtml += me.renderLeftMenu(val.child, { // 渲染左侧菜单并追加到leftMenuHtml
|
|
|
parentMenuId: menu, // 传递父菜单ID
|
|
|
childOpenClass: childOpenClass, // 传递子菜单打开类名
|
|
|
leftMenuCheckDefault: leftMenuCheckDefault // 传递左侧菜单默认选中样式
|
|
|
});
|
|
|
headerMobileMenuHtml += me.compileMenu({ id: id, menu: menu, id: id, icon: val.icon, title: val.title }, true); // 渲染移动端顶部菜单并追加到headerMobileMenuHtml
|
|
|
headerMenuCheckDefault = ""; // 清空顶部菜单默认选中样式
|
|
|
leftMenuCheckDefault = "layui-hide"; // 设置左侧菜单默认隐藏样式
|
|
|
return topMenuItemHtml; // 返回顶部菜单项HTML字符串
|
|
|
}).join(""); // 将所有顶部菜单项HTML字符串连接成一个字符串
|
|
|
$('.layui-layout-body').addClass('layuimini-multi-module'); // 给布局主体添加多模块标识类名
|
|
|
$('.layuimini-menu-header-pc').html(headerMenuHtml); // 将顶部菜单HTML添加到电脑端头部菜单容器中
|
|
|
$('.layuimini-menu-left').html(leftMenuHtml); // 将左侧菜单HTML添加到左侧菜单容器中
|
|
|
$('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); // 将移动端顶部菜单HTML添加到移动端头部菜单容器中
|
|
|
element.init(); // 初始化Layui元素
|
|
|
} },
|
|
|
|
|
|
|
|
|
listlisten: function () {
|
|
|
// 监听点击事件，当点击具有data-menu属性的元素时触发
|
|
|
$('body').on('click', '[data-menu]', function () {
|
|
|
// 显示加载动画，设置shade为false，持续时间为2秒
|
|
|
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
|
|
// 获取被点击元素的data-menu属性值，即菜单ID
|
|
|
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 () { // 当点击类名为'layuimini-site-mobile'的元素时触发事件
|
|
|
var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载层，无遮罩，持续2秒
|
|
|
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取'data-side-fold'属性的值
|
|
|
if (isShow == 1) { // 如果当前状态为展开
|
|
|
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0); // 设置'data-side-fold'属性为0（缩放）
|
|
|
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent'); // 更改图标为缩进图标
|
|
|
$('.layui-layout-body').removeClass('layuimini-all'); // 移除全屏样式
|
|
|
$('.layui-layout-body').addClass('layuimini-mini'); // 添加缩放样式
|
|
|
} else { // 如果当前状态为缩放
|
|
|
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1); // 设置'data-side-fold'属性为1（正常）
|
|
|
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent'); // 更改图标为正常图标
|
|
|
$('.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 () { // 当点击具有'data-side-fold'属性的元素时触发事件
|
|
|
var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载层，无遮罩，持续2秒
|
|
|
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取'data-side-fold'属性的值
|
|
|
if (isShow == 1) { // 如果当前状态为展开
|
|
|
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0); // 设置'data-side-fold'属性为0（缩放）
|
|
|
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent'); // 更改图标为缩进图标
|
|
|
$('.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); // 设置'data-side-fold'属性为1（正常）
|
|
|
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent'); // 更改图标为正常图标
|
|
|
$('.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 () { // 当点击具有特定类名的dd元素时触发事件
|
|
|
var loading = layer.load(0, {shade: false, time: 2 * 1000}); // 显示加载动画，持续时间为2秒
|
|
|
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold'); // 获取具有data-side-fold属性的元素的data-side-fold属性值
|
|
|
if(check === "1"){ // 如果data-side-fold属性值为"1"
|
|
|
$('.layuimini-site-mobile').trigger("click"); // 触发layuimini-site-mobile元素的点击事件
|
|
|
element.init(); // 重新初始化element模块
|
|
|
}
|
|
|
layer.close(loading); // 关闭加载动画
|
|
|
});
|
|
|
},
|
|
|
|
|
|
};
|
|
|
|
|
|
exports("miniMenu", miniMenu); // 导出miniMenu模块
|
|
|
}); |
