|
|
@@ -1,318 +1,435 @@
|
|
|
-//导航收缩展开
|
|
|
-bind_event($(".canvas-nav-item>a"), function () {
|
|
|
- if (!$('.canvas-nav-item').hasClass('canvas-nav-small')) {
|
|
|
- if ($(this).next().css('display') == "none") {
|
|
|
- //展开未展开
|
|
|
- $('.canvas-nav-item').children('ul').slideUp(300);
|
|
|
- $(this).next('ul').slideDown(300);
|
|
|
- $(this).parent('li').addClass('canvas-nav-show').siblings('li').removeClass('canvas-nav-show');
|
|
|
- } else {
|
|
|
- //收缩已展开
|
|
|
- $(this).next('ul').slideUp(300);
|
|
|
- $('.canvas-nav-item.canvas-nav-show').removeClass('canvas-nav-show');
|
|
|
+/**
|
|
|
+ * 工具函数模块
|
|
|
+ */
|
|
|
+const Utils = {
|
|
|
+ // 生成唯一 ID
|
|
|
+ generateId() {
|
|
|
+ return 'tab_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 判断元素是否可见（包括祖先）
|
|
|
+ isVisible(el) {
|
|
|
+ if (!el) return false;
|
|
|
+ let elem = el;
|
|
|
+ while (elem) {
|
|
|
+ if (window.getComputedStyle(elem).display === 'none') {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ elem = elem.parentElement;
|
|
|
}
|
|
|
- }
|
|
|
-});
|
|
|
-// 收放导航列表
|
|
|
-bind_event($(".switch-list"), function () {
|
|
|
- //收缩按钮切换
|
|
|
- if ($(this).children("i").hasClass("layui-icon layui-icon-shrink-right")) {
|
|
|
- $(this).children("i").removeClass("layui-icon layui-icon-shrink-right");
|
|
|
- $(this).children("i").addClass("layui-icon layui-icon-spread-left");
|
|
|
- } else {
|
|
|
- $(this).children("i").removeClass("layui-icon layui-icon-spread-left");
|
|
|
- $(this).children("i").addClass("layui-icon layui-icon-shrink-right");
|
|
|
- }
|
|
|
+ return true;
|
|
|
+ },
|
|
|
|
|
|
- /*canvas-nav-small切换*/
|
|
|
- if ($('.layout-body').hasClass('canvas-nav-small')) {
|
|
|
- $('.layout-body').removeClass('canvas-nav-small');
|
|
|
- } else {
|
|
|
- $('.canvas-nav-item').removeClass('canvas-nav-show');
|
|
|
- $('.canvas-nav-item').children('ul').removeAttr('style');
|
|
|
- $('.layout-body').addClass('canvas-nav-small');
|
|
|
- }
|
|
|
-});
|
|
|
+ // 日志输出（带类型）
|
|
|
+ log(...args) {
|
|
|
+ args.forEach(arg => {
|
|
|
+ console.log(`[type => ${typeof arg}, content =>`, arg, ']');
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
+ // 删除节点（安全）
|
|
|
+ removeNode(...nodes) {
|
|
|
+ nodes.forEach(node => {
|
|
|
+ if (node && typeof node.remove === 'function') {
|
|
|
+ node.remove();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
-//全屏
|
|
|
-function fullScreen(id) {
|
|
|
- var el = document.documentElement;
|
|
|
- var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;
|
|
|
- if (typeof rfs != "undefined" && rfs) {
|
|
|
- rfs.call(el);
|
|
|
- } else {
|
|
|
- msg("浏览器不支持全屏调用，请使用其他浏览器或按F11键切换全屏！");
|
|
|
- return;
|
|
|
+ // 阻止事件冒泡（现代浏览器）
|
|
|
+ stopPropagation(e) {
|
|
|
+ e.stopPropagation();
|
|
|
}
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 消息提示模块
|
|
|
+ */
|
|
|
+const Message = {
|
|
|
+ // layer.tips 封装
|
|
|
+ tips(target, str) {
|
|
|
+ layer.tips(str, $(target), {
|
|
|
+ tips: [1, '#3595CC'],
|
|
|
+ time: 0
|
|
|
+ });
|
|
|
+ },
|
|
|
|
|
|
- $("#" + id).attr("onclick", "exitScreen('" + id + "')");
|
|
|
- $("#" + id).attr("onmouseenter", "getTips(this, '退出全屏')");
|
|
|
- $("#" + id).find("i").attr("class", "fa fa-arrows");
|
|
|
-}
|
|
|
-
|
|
|
-//退出全屏
|
|
|
-function exitScreen(id) {
|
|
|
- if (document.exitFullscreen) {
|
|
|
- document.exitFullscreen();
|
|
|
- } else if (document.mozCancelFullScreen) {
|
|
|
- document.mozCancelFullScreen();
|
|
|
- } else if (document.webkitCancelFullScreen) {
|
|
|
- document.webkitCancelFullScreen();
|
|
|
- } else if (document.msExitFullscreen) {
|
|
|
- document.msExitFullscreen();
|
|
|
+ // layer.msg 封装（修复参数错误）
|
|
|
+ msg(str, icon, offset) {
|
|
|
+ const options = {
|
|
|
+ offset: offset || '20px'
|
|
|
+ };
|
|
|
+ if (icon !== undefined && icon !== null && icon !== '') {
|
|
|
+ options.icon = icon;
|
|
|
+ }
|
|
|
+ return layer.msg(str || '没有内容', options);
|
|
|
}
|
|
|
- if (typeof cfs != "undefined" && cfs) {
|
|
|
- cfs.call(el);
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 显示控制模块
|
|
|
+ */
|
|
|
+const Display = {
|
|
|
+ toggle(selector, displayValue = 'block') {
|
|
|
+ const el = typeof selector === 'string' ? document.querySelector(selector) : selector;
|
|
|
+ if (!el) return;
|
|
|
+ const isVisible = window.getComputedStyle(el).display !== 'none';
|
|
|
+ el.style.display = isVisible ? 'none' : displayValue;
|
|
|
+ },
|
|
|
+ adjustIframeHeight(iframe) {
|
|
|
+ try {
|
|
|
+ // 获取内嵌文档的实际高度
|
|
|
+ const width = iframe.contentWindow.document.body.scrollWidth;
|
|
|
+ iframe.style.width = `${width}px`;
|
|
|
+ } catch (e) {
|
|
|
+ console.warn("跨域限制无法自动调整高度");
|
|
|
+ }
|
|
|
}
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 全屏控制模块
|
|
|
+ */
|
|
|
+const Fullscreen = {
|
|
|
+ isFullscreen() {
|
|
|
+ return !!(document.fullscreenElement ||
|
|
|
+ document.webkitFullscreenElement ||
|
|
|
+ document.mozFullScreenElement ||
|
|
|
+ document.msFullscreenElement);
|
|
|
+ },
|
|
|
|
|
|
- $("#" + id).find("i").attr("class", "fa fa-arrows-alt");
|
|
|
- $("#" + id).attr("onclick", "fullScreen('" + id + "')");
|
|
|
- $("#" + id).attr("onmouseenter", "getTips(this, '全屏')");
|
|
|
-}
|
|
|
-
|
|
|
-//判断是否IE浏览器
|
|
|
-function IEVersion() {
|
|
|
- var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
|
|
|
- var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
|
|
|
- var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器
|
|
|
- var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
|
|
|
- if(isIE) {
|
|
|
- var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
|
|
|
- reIE.test(userAgent);
|
|
|
- var fIEVersion = parseFloat(RegExp["$1"]);
|
|
|
- if(fIEVersion == 7) {
|
|
|
- return 7;
|
|
|
- } else if(fIEVersion == 8) {
|
|
|
- return 8;
|
|
|
- } else if(fIEVersion == 9) {
|
|
|
- return 9;
|
|
|
- } else if(fIEVersion == 10) {
|
|
|
- return 10;
|
|
|
+ request(id) {
|
|
|
+ const el = document.documentElement;
|
|
|
+ if (el.requestFullscreen) {
|
|
|
+ el.requestFullscreen();
|
|
|
+ } else if (el.webkitRequestFullscreen) {
|
|
|
+ el.webkitRequestFullscreen();
|
|
|
+ } else if (el.mozRequestFullScreen) {
|
|
|
+ el.mozRequestFullScreen();
|
|
|
+ } else if (el.msRequestFullscreen) {
|
|
|
+ el.msRequestFullscreen();
|
|
|
} else {
|
|
|
- return 6;//IE版本<=7
|
|
|
+ Message.msg('浏览器不支持全屏，请按 F11 键手动全屏！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新按钮状态
|
|
|
+ const $btn = $(`#${id}`);
|
|
|
+ $btn.attr('onclick', `Fullscreen.exit('${id}')`)
|
|
|
+ .attr('onmouseenter', `Message.tips(this, '退出全屏')`)
|
|
|
+ .find('i').attr('class', 'fa fa-arrows');
|
|
|
+ },
|
|
|
+
|
|
|
+ exit(id) {
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen();
|
|
|
+ } else if (document.webkitExitFullscreen) {
|
|
|
+ document.webkitExitFullscreen();
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen();
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen();
|
|
|
}
|
|
|
- } else if(isEdge) {
|
|
|
- return 'edge';//edge
|
|
|
- } else if(isIE11) {
|
|
|
- return 11; //IE11
|
|
|
- }else{
|
|
|
- return -1;//不是ie浏览器
|
|
|
+
|
|
|
+ // 更新按钮状态
|
|
|
+ const $btn = $(`#${id}`);
|
|
|
+ $btn.attr('onclick', `Fullscreen.request('${id}')`)
|
|
|
+ .attr('onmouseenter', `Message.tips(this, '全屏')`)
|
|
|
+ .find('i').attr('class', 'fa fa-arrows-alt');
|
|
|
}
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
+/**
|
|
|
+ * 标签页管理模块
|
|
|
+ */
|
|
|
+const TabsManager = {
|
|
|
+ currentMenuId: null,
|
|
|
+ currentContentId: null,
|
|
|
|
|
|
-$(function () {
|
|
|
- $('.tabs').on('click', function (event) {
|
|
|
- event.preventDefault();
|
|
|
- var $this = $(this), url = $this.attr('href'),
|
|
|
- title = $.trim($this.text());
|
|
|
- var id= $this.attr('id');
|
|
|
- var icons = $this.attr('icons');
|
|
|
- if (url && url !== 'javascript:;') {
|
|
|
- addtabs(id,title,icons,url,true);
|
|
|
+ add(id, title, icons, url) {
|
|
|
+ const safeId = id || Utils.generateId();
|
|
|
+ const menuId = `tabs-menu-${safeId}`;
|
|
|
+ const contentId = `tabs-content-${safeId}`;
|
|
|
+
|
|
|
+ // 如果已存在，激活即可
|
|
|
+ if ($('#' + menuId).length) {
|
|
|
+ this.activate(menuId, contentId);
|
|
|
+ return;
|
|
|
}
|
|
|
- });
|
|
|
|
|
|
- var currentTabMenuId = 'tabs-menu-0';
|
|
|
- var currentTabContentId = 'tabs-content-0';
|
|
|
- var pageCounter = 0;
|
|
|
- /**
|
|
|
- * id: tab页签的html标签ID属性格式为"tab-"+id，内容容器的html标签ID格式为"tab-content-"+id
|
|
|
- * title: tab页签的显示文本
|
|
|
- * url: 打开的iframe的url
|
|
|
- * innerTab: 是否是内部弹出页（打开的tab页触发添加新的tab页），默认为undefined/false
|
|
|
- */
|
|
|
- function addtabs(id,title,icons,url,innerTab) {
|
|
|
-
|
|
|
- //如果某个页面已经打开，则切换到该页显示即可，不会新添加tab页
|
|
|
- if ($('#tabs-menu-' + id).length > 0) {
|
|
|
- currentTabMenuId = "tabs-menu-"+id;
|
|
|
- $('#tabs-menu-' + id).addClass('active').siblings().removeClass('active');
|
|
|
- // 标签对应的内容容器切换
|
|
|
- currentTabContentId = "tabs-content-"+id;
|
|
|
- $(".canvas-tabs-content > div").eq($('#tabs-content-' + id).index()).addClass('active').siblings().removeClass('active');
|
|
|
+ // 创建菜单项
|
|
|
+ const $menu = $(`
|
|
|
+ <li id="${menuId}" data-target="${contentId}">
|
|
|
+ <div class="hover-box"></div>
|
|
|
+ <span>${icons ? `<i class="${icons}"></i>` : ''}${title}<i class="layui-icon layui-icon-close icon-close-padd"></i></span>
|
|
|
+
|
|
|
+ </li>
|
|
|
+ `);
|
|
|
+
|
|
|
+ // 创建内容区
|
|
|
+ const $content = $(`
|
|
|
+ <div id="${contentId}" class="tab-content">
|
|
|
+ <iframe src="${url}" class="x-iframe" style="width:100%;height:100%"></iframe>
|
|
|
+ </div>
|
|
|
+ `);
|
|
|
+
|
|
|
+ // 激活新 tab
|
|
|
+ $('.canvas-tabs-menu li').removeClass('active');
|
|
|
+ $('.canvas-tabs-content > div').removeClass('active');
|
|
|
+
|
|
|
+ $menu.addClass('active');
|
|
|
+ $content.addClass('active');
|
|
|
+
|
|
|
+ $('.canvas-tabs-menu').append($menu);
|
|
|
+ $('.canvas-tabs-content').append($content);
|
|
|
+
|
|
|
+ this.currentMenuId = menuId;
|
|
|
+ this.currentContentId = contentId;
|
|
|
+ },
|
|
|
+
|
|
|
+ activate(menuId, contentId) {
|
|
|
+ $('.canvas-tabs-menu li').removeClass('active');
|
|
|
+ $('.canvas-tabs-content > div').removeClass('active');
|
|
|
+
|
|
|
+ $(`#${menuId}`).addClass('active');
|
|
|
+ $(`#${contentId}`).addClass('active');
|
|
|
+
|
|
|
+ this.currentMenuId = menuId;
|
|
|
+ this.currentContentId = contentId;
|
|
|
+ },
|
|
|
+
|
|
|
+ close(menuId) {
|
|
|
+ const $menu = $(`#${menuId}`);
|
|
|
+ const contentId = $menu.data('target');
|
|
|
+
|
|
|
+ // 销毁 iframe（关键！）
|
|
|
+ const $iframe = $(`#${contentId} iframe`);
|
|
|
+ if ($iframe.length) {
|
|
|
+ $iframe[0].src = 'about:blank'; // 强制卸载资源
|
|
|
+ $iframe.remove();
|
|
|
+ }
|
|
|
+
|
|
|
+ // 移除 DOM
|
|
|
+ $menu.remove();
|
|
|
+ $(`#${contentId}`).remove();
|
|
|
+
|
|
|
+ // 激活相邻 tab
|
|
|
+ const $prev = $menu.prev('li');
|
|
|
+ const $next = $menu.next('li');
|
|
|
+ if ($prev.length) {
|
|
|
+ this.activate($prev.attr('id'), $prev.data('target'));
|
|
|
+ } else if ($next.length) {
|
|
|
+ this.activate($next.attr('id'), $next.data('target'));
|
|
|
} else {
|
|
|
- var tab_id = "tabs-menu-" + id,
|
|
|
- tab_content_id = "tabs-content-" + id;
|
|
|
-
|
|
|
- currentTabMenuId = tab_id;
|
|
|
- //添加tab页签
|
|
|
- $(".canvas-tabs-menu > li").removeClass("active");
|
|
|
- $(".canvas-tabs-menu").append("<li id='" + tab_id + "' class='active'><div class='hover-box'></div><i class=''></i>" + title + "<i class='layui-icon layui-icon-close icon-close-padd'></i></li>");
|
|
|
-
|
|
|
- //添加新的内容显示
|
|
|
- currentTabContentId = tab_content_id;
|
|
|
- $(".canvas-tabs-content > div").removeClass("active");
|
|
|
- $(".canvas-tabs-content").append("<div id='" + tab_content_id + "' class='active'>"
|
|
|
- + "<iframe id='iframepage" + (pageCounter++) + "' name='iframepage" + (pageCounter++)
|
|
|
- + "' width='100%' frameborder='0' scrolling='yes' src='" + url + "' class='x-iframe'></iframe></div>");
|
|
|
+ // 回退到首页（假设 tabs-menu-0 存在）
|
|
|
+ if ($('#tabs-menu-0').length) {
|
|
|
+ this.activate('tabs-menu-0', 'tabs-content-0');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ closeCurrent() {
|
|
|
+ if (this.currentMenuId && this.currentMenuId !== 'tabs-menu-0') {
|
|
|
+ this.close(this.currentMenuId);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ closeOthers() {
|
|
|
+ if (this.currentMenuId === 'tabs-menu-0') {
|
|
|
+ $('.canvas-tabs-menu li:not(#tabs-menu-0)').remove();
|
|
|
+ $('.canvas-tabs-content div:not(#tabs-content-0)').remove();
|
|
|
+ this.activate('tabs-menu-0', 'tabs-content-0');
|
|
|
+ } else {
|
|
|
+ // 保留当前和首页
|
|
|
+ $('.canvas-tabs-menu li').each((_, el) => {
|
|
|
+ const id = el.id;
|
|
|
+ if (id !== this.currentMenuId && id !== 'tabs-menu-0') {
|
|
|
+ $(el).remove();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ $('.canvas-tabs-content div').each((_, el) => {
|
|
|
+ const id = el.id;
|
|
|
+ if (id !== this.currentContentId && id !== 'tabs-content-0') {
|
|
|
+ $(el).remove();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ this.activate(this.currentMenuId, this.currentContentId);
|
|
|
}
|
|
|
+ },
|
|
|
+
|
|
|
+ closeAll() {
|
|
|
+ $('.canvas-tabs-menu li:not(#tabs-menu-0)').remove();
|
|
|
+ $('.canvas-tabs-content div:not(#tabs-content-0)').remove();
|
|
|
+ this.activate('tabs-menu-0', 'tabs-content-0');
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+/**
|
|
|
+ * 主初始化逻辑
|
|
|
+ */
|
|
|
+$(function () {
|
|
|
+ // 初始化首页（确保 tabs-menu-0 存在）
|
|
|
+ if (!$('#tabs-menu-0').length) {
|
|
|
+ $('.canvas-tabs-menu').append(`
|
|
|
+ <li id="tabs-menu-0" data-target="tabs-content-0" class="active">
|
|
|
+ <div class="hover-box"></div>
|
|
|
+ <span>首页</span>
|
|
|
+ </li>
|
|
|
+ `);
|
|
|
+ $('.canvas-tabs-content').append(`
|
|
|
+ <div id="tabs-content-0" class="tab-content active">
|
|
|
+ <iframe src="./welcome.html" class="x-iframe" style="width:100%;height:100%"></iframe>
|
|
|
+ </div>
|
|
|
+ `);
|
|
|
+ TabsManager.currentMenuId = 'tabs-menu-0';
|
|
|
+ TabsManager.currentContentId = 'tabs-content-0';
|
|
|
}
|
|
|
|
|
|
- //切换tab页的显示
|
|
|
+ // 点击链接添加 tab
|
|
|
+ $('.tabs').on('click', function (e) {
|
|
|
+ e.preventDefault();
|
|
|
+ const $this = $(this);
|
|
|
+ const url = $this.attr('href');
|
|
|
+ const title = $.trim($this.text());
|
|
|
+ const id = $this.attr('id') || Utils.generateId();
|
|
|
+ const icons = $this.attr('icons');
|
|
|
+ if (url && url !== 'javascript:;') {
|
|
|
+ TabsManager.add(id, title, icons, url);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 切换 tab（点击菜单项）
|
|
|
$(document).on('click', '.canvas-tabs-menu > li', function (e) {
|
|
|
- //清除原来显示的tab页,设置新的显示tab页
|
|
|
- var _this = $(this)
|
|
|
- currentTabMenuId = _this.attr("id");
|
|
|
- _this.addClass('active').siblings(_this).removeClass('active');
|
|
|
- // 标签对应的内容容器切换
|
|
|
- var t_id=currentTabMenuId.substr(currentTabMenuId.length-1,1);
|
|
|
- currentTabContentId = "tabs-content-"+t_id;
|
|
|
- $(".canvas-tabs-content > div").eq(_this.index()).addClass('active').siblings().removeClass('active');
|
|
|
- })
|
|
|
-
|
|
|
- //删除目标tab页的显示
|
|
|
- $(document).on('click', '.canvas-tabs-menu .icon-close-padd', function (e) {
|
|
|
- e.stopPropagation();
|
|
|
- //获取tabs列表
|
|
|
- var u_l = $(".canvas-tabs-menu > li");
|
|
|
- //删除目标tab页
|
|
|
- var _this = $(this);
|
|
|
- //获取当前tabs索引
|
|
|
- var num = _this.parent().index();
|
|
|
- //获取当前tabs id
|
|
|
- var id = _this.parent().attr('id');
|
|
|
- //删除当前tabs
|
|
|
- $("#"+id).remove();
|
|
|
- // 删除目标内容容器
|
|
|
- var t_id=id.substr(id.length-1,1);
|
|
|
- $("#tabs-content-"+t_id).remove();
|
|
|
-
|
|
|
- var u_t=u_l.eq(num-1).attr('id');
|
|
|
- var flag = $("#"+u_t).hasClass("active");
|
|
|
-
|
|
|
- if(flag){
|
|
|
-
|
|
|
- }else{
|
|
|
- currentTabMenuId = u_t;
|
|
|
- $("#"+u_t).addClass("active").siblings($("#"+u_t)).removeClass('active');
|
|
|
-
|
|
|
- var t_c_id=u_t.substr(u_t.length-1,1);
|
|
|
- currentTabContentId = "tabs-content-"+t_c_id;
|
|
|
- $("#tabs-content-"+t_c_id).addClass("active").siblings($("#tabs-content-"+t_c_id)).removeClass('active');
|
|
|
+ const id = $(this).closest('li').attr('id');
|
|
|
+ if (id === 'tabs-menu-0') {
|
|
|
+ return;
|
|
|
}
|
|
|
- })
|
|
|
+ if ($(e.target).hasClass('icon-close-padd')) return;
|
|
|
+ const menuId = this.id;
|
|
|
+ const contentId = $(this).data('target');
|
|
|
+ TabsManager.activate(menuId, contentId);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 关闭 tab
|
|
|
+ $(document).on('click', '.icon-close-padd', function (e) {
|
|
|
+ Utils.stopPropagation(e);
|
|
|
+ const menuId = $(this).closest('li').attr('id');
|
|
|
+ TabsManager.close(menuId);
|
|
|
+ });
|
|
|
|
|
|
- //删除当前页
|
|
|
+ // 关闭当前页
|
|
|
$(document).on('click', '.closeNowPage', function (e) {
|
|
|
- e.stopPropagation();
|
|
|
- if(!(currentTabMenuId === 'tabs-menu-0')){
|
|
|
- //获取tabs列表
|
|
|
- var u_l = $(".canvas-tabs-menu > li");
|
|
|
- //获取当前tabs索引
|
|
|
- var num = $("#"+currentTabMenuId).index();
|
|
|
- //删除当前tabs
|
|
|
- $("#"+currentTabMenuId).remove();
|
|
|
- // 删除目标内容容器
|
|
|
- var t_id=currentTabMenuId.substr(currentTabMenuId.length-1,1);
|
|
|
- $("#tabs-content-"+t_id).remove();
|
|
|
-
|
|
|
- var u_t=u_l.eq(num-1).attr('id');
|
|
|
- var flag = $("#"+u_t).hasClass("active");
|
|
|
-
|
|
|
- if(!flag){
|
|
|
- currentTabMenuId = u_t;
|
|
|
- $("#"+u_t).addClass("active").siblings($("#"+u_t)).removeClass('active');
|
|
|
-
|
|
|
- var t_c_id=u_t.substr(u_t.length-1,1);
|
|
|
- currentTabContentId = "tabs-content-"+t_c_id;
|
|
|
- $("#tabs-content-"+t_c_id).addClass("active").siblings($("#tabs-content-"+t_c_id)).removeClass('active');
|
|
|
- }
|
|
|
- }
|
|
|
- })
|
|
|
+ Utils.stopPropagation(e);
|
|
|
+ TabsManager.closeCurrent();
|
|
|
+ });
|
|
|
|
|
|
- //删除其它页
|
|
|
+ // 关闭其他页
|
|
|
$(document).on('click', '.closeOtherPage', function (e) {
|
|
|
- e.stopPropagation();
|
|
|
- if(currentTabMenuId === 'tabs-menu-0'){
|
|
|
- //删除其它tabs
|
|
|
- $("#tabs-menu-0").siblings($("#tabs-menu-0")).remove();
|
|
|
- $("#tabs-content-0").siblings($("#tabs-content-0")).remove();
|
|
|
- currentTabMenuId = "tabs-menu-0";
|
|
|
- $("#tabs-menu-0").addClass("active")
|
|
|
- currentTabContentId = "tabs-content-0";
|
|
|
- $("#tabs-content-0").addClass("active")
|
|
|
- }else{
|
|
|
- $("#"+currentTabMenuId).nextAll().remove();
|
|
|
- $("#"+currentTabMenuId).prevUntil($("#tabs-menu-0")).remove();
|
|
|
-
|
|
|
- $("#"+currentTabContentId).nextAll().remove();
|
|
|
- $("#"+currentTabContentId).prevUntil($("#tabs-content-0")).remove();
|
|
|
- }
|
|
|
- })
|
|
|
+ Utils.stopPropagation(e);
|
|
|
+ TabsManager.closeOthers();
|
|
|
+ });
|
|
|
|
|
|
- //删除所有页
|
|
|
+ // 关闭所有页
|
|
|
$(document).on('click', '.closeAllPage', function (e) {
|
|
|
- e.stopPropagation();
|
|
|
- //删除其它tabs
|
|
|
- $("#tabs-menu-0").siblings($("#tabs-menu-0")).remove();
|
|
|
- $("#tabs-content-0").siblings($("#tabs-content-0")).remove();
|
|
|
- currentTabMenuId = "tabs-menu-0";
|
|
|
- $("#tabs-menu-0").addClass("active")
|
|
|
- currentTabContentId = "tabs-content-0";
|
|
|
- $("#tabs-content-0").addClass("active")
|
|
|
- })
|
|
|
- // 呼出右侧列表
|
|
|
- $(document).on('click', '.dashboard,.user-info', function (e) {
|
|
|
- var bar = $(this).attr("tag");
|
|
|
- if($(".right-bar").hasClass(bar)){
|
|
|
- remove_node($(".right-bar").find($(".tpl-shade")));
|
|
|
- if ($("."+bar).css("right") == "-1500px"){
|
|
|
- $(".right-bar").css("right","-1500px");
|
|
|
- $("."+bar).css("right",0);
|
|
|
- $(".tpl-body").css("overflow","hidden");
|
|
|
- } else {
|
|
|
- $("."+bar).css("right","-1500px");
|
|
|
- $(".tpl-body").css("overflow","auto");
|
|
|
- }
|
|
|
- // shade($("."+bar).find(".right-bar-fluid"),true);
|
|
|
- stopPropagation(e);
|
|
|
- }else{
|
|
|
- msg("配置的tag目标为空");
|
|
|
+ Utils.stopPropagation(e);
|
|
|
+ TabsManager.closeAll();
|
|
|
+ });
|
|
|
+ // 刷新页面
|
|
|
+ $('.refresh').on('click', () => window.location.reload());
|
|
|
+
|
|
|
+ // 手风琴导航
|
|
|
+ $('.canvas-nav-item > a').on('click', function () {
|
|
|
+ if ($('.canvas-nav-item').hasClass('canvas-nav-small')) return;
|
|
|
+
|
|
|
+ const $parent = $(this).parent('li');
|
|
|
+ const $submenu = $(this).next('ul');
|
|
|
+
|
|
|
+ if ($submenu.is(':hidden')) {
|
|
|
+ $('.canvas-nav-item ul').slideUp(300);
|
|
|
+ $submenu.slideDown(300);
|
|
|
+ $parent.addClass('canvas-nav-show').siblings().removeClass('canvas-nav-show');
|
|
|
+ } else {
|
|
|
+ $submenu.slideUp(300);
|
|
|
+ $parent.removeClass('canvas-nav-show');
|
|
|
}
|
|
|
- })
|
|
|
- $(document).on('click', '.right-bar', function (e) {
|
|
|
- stopPropagation(e);
|
|
|
- })
|
|
|
- // 页面的点击冒泡
|
|
|
+ });
|
|
|
+
|
|
|
+ // 收放导航
|
|
|
+ $('.switch-list').on('click', function () {
|
|
|
+ const $icon = $(this).children('i');
|
|
|
+ if ($icon.hasClass('layui-icon-shrink-right')) {
|
|
|
+ $icon.removeClass('layui-icon-shrink-right').addClass('layui-icon-spread-left');
|
|
|
+ } else {
|
|
|
+ $icon.removeClass('layui-icon-spread-left').addClass('layui-icon-shrink-right');
|
|
|
+ }
|
|
|
+
|
|
|
+ $('.layout-body').toggleClass('canvas-nav-small');
|
|
|
+ if ($('.layout-body').hasClass('canvas-nav-small')) {
|
|
|
+ $('.canvas-nav-item').removeClass('canvas-nav-show').children('ul').removeAttr('style');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 右侧抽屉栏
|
|
|
+ $(document).on('click', '.dashboard, .user-info', function (e) {
|
|
|
+ const barClass = $(this).attr('tag');
|
|
|
+ if (!barClass) {
|
|
|
+ Message.msg('配置的 tag 目标为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ const $bar = $('.' + barClass);
|
|
|
+ if ($bar.length === 0) {
|
|
|
+ Message.msg('未找到对应右侧栏元素');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ Utils.stopPropagation(e);
|
|
|
+ if ($bar.css('right') === '-1500px') {
|
|
|
+ $('.right-bar').css('right', '-1500px');
|
|
|
+ $bar.css('right', 0);
|
|
|
+ $('.tpl-body').css('overflow', 'hidden');
|
|
|
+ } else {
|
|
|
+ $bar.css('right', '-1500px');
|
|
|
+ $('.tpl-body').css('overflow', 'auto');
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 点击遮罩关闭右侧栏
|
|
|
+ $(document).on('click', function () {
|
|
|
+ $('.right-bar').css('right', '-1500px');
|
|
|
+ $('.tpl-body').css('overflow', 'auto');
|
|
|
+ });
|
|
|
+
|
|
|
+ // 阻止右侧栏内部点击关闭
|
|
|
$(document).on('click', '.right-bar', function (e) {
|
|
|
- $(".right-bar").css("right","-1500px");
|
|
|
- })
|
|
|
- bind_event($(document),function(){
|
|
|
- $(".right-bar").css("right","-1500px");
|
|
|
- })
|
|
|
- // 点击更换页面主题
|
|
|
- bind_event($("#style-list"),function(e){
|
|
|
- var style = $(this).attr("theme-style");
|
|
|
- var styleName = $(".theme-style").attr("style-name");
|
|
|
- $(".theme-style").removeClass(styleName);
|
|
|
- $(".theme-style").attr("style-name",style);
|
|
|
- $(".theme-style").addClass(style);
|
|
|
- /*$.ajax({ //使用服务器端session保存操作
|
|
|
- url:"../index/view",
|
|
|
- type:"post",
|
|
|
- datatype:"json",
|
|
|
- data:{
|
|
|
- stylename:style // 传递到后台，用session保存即可
|
|
|
- },
|
|
|
- success:function(data){
|
|
|
- l(data);
|
|
|
- }
|
|
|
- });*/
|
|
|
- stopPropagation(e);
|
|
|
- },"click","li");
|
|
|
+ Utils.stopPropagation(e);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 主题切换
|
|
|
+ $('#style-list').on('click', 'li', function (e) {
|
|
|
+ const style = $(this).attr('canvas-theme-style');
|
|
|
+ if (!style) return;
|
|
|
+
|
|
|
+ const $theme = $('.canvas-theme-style');
|
|
|
+ const oldStyle = $theme.attr('style-name') || '';
|
|
|
+ $theme.removeClass(oldStyle).addClass(style).attr('style-name', style);
|
|
|
+
|
|
|
+ Utils.stopPropagation(e);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 全局提示绑定（示例）
|
|
|
+ $('[data-tips]').each(function () {
|
|
|
+ const text = $(this).data('tips');
|
|
|
+ $(this).on('mouseenter', () => Message.tips(this, text));
|
|
|
+ });
|
|
|
});
|
|
|
|
|
|
-layui.define(['layer', 'jquery', 'form', 'carousel', 'element', 'upload'], function (exports) {
|
|
|
- var $ = layui.$, $body = $('body');
|
|
|
- //弹出层组件
|
|
|
- var layer = layui.layer;
|
|
|
- //表单组件
|
|
|
- var form = layui.form;
|
|
|
- var element = layui.element;
|
|
|
- //轮播组件
|
|
|
- var carousel = layui.carousel;
|
|
|
- // 文件上传组件
|
|
|
- var upload = layui.upload;
|
|
|
-});
|
|
|
+// 暴露全局接口（如需在 HTML 中调用）
|
|
|
+window.fullScreen = Fullscreen.request;
|
|
|
+window.exitScreen = Fullscreen.exit;
|
|
|
+window.msg = Message.msg;
|
|
|
+window.getTips = Message.tips;
|
|
|
+window.toggleDisplay = Display.toggle;
|
|
|
+window.log = Utils.log;
|
|
|
+window.remove_node = Utils.removeNode;
|
|
|
+window.tabsManager = TabsManager
|
1