root
/
ok-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

submit: 完成读取缓存中的tab和左边菜单栏的同步定位（特别感谢H4acda大佬提供的思路）

master
zhizous 2019-12-14 02:11:23 +08:00
parent f63a2e656f
commit ed9449fbf2
3 changed files with 111 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
data/navs.json
View File

@ -7,6 +7,12 @@
"spread": true, "spread": true,
"isCheck": true "isCheck": true
}, },
{
"title": "测试",
"href": "pages/help/test.html",
"fontFamily": "ok-icon",
"icon": ""
},
{ {
"title": "控制台示例", "title": "控制台示例",
"href": "", "href": "",

55
lib/layui/lay/okmodules/okTab.js
View File

@ -18,18 +18,15 @@ String.prototype.format = function () {
} }
}; };
/**打开已经打开的tabMenu**/ /**打开缓存中的tabMenu**/
let OpenTabMenuFun = function ($, fun) { let OpenTabMenuFun = function ($, callback) {
var tabMenu = sessionStorage.getItem("tabMenu");//已经打开的tab页面 var tabMenu = sessionStorage.getItem("tabMenu");//已经打开的tab页面
var tabMenuLeft = sessionStorage.getItem("tabMenuLeft");//tab的位置
if (tabMenu) { if (tabMenu) {
tabMenu = JSON.parse(tabMenu); tabMenu = JSON.parse(tabMenu);
$("#tabTitle").html(tabMenu.tabTitle).animate({ $("#tabTitle").html(tabMenu.tabTitle);
left: tabMenuLeft
}, 50);
$("#tabContent").html(tabMenu.tabContent); $("#tabContent").html(tabMenu.tabContent);
if (typeof fun == 'function') { if (typeof callback == 'function') {
fun(); callback();
} }
} }
}; };
@ -43,13 +40,6 @@ function saveTabMenuFun($) {
tabContent: $("#tabContent").html() tabContent: $("#tabContent").html()
}); });
sessionStorage.setItem('tabMenu', tabMenu); sessionStorage.setItem('tabMenu', tabMenu);
sessionStorage.setItem('tabMenuLeft', $("#tabTitle").css('left'));
}
/**tab的位置**/
function saveTabMenuPosition(num) {
num = num || $("#tabTitle").css('left');
sessionStorage.setItem('tabMenuLeft', num);
} }
layui.define(["element", "jquery"], function (exports) { layui.define(["element", "jquery"], function (exports) {
@ -76,7 +66,6 @@ layui.define(["element", "jquery"], function (exports) {
$.extend(true, _this.tabConfig, option); //函数用于将一个或多个对象的内容合并到目标对象。http://www.runoob.com/jquery/misc-extend.html $.extend(true, _this.tabConfig, option); //函数用于将一个或多个对象的内容合并到目标对象。http://www.runoob.com/jquery/misc-extend.html
this.tabDelete(); //关闭导航页的操作 this.tabDelete(); //关闭导航页的操作
this.tab(); //tab导航切换时的操作 this.tab(); //tab导航切换时的操作
return _this; return _this;
}; };
@ -220,15 +209,10 @@ layui.define(["element", "jquery"], function (exports) {
left: -tempMove left: -tempMove
}, 50); }, 50);
} }
/**存储tab位置**/
saveTabMenuPosition(-tempMove);
} else { } else {
contEle.animate({ contEle.animate({
left: 0 left: 0
}, 50); }, 50);
//this.navMove("rightmax");
/**存储tab位置**/
saveTabMenuPosition(0);
} }
/** /**
@ -247,13 +231,14 @@ layui.define(["element", "jquery"], function (exports) {
}; };
// 点击导航页的操作 // 点击导航页的操作
okTab.prototype.tab = function () { okTab.prototype.tab = function (e) {
var that = this; var that = this;
var filter = this.tabConfig.tabFilter; var filter = this.tabConfig.tabFilter;
// "hello {0}".format("world"); // "hello {0}".format("world");
//`tab(${filter})` //`tab(${filter})`
element.on("tab({0})".format(filter), function (data) { element.on("tab({0})".format(filter), function (data) {
var index = data.index;//点击的某个tab索引 var index = data.index;//点击的某个tab索引
sessionStorage.setItem('lay-id', this.getAttribute('lay-id'));
var elSuper = $(".ok-tab"),//视窗元素 var elSuper = $(".ok-tab"),//视窗元素
elMove = $(".ok-tab-title"),//移动的元素 elMove = $(".ok-tab-title"),//移动的元素
elTabs = $(".ok-tab-title li"),//所有已存在的tab集合 elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
@ -267,9 +252,7 @@ layui.define(["element", "jquery"], function (exports) {
okTab.prototype.tabDelete = function () { okTab.prototype.tabDelete = function () {
var that = this; var that = this;
var filter = this.tabConfig.tabFilter; var filter = this.tabConfig.tabFilter;
//`tabDelete(${filter})`
element.on("tabDelete({0})".format(filter), function (data) { element.on("tabDelete({0})".format(filter), function (data) {
// that.navMove("right");
/**保存展开的tab**/ /**保存展开的tab**/
saveTabMenuFun($); saveTabMenuFun($);
}); });
@ -296,7 +279,6 @@ layui.define(["element", "jquery"], function (exports) {
if (_this.attr("target") == "_blank") { if (_this.attr("target") == "_blank") {
window.location.href = _this.attr("data-url"); window.location.href = _this.attr("data-url");
} else if (url != undefined) { } else if (url != undefined) {
var title = '';
var html = _this.html(); var html = _this.html();
// 去重复选项卡 // 去重复选项卡
/** /**
@ -335,15 +317,12 @@ layui.define(["element", "jquery"], function (exports) {
}); });
// 切换选项卡 // 切换选项卡
element.tabChange(tabFilter, tabId); element.tabChange(tabFilter, tabId);
this.navMove("rightmax"); this.navMove("rightmax");
/**保存展开的tab**/
// saveTabMenuFun($);
} }
}; };
//重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作) //重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作)
okTab.prototype.render = function (fun) { okTab.prototype.render = function (callback) {
var _this = this;//data var _this = this;//data
var _data = _this.tabConfig.data; var _data = _this.tabConfig.data;
if (_this.tabConfig.url) { if (_this.tabConfig.url) {
@ -357,9 +336,11 @@ layui.define(["element", "jquery"], function (exports) {
$(window).resize(function () { $(window).resize(function () {
$("#navBar").height($(window).height() - 245); $("#navBar").height($(window).height() - 245);
}); });
if (typeof fun == "function") { if (typeof callback == "function") {
fun(); callback();
} }
var lay_id = sessionStorage.getItem('lay-id');
element.tabChange(_this.tabConfig.tabFilter, lay_id);
}); });
/**打开缓存中的tab**/ /**打开缓存中的tab**/
OpenTabMenuFun($, function () { OpenTabMenuFun($, function () {
@ -376,8 +357,8 @@ layui.define(["element", "jquery"], function (exports) {
$(window).resize(function () { $(window).resize(function () {
$("#navBar").height($(window).height() - 245); $("#navBar").height($(window).height() - 245);
}); });
if (typeof fun == "function") { if (typeof callback == "function") {
fun(); callback();
} }
} else { } else {
alert("你的菜单配置有误请查看菜单配置说明"); alert("你的菜单配置有误请查看菜单配置说明");
@ -431,9 +412,6 @@ layui.define(["element", "jquery"], function (exports) {
} }
}); });
this.navMove('leftmax'); this.navMove('leftmax');
setTimeout(function () {
saveTabMenuPosition(0);
}, 500);
} else { } else {
layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ"); layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ");
return; return;
@ -444,9 +422,6 @@ layui.define(["element", "jquery"], function (exports) {
element.tabDelete(filter, $(j).attr("lay-id")); element.tabDelete(filter, $(j).attr("lay-id"));
}); });
this.navMove('leftmax'); this.navMove('leftmax');
setTimeout(function () {
saveTabMenuPosition(0);
}, 500);
break; break;
} }
element.render("tab", filter); element.render("tab", filter);
@ -525,12 +500,10 @@ layui.define(["element", "jquery"], function (exports) {
contEle.animate({ contEle.animate({
left: moveLeft left: moveLeft
}, 50); }, 50);
//saveTabMenuPosition(moveLeft);
} else { } else {
contEle.animate({ contEle.animate({
left: 0 left: 0
}, 50); }, 50);
saveTabMenuPosition(0);
} }
}; };

