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

data/navs.json

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

lib/layui/lay/okmodules/okTab.js

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

pages/help/test.html

@@ -6,33 +6,104 @@
 	<link rel="stylesheet" href="../../lib/layui/css/layui.css"/>
 </head>
 <body>
-
-dsafasdf
+<form class="layui-form" action="">
+	<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>
 </html>
 <script src="../../lib/layui/layui.js"></script>
 <script type="text/javascript">
-	layui.use(["jquery","okFly"], function () {
+	layui.use(["jquery", "form", "okFly"], function () {
 		let $ = layui.jquery,
+			form = layui.form,
 			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>
 <!--