Tab 记忆
就眠仪式
parent
705ec9c94a
commit
0bb70f4693
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
})
|
||||
|
|
@ -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);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
@ -23,6 +23,8 @@ tab:
|
|||
muiltTab: true
|
||||
## 切换选项卡时，是否刷新页面状态
|
||||
keepState: true
|
||||
## 是否开启 Tab 记忆
|
||||
session: true
|
||||
## 最大可打开的选项卡数量
|
||||
tabMax: "30"
|
||||
## 默认选项卡数据
|
||||
|
|
|
|||
|
|
@ -85,7 +85,6 @@
|
|||
image.onload = function(){
|
||||
$(".layui-nav-img").attr("src", convert.imageToBase64(image));
|
||||
}
|
||||
|
||||
// 框架初始化时会读取 根目录下 pear.config.yml 文件作为初始化配置
|
||||
// 你可以通过 admin.setConfigPath 方法修改配置文件位置
|
||||
// 你可以通过 admin.setConfigType 方法修改配置文件类型
|
||||
|
|
|
|||
|
|
@ -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 () {
|
||||
let table = layui.table;
|
||||
layui.use(['form','card'],function () {
|
||||
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',
|
||||
|
|
|
|||
|
|
@ -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+"' 标签页")
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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('content',function(id){
|
||||
parent.layui.tab.delCurrentTabByElem('contents',function(id){
|
||||
layer.msg("已删除 '"+id+"' 标签页")
|
||||
});
|
||||
|
||||
})
|
||||
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue