Tab 记忆

component/pear/css/pear-module/cardTable.css

@@ -0,0 +1,92 @@
+.project-list-item {
+	background-color: #fff;
+	border-radius: 4px;
+	cursor: pointer;
+	transition: all .2s;
+}
+
+.project-list-item:hover {
+	box-shadow: 2px 0 4px rgba(0, 21, 41, .35);
+}
+
+.project-list-item .project-list-item-cover {
+	width: 100%;
+	height: 180px;
+	display: block;
+	border-top-left-radius: 4px;
+	border-top-right-radius: 4px;
+}
+
+.project-list-item-body {
+	padding: 20px;
+	border: 1px solid #e8e8e8;
+}
+
+.project-list-item .project-list-item-body>h2 {
+	font-size: 16px;
+	color: #333;
+	margin-bottom: 12px;
+}
+
+.project-list-item .project-list-item-text {
+	height: 40px;
+	overflow: hidden;
+	margin-bottom: 12px;
+}
+
+.project-list-item .project-list-item-desc {
+	position: relative;
+}
+
+.project-list-item .project-list-item-desc .time {
+	color: #999;
+	font-size: 12px;
+}
+
+.project-list-item .project-list-item-desc .ew-head-list {
+	position: absolute;
+	right: 0;
+	top: 0;
+}
+
+.ew-head-list .ew-head-list-item:first-child {
+	margin-left: 0;
+}
+
+.ew-head-list .ew-head-list-item {
+	width: 22px;
+	height: 22px;
+	border-radius: 50%;
+	border: 1px solid #fff;
+	margin-left: -10px;
+}
+
+.ew-head-list .ew-head-list-item {
+	width: 22px;
+	height: 22px;
+	border-radius: 50%;
+	border: 1px solid #fff;
+	margin-left: -10px;
+}
+
+.cloud-card-component {
+	padding: 20px;
+}
+
+.cloud-card-component .layui-laypage .layui-laypage-curr .layui-laypage-em {
+	border-radius: 0px !important;
+}
+.ew-table-loading {
+    padding: 10px 0;
+    text-align: center;
+}
+.ew-table-loading > i {
+    color: #999;
+    font-size: 30px;
+}
+.ew-table-loading.ew-loading-float {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+}

component/pear/modules/admin.js

@@ -109,6 +109,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
 						tool: true,
 						width: '100%',
 						height: '100%',
+						session: param.tab.session,
 						index: 0,
 						tabMax: param.tab.tabMax,
 						closeEvent: function(id) {
@@ -119,7 +120,13 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
 							url: param.tab.index.href,
 							title: param.tab.index.title,
 							close: false
-						}]
+						}],
+						success: function(id){
+							setTimeout(function(){
+								sideMenu.selectItem(id);
+								bodyTab.positionTab();
+							},500)
+						}
 					});
 					bodyTab.click(function(id) {
 						if (!param.tab.keepState) {

component/pear/modules/cardTable.js

@@ -0,0 +1,209 @@
+layui.define(['table', 'laypage','jquery', 'element'], function(exports) {
+	"use strict";
+	var filePath = layui.cache.modules.cardTable
+		.substr(0, layui.cache.modules.cardTable.lastIndexOf('/'));
+	// 引入tablePlug.css
+	layui.link(filePath + '/cardTable.css');
+	var MOD_NAME = 'cardTable',
+		$ = layui.jquery,
+		element = layui.element,
+		laypage = layui.laypage;
+	var _instances = {};  // 记录所有实例
+	/* 默认参数 */
+	var defaultOption = {
+		elem: "#currentTableId",// 构建的模型
+		url: "",// 数据 url 连接
+		loading: true,//是否加载
+		limit: 0, //每页数量默认是每行数量的双倍
+		linenum: 4, //每行数量 2,3,4,6
+		currentPage: 1,//当前页
+		limits:[],     //页码
+		page: true, //是否分页
+		layout: ['count', 'prev', 'page', 'next','limit', 'skip'],//分页控件
+		request: {
+			pageName: 'page' //页码的参数名称，默认：page
+			, limitName: 'limit' //每页数据量的参数名，默认：limit
+			, idName: 'id'       //主键名称，默认：id
+			, titleName: 'title' //标题名称，默认：title
+			, imageName: 'image' //图片地址，默认：image
+			, remarkName: 'remark' //备注名称，默认：remark
+			, timeName: 'time' //时间名称，默认：time
+		},
+		response: {
+			statusName: 'code' //规定数据状态的字段名称，默认：code
+			, statusCode: 0 //规定成功的状态码，默认：0
+			, msgName: 'msg' //规定状态信息的字段名称，默认：msg
+			, countName: 'count' //规定数据总数的字段名称，默认：count
+			, dataName: 'data' //规定数据列表的字段名称，默认：data
+		},
+		// 完 成 函 数
+		done: function () {
+
+		}
+	};
+	var card = function(opt) {
+		_instances[opt.elem.substring(1)] = this;
+		this.reload(opt);
+	};
+	/** 参数设置 */
+	card.prototype.initOptions = function (opt) {
+		this.option = $.extend(true, {}, defaultOption, opt);
+		if (!this.option.limit || this.option.limit == 0) {
+			this.option.limit = this.option.linenum * 2;
+		}
+		if (!this.option.limits || this.option.limits.length == 0) {
+			this.option.limits = [this.option.limit];
+        }
+	};
+	card.prototype.init = function () {
+		var option = this.option;
+		var url = option.url;
+		var html = "";
+		html += option.loading == true ? '      <div class="ew-table-loading">' : '      <div class="ew-table-loading layui-hide">';
+		html += '         <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>';
+		html += '      </div>';
+		$(option.elem).html(html);
+		// 根 据 请 求 方 式 获 取 数 据
+		html = "";
+		if (url != null) {
+			if (!!option.page) {
+				url = url + '&' + option.request.limitName + '=' + option.limit;
+				url = url + '&' + option.request.pageName + '=' + option.currentPage;
+			}
+			if (!!option.where) {
+				for (let key in option.where) {
+					url = url + '&' + key + '=' + option.where[key];
+				}
+            }
+			var data = getData(url);
+			data = initData(data, option);
+			if (data.code != option.response.statusCode) {
+				html = "<p>" + data.msg + "</p>";
+			}
+			else {
+				option.data = data.data;
+				option.count = data.count;
+				// 根据结果进行相应结构的创建
+				if (!!option.data && option.data.length > 0) {
+					html = createComponent(option.elem.substring(1),option.linenum,data.data);
+					html += "<div id='cardpage'></div>";
+				}
+				else {
+					html = "<p>没有数据</p>";
+				}
+			}
+		}
+		$(option.elem).html(html);
+		if (option.page) {
+			// 初始化分页组件
+			laypage.render({
+				elem: 'cardpage'
+				, count: option.count, limit: option.limit, limits:option.limits, curr: option.currentPage
+				, layout: option.layout
+				, jump: function (obj, first) {
+					option.limit = obj.limit;
+					option.currentPage = obj.curr;
+					if (!first) {
+						_instances[option.elem.substring(1)].reload(option);
+					}
+				}
+			});
+        }
+	}
+	card.prototype.reload = function (opt) {
+		this.initOptions(this.option ? $.extend(true, this.option, opt) : opt);
+		this.init();  // 初始化表格
+    }
+
+	function createComponent(elem,linenum,data) {
+		var html = "<div class='cloud-card-component'>"
+		var content = createCards(elem, linenum,data);
+        var page = "";
+        content = content + page;
+        html += content + "</div>"
+        return html;
+	}
+	/** 创建指定数量的卡片 */
+	function createCards(elem, linenum,data) {	
+		var content = "<div class='layui-row layui-col-space30'>";
+		for (var i = 0; i < data.length; i++) {
+			content += createCard(elem, linenum,data[i],i);
+        }
+		content += "</div>";
+		return content;
+	}
+	/** 创建一个卡片 */
+	function createCard(elem, linenum, item, no) {
+		var line = 12 / linenum;
+		var card =
+			'<div id=' + item.id + ' onclick="cardTableCheckedCard(' + elem + ',this)" class="layui-col-md' + line + ' ew-datagrid-item" data-index="' + no+'" data-number="1"> <div class="project-list-item"> <img class="project-list-item-cover" src="' +item.image + '"> <div class="project-list-item-body"> <h2>' + item.title + '</h2> <div class="project-list-item-text layui-text">' + item.remark + '</div> <div class="project-list-item-desc"> <span class="time">' +item.time + '</span> <div class="ew-head-list"></div> </div> </div > </div > </div > '
+		return card;
+	}
+	/** 格式化返回参数 */
+	function initData(tempData, option) {
+		var data = {};
+		data.code = tempData[option.response.statusName];
+		data.msg = tempData[option.response.msgName];
+		data.count = tempData[option.response.countName];
+		var dataList = tempData[option.response.dataName];
+		alert(JSON.stringify(dataList));
+		data.data = [];
+		for (var i = 0; i < dataList.length; i++) {
+			var item = {};
+			item.id = dataList[i][option.request.idName];
+			item.image = dataList[i][option.request.imageName];
+			item.title = dataList[i][option.request.titleName];
+			item.remark = dataList[i][option.request.remarkName];
+			item.time = dataList[i][option.request.timeName];
+			data.data.push(item);
+		}
+		return data;
+    }
+	/** 同 步 请 求 获 取 数 据 */
+	function getData(url) {
+		$.ajaxSettings.async = false;
+		var data = null;
+
+		$.get(url, function (result) {
+			data = result;
+		});
+
+		$.ajaxSettings.async = true;
+		return data;
+	}
+	//卡片点击事件
+	window.cardTableCheckedCard = function (elem,obj) {
+		$(obj).addClass('layui-table-click').siblings().removeClass('layui-table-click');
+		var item = {};
+		item.id = obj.id;
+		item.image = $(obj).find('.project-list-item-cover')[0].src;
+		item.title = $(obj).find('h2')[0].innerHTML;
+		item.remark = $(obj).find('.project-list-item-text')[0].innerHTML;
+		item.time = $(obj).find('.time')[0].innerHTML;
+		_instances[elem.id].option.checkedItem = item;
+	}
+	/** 对外提供的方法 */
+	var tt = {
+		/* 渲染 */
+		render: function (options) {
+			return new card(options);
+		},
+		/* 重载 */
+		reload: function (id, opt) {
+			_instances[id].reload(opt);
+		},
+		/* 获取选中参数 */
+		getChecked: function (id) {
+			var option = _instances[id].option;
+			var data = option.checkedItem;
+			var item = {};
+			item[option.request.idName] = data.id;
+			item[option.request.imageName] = data.image;
+			item[option.request.titleName] = data.title;
+			item[option.request.remarkName] = data.remark;
+			item[option.request.timeName] = data.time;
+			return item;
+		},
+	}
+	exports(MOD_NAME, tt);
+})

component/pear/modules/tab.js

@@ -9,6 +9,8 @@ layui.define(['jquery', 'element'], function(exports) {
 		this.option = opt;
 	};
 	
+	var tabData = new Array();
+	var tabDataCurrent = 0;
 
 	pearTab.prototype.render = function(opt) {
 		//默认配置值
@@ -21,46 +23,57 @@ layui.define(['jquery', 'element'], function(exports) {
 			width: opt.width,
 			height: opt.height,
 			tabMax: opt.tabMax,
-			closeEvent: opt.closeEvent
+			session: opt.session?opt.session:false,
+			closeEvent: opt.closeEvent,
+			success: opt.success?opt.success:function(id){}
+		}
+		
+		// 初始化，检索 session 是否开启
+		if(option.session){
+			// 替换 opt.data 数据
+			if(sessionStorage.getItem(option.elem+"-pear-tab-data")!=null){
+				tabData = JSON.parse(sessionStorage.getItem(option.elem+"-pear-tab-data"));
+				option.data = JSON.parse(sessionStorage.getItem(option.elem+"-pear-tab-data"));
+				tabDataCurrent = sessionStorage.getItem(option.elem+"-pear-tab-data-current");
+				tabData.forEach(function(item,index){
+					if(item.id == tabDataCurrent){
+						option.index = index;
+					}
+				})
+			}else{
+				tabData = opt.data;
+			}
 		}
 		
 		var tab = createTab(option);
-
 		$("#" + option.elem).html(tab);
-
 		$(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-prev").click(function() {
 			rollPage("left", option);
 		})
-
 		$(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-next").click(function() {
 			rollPage("right", option);
 		})
-
 		element.init();
-
 		toolEvent(option);
-
 		$("#" + option.elem).width(opt.width);
 		$("#" + option.elem).height(opt.height);
 		$("#" + option.elem).css({
 			position: "relative"
 		});
-
 		closeEvent(option);
 		
+		option.success(sessionStorage.getItem(option.elem+"-pear-tab-data-current"));
+		// 执行回调
 		return new pearTab(option);
 	}
 
 	pearTab.prototype.click = function(callback) {
-
 		var elem = this.option.elem;
-
+		var option = this.option;
 		element.on('tab(' + this.option.elem + ')', function(data) {
-
 			var id = $("#" + elem + " .layui-tab-title .layui-this").attr("lay-id");
-
+			sessionStorage.setItem(option.elem+"-pear-tab-data-current",id);
 			callback(id);
-
 		});
 	}
 
@@ -80,9 +93,7 @@ layui.define(['jquery', 'element'], function(exports) {
 	}
 
 	pearTab.prototype.addTab = function(opt) {
-
 		var title = '';
-
 		if (opt.close) {
 			title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
 				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>';
@@ -96,6 +107,9 @@ layui.define(['jquery', 'element'], function(exports) {
 				opt.url + '" style="width:100%;height:100%;"></iframe>',
 			id: opt.id
 		});
+		tabData.push(opt);
+		sessionStorage.setItem(this.option.elem+"-pear-tab-data",JSON.stringify(tabData));
+		sessionStorage.setItem(this.option.elem+"-pear-tab-data-current",opt.id);
 		element.tabChange(this.option.elem, opt.id);
 	}
 	var index = 0;
@@ -152,6 +166,8 @@ layui.define(['jquery', 'element'], function(exports) {
 					opt.url + '" style="width:100%;height:100%;"></iframe>',
 				id: opt.id
 			});
+			tabData.push(opt);
+			sessionStorage.setItem(elem+"-pear-tab-data",JSON.stringify(tabData));
 		} else {
 			var isData = false;
 			$.each($(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title li[lay-id]"), function() {
@@ -184,45 +200,37 @@ layui.define(['jquery', 'element'], function(exports) {
 						opt.url + '" style="width:100%;height:100%;"></iframe>',
 					id: opt.id
 				});
+				tabData.push(opt);
+				sessionStorage.setItem(elem+"-pear-tab-data",JSON.stringify(tabData));
+			
 			}
 		}
+		sessionStorage.setItem(elem+"-pear-tab-data-current",opt.id);
 		element.tabChange(elem, opt.id);
 	}
 
-
 	/** 添 加 唯 一 选 项 卡 */
 	pearTab.prototype.addTabOnly = function(opt, time) {
-
 		var title = '';
-
 		if (opt.close) {
-
 			title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
-				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
+				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>';
-
 		} else {
-
 			title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
-				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
+				'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>';
-
 		}
-
 		if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length <= 0) {
-
 			if (time != false && time != 0) {
-
 				var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
 					'<div class="ball-loader">' +
 					'<span></span><span></span><span></span><span></span>' +
 					'</div>' +
-					'</div>'
+					'</div>';
-
 				$("#" + this.option.elem).find(".pear-tab").append(load);
 				var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index);
 				pearLoad.css({
 					display: "block"
 				});
-
 				setTimeout(function() {
 					pearLoad.fadeOut(500);
 				}, time);
@@ -234,10 +242,11 @@ layui.define(['jquery', 'element'], function(exports) {
 					opt.url + '" style="width:100%;height:100%;"></iframe>',
 				id: opt.id
 			});
+			tabData.push(opt);
+			sessionStorage.setItem(this.option.elem+"-pear-tab-data",JSON.stringify(tabData));
+			sessionStorage.setItem(this.option.elem+"-pear-tab-data-current",opt.id);
 		} else {
-
 			var isData = false;
-
 			//查询当前选项卡数量
 			if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length >= this.option.tabMax) {
 				layer.msg("最多打开" + this.option.tabMax + "个标签页", {
@@ -247,18 +256,13 @@ layui.define(['jquery', 'element'], function(exports) {
 				});
 				return false;
 			}
-
 			$.each($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]"), function() {
-
 				if ($(this).attr("lay-id") == opt.id) {
-
 					isData = true;
 				}
 			})
 			if (isData == false) {
-
 				if (time != false && time != 0) {
-
 					var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
 						'<div class="ball-loader">' +
 						'<span></span><span></span><span></span><span></span>' +
@@ -270,31 +274,30 @@ layui.define(['jquery', 'element'], function(exports) {
 					pearLoad.css({
 						display: "block"
 					});
-
 					setTimeout(function() {
 						pearLoad.fadeOut(500);
 					}, time);
 					index++;
 				}
-
 				element.tabAdd(this.option.elem, {
 					title: title,
 					content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
 						opt.url + '" style="width:100%;height:100%;"></iframe>',
 					id: opt.id
 				});
+				tabData.push(opt);
+				sessionStorage.setItem(this.option.elem+"-pear-tab-data",JSON.stringify(tabData));
+				sessionStorage.setItem(this.option.elem+"-pear-tab-data-current",opt.id);
 			}
 		}
 		element.tabChange(this.option.elem, opt.id);
+		sessionStorage.setItem(this.option.elem+"-pear-tab-data-current",opt.id);
 	}
 
-
 	// 刷 新 指 定 的 选 项 卡
 	pearTab.prototype.refresh = function(time) {
-
 		// 刷 新 指 定 的 选 项 卡
 		if (time != false && time != 0) {
-
 			var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
 				'<div class="ball-loader">' +
 				'<span></span><span></span><span></span><span></span>' +
@@ -321,7 +324,7 @@ layui.define(['jquery', 'element'], function(exports) {
 		}
 	}
 	
-	function tabDelete(elem, id, callback) {
+	function tabDelete(elem, id, callback,option) {
 
 		//根据 elem id 来删除指定的 layui title li
 		var tabTitle = $(".layui-tab[lay-filter='" + elem + "']").find(".layui-tab-title");
@@ -329,9 +332,7 @@ layui.define(['jquery', 'element'], function(exports) {
 		// 删除指定 id 的 title
 		var removeTab = tabTitle.find("li[lay-id='" + id + "']");
 		var nextNode = removeTab.next("li");
-
         if(!removeTab.hasClass("layui-this")){
-			
 			removeTab.remove();
 			var tabContent = $(".layui-tab[lay-filter='" + elem + "']").find("iframe[id='" + id + "']").parent();
 			tabContent.remove();
@@ -339,72 +340,57 @@ layui.define(['jquery', 'element'], function(exports) {
 		}
 
 		var currId;
-
 		if (nextNode.length) {
-
 			nextNode.addClass("layui-this");
 			currId = nextNode.attr("lay-id");
 			$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
-
 		} else {
-
 			var prevNode = removeTab.prev("li");
 			prevNode.addClass("layui-this");
 			currId = prevNode.attr("lay-id");
 			$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
-
 		}
 		callback(currId);
+		tabData = JSON.parse(sessionStorage.getItem(elem+"-pear-tab-data"));
+		tabDataCurrent = sessionStorage.getItem(elem+"-pear-tab-data-current");
+		tabData = tabData.filter(function(item){
+			return item.id!=id;
+		})
+		sessionStorage.setItem(elem+"-pear-tab-data",JSON.stringify(tabData));
+		sessionStorage.setItem(elem+"-pear-tab-data-current",currId);	
 		removeTab.remove();
 		// 删除 content
 		var tabContent = $(".layui-tab[lay-filter='" + elem + "']").find("iframe[id='" + id + "']").parent();
+		// 删除
 		tabContent.remove();
 	}
 
 	function createTab(option) {
 
 		var type = "";
-		
 		var types = option.type+" ";
-
 		if (option.roll == true) {
-
 			type = "layui-tab-roll";
 		}
-
 		if (option.tool != false) {
 			type = "layui-tab-tool";
 		}
-
 		if (option.roll == true && option.tool != false) {
 			type = "layui-tab-rollTool";
 		}
-
 		var tab = '<div class="pear-tab ' + types + type + ' layui-tab" lay-filter="' + option.elem + '" lay-allowClose="true">';
-
 		var title = '<ul class="layui-tab-title">';
-
 		var content = '<div class="layui-tab-content">';
-
+		var control = '<div class="layui-tab-control"><li class="layui-tab-prev layui-icon layui-icon-left"></li><li class="layui-tab-next layui-icon layui-icon-right"></li><li class="layui-tab-tool layui-icon layui-icon-down"><ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="javascript:;"></a><dl class="layui-nav-child">';
-		var control =
-			'<div class="layui-tab-control"><li class="layui-tab-prev layui-icon layui-icon-left"></li><li class="layui-tab-next layui-icon layui-icon-right"></li><li class="layui-tab-tool layui-icon layui-icon-down"><ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="javascript:;"></a><dl class="layui-nav-child">';
 
 		// 处 理 选 项 卡 头 部
-
 		var index = 0;
-
 		$.each(option.data, function(i, item) {
-
 			var TitleItem = '';
-
 			if (option.index == index) {
-
 				TitleItem += '<li lay-id="' + item.id + '" class="layui-this"><span class="pear-tab-active"></span>';
-
 			} else {
-
 				TitleItem += '<li lay-id="' + item.id + '" ><span class="pear-tab-active"></span>';
-
 			}
 
 			if (item.close) {
@@ -414,26 +400,19 @@ layui.define(['jquery', 'element'], function(exports) {
 				// 当 前 选 项 卡 不 允 许 关 闭
 				TitleItem += '<span class="disable-close">' + item.title + '</span>';
 			}
-
 			TitleItem += '<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li>';
-
 			title += TitleItem;
-
-
 			if (option.index == index) {
 
 				// 处 理 显 示 内 容
 				content += '<div class="layui-show layui-tab-item"><iframe id="' + item.id + '" data-frameid="' + item.id +
 					'"  src="' + item.url +
 					'" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;"></iframe></div>'
-
 			} else {
-
 				// 处 理 显 示 内 容
 				content += '<div class="layui-tab-item"><iframe id="' + item.id + '" data-frameid="' + item.id + '"  src="' +
 					item.url +
 					'" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;"></iframe></div>'
-
 			}
 			index++;
 		});
@@ -455,17 +434,12 @@ layui.define(['jquery', 'element'], function(exports) {
 
 	function rollPage(d, option) {
 		var $tabTitle = $('#' + option.elem + '  .layui-tab-title');
-
 		var left = $tabTitle.scrollLeft();
-
 		if ('left' === d) {
-
 			$tabTitle.animate({
 				scrollLeft: left - 450
 			}, 200);
-
 		} else {
-
 			$tabTitle.animate({
 				scrollLeft: left + 450
 			}, 200);
@@ -475,7 +449,7 @@ layui.define(['jquery', 'element'], function(exports) {
 	function closeEvent(option) {
 		$(".layui-tab[lay-filter='" + option.elem + "']").on("click", ".layui-tab-close", function() {
 			var layid = $(this).parent().attr("lay-id");
-			tabDelete(option.elem, layid, option.closeEvent);
+			tabDelete(option.elem, layid, option.closeEvent,option);
 		})
 	}
 
@@ -485,7 +459,7 @@ layui.define(['jquery', 'element'], function(exports) {
 			var currentTab = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this");
 			if (currentTab.find("span").is(".able-close")) {
 				var currentId = currentTab.attr("lay-id");
-				tabDelete(option.elem, currentId, option.closeEvent);
+				tabDelete(option.elem, currentId, option.closeEvent,option);
 			}
 
 		})
@@ -496,7 +470,7 @@ layui.define(['jquery', 'element'], function(exports) {
 			$.each(tabtitle, function(i) {
 				if ($(this).attr("lay-id") != currentId) {
 					if ($(this).find("span").is(".able-close")) {
-						tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent);
+						tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent,option);
 					}
 				}
 			})
@@ -507,7 +481,7 @@ layui.define(['jquery', 'element'], function(exports) {
 			var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
 			$.each(tabtitle, function(i) {
 				if ($(this).find("span").is(".able-close")) {
-					tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent);
+					tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent,option);
 				}
 			})
 		})

component/pear/pear.all.js

@@ -43,7 +43,8 @@ layui.config({
 	yaml:"yaml",			// yaml 解析组件
 	context: "context",		// 上下文组件
 	http: "http",			// ajax请求组件
-	theme: "theme"			// 主题转换
+	theme: "theme",			// 主题转换
+	cardTable: "cardTable"
 }).use(['layer', 'theme'], function () {
 	
 	layui.theme.changeTheme(window, false);

component/pear/pear.js

@@ -43,8 +43,8 @@ layui.config({
 	yaml:"yaml",			// yaml 解析组件
 	context: "context",		// 上下文组件
 	http: "http",			// ajax请求组件
-	theme: "theme"			// 主题转换
+	theme: "theme",			// 主题转换
+	cardTable: "cardTable"
 }).use(['layer', 'theme'], function () {
-	
 	layui.theme.changeTheme(window, false);
 });

config/pear.config.yml

@@ -23,6 +23,8 @@ tab:
   muiltTab: true
   ## 切换选项卡时，是否刷新页面状态
   keepState: true
+  ## 是否开启 Tab 记忆
+  session: true
   ## 最大可打开的选项卡数量
   tabMax: "30"
   ## 默认选项卡数据

index.html

@@ -85,7 +85,6 @@
 				image.onload = function(){
 					$(".layui-nav-img").attr("src", convert.imageToBase64(image));
 				}
-				
 				// 框架初始化时会读取 根目录下 pear.config.yml 文件作为初始化配置
 				// 你可以通过 admin.setConfigPath 方法修改配置文件位置
 				// 你可以通过 admin.setConfigType 方法修改配置文件类型

view/document/card.html

@@ -42,57 +42,14 @@
 		    </div>
 		</body>
 		
-		<script type="text/html" id="user-toolbar">
-		    <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
-		        <i class="layui-icon layui-icon-add-1"></i>
-		        新增
-		    </button>
-		    <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
-		        <i class="layui-icon layui-icon-delete"></i>
-		        删除
-		    </button>
-		</script>
-		
-		<script type="text/html" id="user-bar">
-		    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
-		    <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
-		</script>
-		
-		<script type="text/html" id="user-enable">
-		    <input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="user-enable" {{ d.enable == 0 ? 'checked' : '' }}>
-		</script>
-		
-		<script type="text/html" id="user-sex">
-		    {{#if (d.sex == 1) { }}
-		    <span>男</span>
-		    {{# }else if(d.sex == 2){ }}
-		    <span>女</span>
-		    {{# } }}
-		</script>
-		
-		<script type="text/html" id="user-login">
-		    {{#if (d.login == 0) { }}
-		    <span>在线</span>
-		    {{# }else if(d.sex == 1){ }}
-		    <span>离线</span>
-		    {{# } }}
-		</script>
-		
-		<script type="text/html" id="user-createTime">
-		    {{layui.util.toDateString(d.createTime, 'yyyy-MM-dd')}}
-		</script>
 		
 		<script src="../../component/layui/layui.js"></script>
 		<script src="../../component/pear/pear.js"></script>
 		<script>
-		    layui.use(['table','form','jquery','card'],function () {
+		    layui.use(['form','card'],function () {
-		        let table = layui.table;
 		        let form = layui.form;
-		        let $ = layui.jquery;
 				let card = layui.card;
 		
-		        let MODULE_PATH = "/system/user/";
-		
 				card.render({
 				    elem: '#user-table',
 					url:'../../admin/data/card.json',

view/document/tab.html

@@ -50,7 +50,7 @@
 					</div>
 					<div class="layui-card-body">
 						<!-- 内 容 页 面 -->
-						<div id="content"></div>
+						<div id="contents"></div>
 					</div>
 				</div>
 			</div>
@@ -62,7 +62,7 @@
 							<pre class="layui-code" lay-encode="true">
 								
 								tab.render({
-								    elem: 'content',
+								    elem: 'contents',
 								    roll: false,
 								    tool: false,
 								    width: '100%',
@@ -107,12 +107,13 @@
 				layui.code();
 
 				tab.render({
-					elem: 'content',
+					elem: 'contents',
 					roll: false,
 					tool: false,
 					width: '100%',
 					height: '485px',
 					index: 0,
+					session: false,
 					tabMax: 30,
 					closeEvent: function(id) {
 						layer.msg("关闭回调")
@@ -128,18 +129,18 @@
 				$(".add").click(function(){
 					
 					// ADD 添加方法
-					tab.addTabOnlyByElem('content',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
+					tab.addTabOnlyByElem('contents',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
 				})
 				
 				$(".enable").click(function(){
 					
 					// ADD 添加方法
-					tab.addTabOnlyByElem('content',{id:'tabContent',title:'高级操作',url:'tabContent.html',close: true})
+					tab.addTabOnlyByElem('contents',{id:'tabContent',title:'高级操作',url:'tabContent.html',close: true})
 				})
 				
 				$(".del").click(function(){
 					
-					tab.delCurrentTabByElem('content',function(id){
+					tab.delCurrentTabByElem('contents',function(id){
 						layer.msg("已删除 '"+id+"' 标签页")
 					});
 					

view/document/tabContent.html

@@ -23,17 +23,14 @@
 				tab = layui.tab;
 				
 				$(".add").click(function(){
-					
 					// ADD 添加方法
-					parent.layui.tab.addTabOnlyByElem('content',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
+					parent.layui.tab.addTabOnlyByElem('contents',{id:'demo',title:'Demo',url:'../system/space.html',close: true})
 				})
 				
 				$(".del").click(function(){
-					
+					parent.layui.tab.delCurrentTabByElem('contents',function(id){
-					parent.layui.tab.delCurrentTabByElem('content',function(id){
 						layer.msg("已删除 '"+id+"' 标签页")
 					});
-					
 				})
 				
 		})