Metrics
0
Watch 149 Star 539 Fork 126

肚脐眼笑得青痛 / ok-adminHTML/CSSGPL-3.0

Merged
!1 自动保存和恢复TAB状态

无木:master肚脐眼笑得青痛:master

无木 Created on: 2019-08-09 14:54
Reviewer: 1152471_bobi1234 1326874_instanceof

笨办法实现,直接保存了TAB和IFRAME的HTML,而不是直接保存TAB一打开的选项卡的状态……

0 comments, 1 participants

Show action logs Hide action logs
肚脐眼笑得青痛 merged Pull Request 2019-08-19 19:46
无木 updated description 2019-08-09 14:57
无木 assigned reviewer luozd 2019-08-09 14:54
无木 assigned reviewer hello 2019-08-09 14:54
无木 assigned reviewer 肚脐眼笑得青痛 2019-08-09 14:54

Sign in and comment

2019-08-09

(1)
3 changed files ,commit stats: +63 -60
@@ -98,7 +98,7 @@
<!-- 内容主体区域 -->
<div class="content-body">
<div class="layui-tab ok-tab" lay-filter="ok-tab" lay-allowClose="true" lay-unauto>
<div class="layui-tab ok-tab" id="mainnav" lay-filter="ok-tab" lay-allowClose="true" lay-unauto>
<!--<div class="okadmin-pagetabs"></div>-->
<div data-id="left" id="okLeftMove" class="layui-icon okadmin-tabs-control layui-icon-prev okNavMove"></div>
<div data-id="right" id="okRightMove" class="layui-icon okadmin-tabs-control layui-icon-next okNavMove"></div>
js/okadmin.js
@@ -11,13 +11,13 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
return data;
}
});
okTab.render(function () {
//左侧导航渲染完成之后的操作
$(".layui-this").click();
});//渲染左侧导航
// 添加新窗口
$("body").on("click", "#navBar .layui-nav-item a,#userInfo a", function () {
//如果不存在子级
@@ -26,7 +26,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
}
$(this).parent("li").siblings().removeClass("layui-nav-itemed");//关闭其他的二级标签
});
/**
* 左边菜单显隐功能
* @type {boolean}
@@ -35,7 +35,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
$(".layui-layout-admin").toggleClass("ok-left-hide");
$(this).find('i').toggleClass("ok-menu-hide");
});
//移动端的处理事件Start
$("body").on("click", ".layui-layout-admin .ok-left a[data-url],.ok-make", function () {
if ($(".layui-layout-admin").hasClass("ok-left-hide")) {
@@ -44,7 +44,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
}
});
//移动端的处理事件End
//tab左右移动
$("body").on("click", ".okNavMove", function () {
var moveId = $(this).attr("data-id");
@@ -52,18 +52,18 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
okTab.navMove(moveId, that);
// console.log(width);
});
//刷新当前tab页
$("body").on("click", ".ok-refresh", function () {
okTab.refresh(this);
});
//关闭tab页
$("body").on("click", "#tabAction a", function () {
var num = $(this).attr('data-num');
okTab.tabClose(num);
});
//全屏/退出全屏
$("body").on("keydown", function (event) {
event = event || window.event || arguments.callee.caller.arguments[0];
@@ -75,7 +75,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
$("#fullScreen").children("i").eq(0).addClass("okicon-screen-restore");
}
});
$("body").on("click", "#fullScreen", function () {
if ($(this).children("i").hasClass("okicon-screen-restore")) {
screenFun(2).then(function(){
@@ -87,7 +87,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
});
}
});
/**
* 全屏和退出全屏的方法
* @param num
@@ -98,7 +98,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
num = num || 1;
num = num * 1;
var docElm = document.documentElement;
switch (num) {
case 1:
if (docElm.requestFullscreen) {
@@ -123,12 +123,12 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
}
break;
}
return new Promise(function(res, rej){
res("返回值");
});
}
/**
* 系统公告
*/
@@ -139,7 +139,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
noticeFun();
}
}();
function noticeFun() {
var srcWidth = okUtils.getBodyWidth();
layer.open({
@@ -170,7 +170,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
}
});
}
/**
* 捐赠作者
*/
@@ -186,7 +186,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
}]
});
});
/**
* QQ群交流
*/
@@ -199,7 +199,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
}]
});
});
/**
* 退出操作
*/
@@ -208,7 +208,7 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
window.location = "./pages/login.html";
});
});
/**
* 锁定账户
*/
@@ -231,16 +231,5 @@ layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
});
});
});
// console.log(" _ _ _ \n" +
// " | | | | (_) \n" +
// " ___ | | _ _____ _____ __| |____ _ ____ \n" +
// " / _ \\| |_/ |_____|____ |/ _ | \\| | _ \\ \n" +
// "| |_| | _ ( / ___ ( (_| | | | | | | | |\n" +
// " \\___/|_| \\_) \\_____|\\____|_|_|_|_|_| |_|\n" +
// " \n" +
// "版本:v2.0\n" +
// "作者:bobi\n" +
// "邮箱:bobi1234@foxmail.com\n" +
// "描述:一个很赞的,扁平化风格的,响应式布局的后台管理模版,旨为后端程序员减压!");
});
lib/layui/lay/okmodules/okTab.js
@@ -2,7 +2,7 @@ var $;
String.prototype.format = function () {
//字符串占位符
//eg: var str1 = "hello {0}".format("world");
if (arguments.length == 0) return this;
if (arguments.length === 0) return this;
var param = arguments[0];
var s = this;
if (typeof (param) == 'object') {
@@ -32,6 +32,10 @@ layui.define(["element", "jquery"], function (exports) {
parseData:''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值)
}
};
var savedTabs=localStorage.getItem("nav_title_tabs_data");
if (savedTabs && savedTabs.length>0) {
$("#mainnav").html(savedTabs);
}
/**
* 导航初始化的操作(只执行一次)
* @param option 配置tabConfig参数
@@ -44,7 +48,7 @@ layui.define(["element", "jquery"], function (exports) {
this.tab(); //tab导航切换时的操作
return _this;
};
/**
* 定位tab位置
* @param superEle 父级元素
@@ -54,10 +58,10 @@ layui.define(["element", "jquery"], function (exports) {
var superEle = $(".ok-tab");//父级元素
contEle = $(contEle);//tab内容存放的父元素
ele = $(ele);//当前的tab
var menuSet = $(".okadmin-side a[lay-id]");//获取所有菜单集合
var thatLayId = ele.attr('lay-id');
var contWidth = contEle.width(),//父级元素宽度
superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度
subWidth = ele.outerWidth(),//当前元素宽度
@@ -65,7 +69,7 @@ layui.define(["element", "jquery"], function (exports) {
leftWidth = 0,//左边距离
postLeft = Math.abs(contEle.position().left);//当前移动的位置
var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度
/*console.log("maxMoveWidth:" + maxMoveWidth);
console.log("superWidth:" + superWidth);
console.log("contWidth:" + contWidth);*/
@@ -78,7 +82,7 @@ layui.define(["element", "jquery"], function (exports) {
*/
var showPost = leftWidth - postLeft;//当前点击的元素位置(显示区域的位置)
var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半
if (halfPlace < showPost) {//从右往左移动
var tempMove = leftWidth - subWidth;//预留一部分距离
if (tempMove > maxMoveWidth) {//当前移动的距离超过最大可移动的宽度
@@ -103,7 +107,7 @@ layui.define(["element", "jquery"], function (exports) {
}, 50);
//this.navMove("rightmax");
}
/**
* 左侧菜单的样式和多级菜单的展开
*/
@@ -117,7 +121,7 @@ layui.define(["element", "jquery"], function (exports) {
}
}
};
// 点击导航页的操作
okTab.prototype.tab = function () {
var that = this;
@@ -131,9 +135,20 @@ layui.define(["element", "jquery"], function (exports) {
elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
thatElem = $(elTabs[index]);//当前元素
that.positionTab(elMove, thatElem);
var url=thatElem.find("strong").data("url");
location.hash=url?url:'';
that.saveStatus();
});
element.on("tabDelete({0})".format(filter),function(data){
that.saveStatus();
});
};
//保存TAB的当前选项卡
okTab.prototype.saveStatus = function () {
localStorage.setItem("nav_title_tabs_data",$("#mainnav").html());
};
//删除tab页的操作(此处为点击关闭按钮的操作)
okTab.prototype.tabDelete = function () {
var that = this;
@@ -143,12 +158,11 @@ layui.define(["element", "jquery"], function (exports) {
// that.navMove("right");
});
};
//右侧内容nav操作添加tab页
okTab.prototype.tabAdd = function (_thisa) {
var that = this;
var _this = $(_thisa).clone(true);//拷贝dom(js: _this.cloneNode(true) )
var openTabNum = that.tabConfig.openTabNum;
var tabFilter = that.tabConfig.tabFilter;
var url = _this.attr("data-url");//选项卡的页面路径
@@ -156,9 +170,9 @@ layui.define(["element", "jquery"], function (exports) {
var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量
var iframes = $(".ok-tab-content iframe");
var isClose = _this.attr('is-close') || "true";
_this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId + "></strong>");
_this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId+" data-url='"+url+"'" + "></strong>");
if (_this.children("i").length < 1) {
_this.prepend("<i class='layui-icon'></i>");
}
@@ -189,7 +203,7 @@ layui.define(["element", "jquery"], function (exports) {
return;
}
}
if (thatTabNum >= openTabNum) {
layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的!');
return;
@@ -202,13 +216,13 @@ layui.define(["element", "jquery"], function (exports) {
content: contentIframe,
id: tabId
});
// 切换选项卡
element.tabChange(tabFilter, tabId);
this.navMove("rightmax");
}
};
//生成左侧菜单
var temp = "";
okTab.prototype.navBar = function (strData) {
@@ -234,7 +248,7 @@ layui.define(["element", "jquery"], function (exports) {
}
return ulItem;
};
/**
* 递归生成菜单
* @param data 数据
@@ -295,7 +309,7 @@ layui.define(["element", "jquery"], function (exports) {
return;
}
}
//重新对导航进行渲染(此处有个回调函数,主要用作渲染完成之后的操作)
okTab.prototype.render = function (fun) {
var _this = this;//data
@@ -332,7 +346,7 @@ layui.define(["element", "jquery"], function (exports) {
alert("你的菜单配置有误请查看菜单配置说明");
}
};
//刷新当前tab页
okTab.prototype.refresh = function (_this) {
if (!($(_this).hasClass("refreshThis"))) {
@@ -345,7 +359,7 @@ layui.define(["element", "jquery"], function (exports) {
layer.msg("客官请不要频繁点击哦!我会反应不过来的");
}
};
/**
* 关闭tab标签页操作
* @param num 默认为1
@@ -359,7 +373,7 @@ layui.define(["element", "jquery"], function (exports) {
var that = this;
let openTabs = $('.ok-tab-title > li strong[lay-id]').not('strong[is-close=false]'),//获取已打开的tab元素(除开不会被关闭的导航)
thatLayID = $('.ok-tab-title > li.layui-this strong[lay-id]').not('strong[is-close=false]').attr("lay-id") || '';//获取当前打开的tab元素ID(除开不会被关闭的导航)
var filter = that.tabConfig.tabFilter;
if (thatLayID.length < 1 && num == 1) {
layer.msg("您不能关闭当前页哦 (๑╹◡╹)ノ");
@@ -392,7 +406,7 @@ layui.define(["element", "jquery"], function (exports) {
}
element.render("tab", filter);
};
/**
* 移动标签导航
* @param moveId
@@ -408,11 +422,11 @@ layui.define(["element", "jquery"], function (exports) {
contWidth = parseInt(contEle.width()),//移动元素的总宽度
elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
postLeft = contEle.position().left;//当前移动的位置
/*elTabs.each(function (i, j) {
moveWidth += $(j).outerWidth() * 1;
});*/
var movePost = moveId.toLowerCase().indexOf("left") < 0 ? -1 : 1;//移动方向
var step = parseInt((superWidth * 0.25 < 20 ? 20 : superWidth * 0.25));//移动步长
var moveLeft = postLeft + step * movePost;
@@ -470,10 +484,10 @@ layui.define(["element", "jquery"], function (exports) {
}, 50);
}
};
exports("okTab", function (option) {
return new okTab().init(option);
});
});
HTML/CSS
1
https://gitee.com/bobi1234/ok-admin.git
git@gitee.com:bobi1234/ok-admin.git

Help Search