mkm/nk-lihaink-cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化tab页面操作

Browse Source
This commit is contained in:
hdm 2021-10-31 01:05:28 +08:00
parent c9bd392ced
commit 4ad894e934
2 changed files with 36 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/admin/view/index/index.html
View File

@ -88,8 +88,7 @@
</div>
<div class="layui-body">
<div class="layui-tab layui-tab-brief ittab-tab fr-admin-tab" lay-filter="fr-admin-tab"
lay-allowClose="true" style="height: 100%;">
<div class="layui-tab layui-tab-brief ittab-tab gougu-admin-tab" lay-filter="gougu-admin-tab" lay-allowClose="true" style="height: 100%;">
<ul class="layui-tab-title">
<li class="layui-this ittab-tab-home" lay-id="0">首页</li>
</ul>

50
public/static/admin/js/module/gougucms.js
View File

@ -1,39 +1,59 @@
layui.config({
base: '/themes/admin_themes/module/'
}).define(['element','jquery','form'], function(exports){
var $ = layui.jquery,element = layui.element,form = layui.form;
var active = {
//在这里给active绑定几项事件，后面可通过active调用这些事件
tabAdd: function(url,id,name) {
}).define(['element'], function(exports){
var MOD_NAME = 'tab';
var element = layui.element;
var tab = {
//在这里给active绑定几项事件，后面可通过active调用这些事件
tabAdd: function(url,id,name) {
//新增一个Tab项 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
//关于tabAdd的方法所传入的参数可看layui的开发文档中基础方法部分
element.tabAdd("fr-admin-tab", {
element.tabAdd('gougu-admin-tab', {
title: name,
content: '<iframe id="'+id+'" data-frameid="'+id+'" src="'+url+'" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>',
id: id //规定好的id
});
var thetabs = $('.layui-tab-title').find('li');
if(thetabs.length>10){
layer.tips('点击LOGO快速关闭TAB',$('[ittab-home]',parent.document));
layer.tips('点击LOGO快速关闭TAB',$('[ittab-home]'));
}
// FrameWH(); //计算ifram层的大小
},
tabChange: function(id) {
//切换到指定Tab项, //根据传入的id传入到指定的tab项
element.tabChange('fr-admin-tab', id);
element.tabChange('gougu-admin-tab', id);
},
tabDelete: function (id) {
element.tabDelete("fr-admin-tab", id);//删除
element.tabDelete('gougu-admin-tab', id);//删除
},
tabDeleteAll: function (ids) {
//删除所有
$.each(ids, function (i,item) {
//ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
element.tabDelete("fr-admin-tab", item);
element.tabDelete('gougu-admin-tab', item);
})
},
//子页面打开新的窗口
sonAdd: function(url,name) {
var time=new Date().getTime();
element.tabAdd('gougu-admin-tab', {
title: name,
content: '<iframe id="'+time+'" data-frameid="'+time+'" src="'+url+'" frameborder="0" align="left" width="100%" height="100%" scrolling="yes"></iframe>',
id: time //规定好的id
});
var thetabs = $('.layui-tab-title').find('li');
if(thetabs.length>10){
layer.tips('点击LOGO快速关闭TAB',$('[ittab-home]'));
}
this.tabChange(time);
},
//子页面关闭窗口
sonDelete: function (id) {
$('.layui-tab .layui-tab-title .layui-this i').click();//框架页面删除tab
}
};
layui.tab=tab;
$("[ittab-home]").on('click', function(){
var thetabs = $('.layui-tab-title').find('li'),ids=[];
@ -47,7 +67,7 @@ layui.config({
if(ids.length > 0){
for (var a = 0; a < ids.length; a++) {
if(ids[a] != 0){
element.tabDelete('fr-admin-tab', ids[a]);
element.tabDelete('gougu-admin-tab', ids[a]);
}
}
}
@ -63,7 +83,7 @@ layui.config({
dataid.addClass('layui-this');
if ($(".layui-tab-title li[lay-id]").length <= 0) {
//如果比零小，则直接打开新的tab项
active.tabAdd(src, id,title);
tab.tabAdd(src, id,title);
} else {
//否则判断该tab项是否以及存在
var isData = false; //初始化一个标志，为false说明未打开该tab项 为true则说明已有
@ -76,11 +96,11 @@ layui.config({
})
if (isData == false) {
//标志为false 新增一个tab项
active.tabAdd(src, id,title);
tab.tabAdd(src, id,title);
}
}
//最后不管是否新增tab，最后都转到要打开的选项页面上
active.tabChange(id);
tab.tabChange(id);
});
function FrameWH() {