111
pages/help/test.html
View File

@ -6,33 +6,104 @@
<link rel="stylesheet" href="../../lib/layui/css/layui.css"/> <link rel="stylesheet" href="../../lib/layui/css/layui.css"/>
</head> </head>
<body> <body>
<form class="layui-form" action="">
dsafasdf <div class="layui-form-item">
<label class="layui-form-label">联动选择框</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled="">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联动选择框</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled="">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联动选择框</label>
<div class="layui-input-inline">
<select name="quiz1">
<option value="">请选择省</option>
<option value="浙江" selected="">浙江省</option>
<option value="你的工号">江西省</option>
<option value="你最喜欢的老师">福建省</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz2">
<option value="">请选择市</option>
<option value="杭州">杭州</option>
<option value="宁波" disabled="">宁波</option>
<option value="温州">温州</option>
<option value="温州">台州</option>
<option value="温州">绍兴</option>
</select>
</div>
<div class="layui-input-inline">
<select name="quiz3">
<option value="">请选择县/区</option>
<option value="西湖区">西湖区</option>
<option value="余杭区">余杭区</option>
<option value="拱墅区">临安市</option>
</select>
</div>
</div>
</form>
</body> </body>
</html> </html>
<script src="../../lib/layui/layui.js"></script> <script src="../../lib/layui/layui.js"></script>
<script type="text/javascript"> <script type="text/javascript">
layui.use(["jquery","okFly"], function () { layui.use(["jquery", "form", "okFly"], function () {
let $ = layui.jquery, let $ = layui.jquery,
form = layui.form,
okFly = layui.okFly; okFly = layui.okFly;
okFly.post("/test", {
a: "as",
b: 125
}).then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
okFly.get("/test", {
a: "as",
b: 125
}).then(function (res) {
console.log(res);
}).catch(function (err) {
console.log(err);
});
}); });
</script> </script>
<!-- <!--