up: idnex.html,okadmin.js,okTab.js
zhizou
parent
aed7f439ba
commit
3e93cd6c74
|
|
@ -115,14 +115,14 @@
|
|||
</ul>
|
||||
</div>
|
||||
|
||||
<ul class="layui-tab-title ok-tab-title not-scroll">
|
||||
<ul id="tabTitle" class="layui-tab-title ok-tab-title not-scroll">
|
||||
<li class="layui-this" lay-id="1" tab="index">
|
||||
<i class="ok-icon ok-iconairplay"></i>
|
||||
<cite is-close=false>主页一</cite>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="layui-tab-content ok-tab-content">
|
||||
<div id="tabContent" class="layui-tab-content ok-tab-content">
|
||||
<div class="layui-tab-item layui-show">
|
||||
<iframe src='pages/home.html' frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
|
||||
</div>
|
||||
|
|
|
|||
488
js/okadmin.js
488
js/okadmin.js
|
|
@ -1,250 +1,250 @@
|
|||
/^http(s*):\/\//.test(location.href) || alert('请先部署到 localhost 下再访问');
|
||||
layui.use(['element', 'layer', 'okUtils', 'okTab'], function () {
|
||||
var element = layui.element,
|
||||
okUtils = layui.okUtils,
|
||||
$ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
okTab = layui.okTab({
|
||||
url: "./data/navs.json",
|
||||
openTabNum: 30, //允许同时选项卡的个数
|
||||
parseData:function (data) {//如果返回的结果和navs.json中的数据结构一致可省略这个方法
|
||||
return data;
|
||||
var element = layui.element,
|
||||
okUtils = layui.okUtils,
|
||||
$ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
okTab = layui.okTab({
|
||||
url: "./data/navs.json",
|
||||
openTabNum: 30, //允许同时选项卡的个数
|
||||
parseData: function (data) {//如果返回的结果和navs.json中的数据结构一致可省略这个方法
|
||||
return data;
|
||||
}
|
||||
});
|
||||
|
||||
okTab.render(function () {
|
||||
//左侧导航渲染完成之后的操作
|
||||
|
||||
|
||||
});//渲染左侧导航
|
||||
|
||||
// 添加新窗口
|
||||
$("body").on("click", "#navBar .layui-nav-item a,#userInfo a", function () {
|
||||
//如果不存在子级
|
||||
if ($(this).siblings().length == 0) {
|
||||
okTab.tabAdd($(this));
|
||||
}
|
||||
});
|
||||
|
||||
okTab.render(function () {
|
||||
//左侧导航渲染完成之后的操作
|
||||
|
||||
|
||||
});//渲染左侧导航
|
||||
|
||||
// 添加新窗口
|
||||
$("body").on("click", "#navBar .layui-nav-item a,#userInfo a", function () {
|
||||
//如果不存在子级
|
||||
if ($(this).siblings().length == 0) {
|
||||
okTab.tabAdd($(this));
|
||||
}
|
||||
$(this).parent("li").siblings().removeClass("layui-nav-itemed");//关闭其他的二级标签
|
||||
});
|
||||
|
||||
/**
|
||||
* 左边菜单显隐功能
|
||||
* @type {boolean}
|
||||
*/
|
||||
$(".ok-menu").click(function () {
|
||||
$(".layui-layout-admin").toggleClass("ok-left-hide");
|
||||
$(this).find('i').toggleClass("ok-menu-hide");
|
||||
localStorage.setItem("isResize",false);
|
||||
setTimeout(function () {
|
||||
localStorage.setItem("isResize",true);
|
||||
},1200);
|
||||
});
|
||||
|
||||
//移动端的处理事件Start
|
||||
$("body").on("click", ".layui-layout-admin .ok-left a[data-url],.ok-make", function () {
|
||||
if ($(".layui-layout-admin").hasClass("ok-left-hide")) {
|
||||
$(".layui-layout-admin").removeClass("ok-left-hide");
|
||||
$(".ok-menu").find('i').removeClass("ok-menu-hide");
|
||||
}
|
||||
});
|
||||
//移动端的处理事件End
|
||||
|
||||
//tab左右移动
|
||||
$("body").on("click", ".okNavMove", function () {
|
||||
var moveId = $(this).attr("data-id");
|
||||
var that = this;
|
||||
okTab.navMove(moveId, that);
|
||||
// console.log(width);
|
||||
});
|
||||
|
||||
//刷新当前tab页
|
||||
$("body").on("click", ".ok-refresh", function () {
|
||||
okTab.refresh(this);
|
||||
});
|
||||
|
||||
//关闭tab页
|
||||
$("body").on("click", "#tabAction a", function () {
|
||||
var num = $(this).attr('data-num');
|
||||
okTab.tabClose(num);
|
||||
});
|
||||
|
||||
//全屏/退出全屏
|
||||
$("body").on("keydown", function (event) {
|
||||
event = event || window.event || arguments.callee.caller.arguments[0];
|
||||
if (event && event.keyCode == 27) { // 按 Esc
|
||||
console.log("Esc");
|
||||
$("#fullScreen").children("i").eq(0).removeClass("okicon-screen-restore");
|
||||
}
|
||||
if (event && event.keyCode == 122) { // 按 F11
|
||||
$("#fullScreen").children("i").eq(0).addClass("okicon-screen-restore");
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("click", "#fullScreen", function () {
|
||||
if ($(this).children("i").hasClass("okicon-screen-restore")) {
|
||||
screenFun(2).then(function(){
|
||||
$(this).children("i").eq(0).removeClass("okicon-screen-restore");
|
||||
});
|
||||
} else {
|
||||
screenFun(1).then(function(){
|
||||
$(this).children("i").eq(0).addClass("okicon-screen-restore");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 全屏和退出全屏的方法
|
||||
* @param num
|
||||
* num为1代表全屏
|
||||
* num为2代表退出全屏
|
||||
*/
|
||||
function screenFun(num) {
|
||||
num = num || 1;
|
||||
num = num * 1;
|
||||
var docElm = document.documentElement;
|
||||
|
||||
switch (num) {
|
||||
case 1:
|
||||
if (docElm.requestFullscreen) {
|
||||
docElm.requestFullscreen();
|
||||
} else if (docElm.mozRequestFullScreen) {
|
||||
docElm.mozRequestFullScreen();
|
||||
} else if (docElm.webkitRequestFullScreen) {
|
||||
docElm.webkitRequestFullScreen();
|
||||
} else if (docElm.msRequestFullscreen) {
|
||||
docElm.msRequestFullscreen();
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
return new Promise(function(res, rej){
|
||||
res("返回值");
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统公告
|
||||
*/
|
||||
$(document).on("click", "#notice", noticeFun);
|
||||
!function () {
|
||||
let notice = sessionStorage.getItem("notice");
|
||||
if (notice != "true") {
|
||||
noticeFun();
|
||||
}
|
||||
}();
|
||||
|
||||
function noticeFun() {
|
||||
var srcWidth = okUtils.getBodyWidth();
|
||||
layer.open({
|
||||
type: 0,
|
||||
title: "系统公告",
|
||||
btn: "我知道啦",
|
||||
btnAlign: 'c',
|
||||
content: "ok-admin v2.0上线啦(^し^)<br />" +
|
||||
"在此郑重承诺该模板<span style='color:#5cb85c'>永久免费</span>为大家提供" +
|
||||
"<br />若有更好的建议欢迎<span id='noticeQQ'>加入QQ群</span>一起聊",
|
||||
yes: function(index){
|
||||
if (srcWidth > 800) {
|
||||
layer.tips('公告跑到这里去啦', '#notice', {
|
||||
tips: [1, '#000'],
|
||||
time: 2000
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("notice", "true");
|
||||
layer.close(index);
|
||||
},
|
||||
cancel: function(index){
|
||||
if (srcWidth > 800) {
|
||||
layer.tips('公告跑到这里去啦', '#notice', {
|
||||
tips: [1, '#000'],
|
||||
time: 2000
|
||||
});
|
||||
}
|
||||
$(this).parent("li").siblings().removeClass("layui-nav-itemed");//关闭其他的二级标签
|
||||
});
|
||||
|
||||
/**
|
||||
* 左边菜单显隐功能
|
||||
* @type {boolean}
|
||||
*/
|
||||
$(".ok-menu").click(function () {
|
||||
$(".layui-layout-admin").toggleClass("ok-left-hide");
|
||||
$(this).find('i').toggleClass("ok-menu-hide");
|
||||
localStorage.setItem("isResize", false);
|
||||
setTimeout(function () {
|
||||
localStorage.setItem("isResize", true);
|
||||
}, 1200);
|
||||
});
|
||||
|
||||
//移动端的处理事件Start
|
||||
$("body").on("click", ".layui-layout-admin .ok-left a[data-url],.ok-make", function () {
|
||||
if ($(".layui-layout-admin").hasClass("ok-left-hide")) {
|
||||
$(".layui-layout-admin").removeClass("ok-left-hide");
|
||||
$(".ok-menu").find('i').removeClass("ok-menu-hide");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 捐赠作者
|
||||
*/
|
||||
$(".layui-footer button.donate").click(function () {
|
||||
layer.tab({
|
||||
area: ["330px", "350px"],
|
||||
tab: [{
|
||||
title: "支付宝",
|
||||
content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>"
|
||||
}, {
|
||||
title: "微信",
|
||||
content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>"
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* QQ群交流
|
||||
*/
|
||||
$("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
|
||||
layer.tab({
|
||||
area: ["330px", "350px"],
|
||||
tab: [{
|
||||
title: "QQ群",
|
||||
content: "<img src='images/qq.jpeg' width='200' height='300' style='margin-left: 60px'>"
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 退出操作
|
||||
*/
|
||||
$("#logout").click(function () {
|
||||
layer.confirm("确定要退出吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 6}, function () {
|
||||
window.location = "./pages/login.html";
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 锁定账户
|
||||
*/
|
||||
$("#lock").click(function () {
|
||||
layer.confirm("确定要锁定账户吗？", {skin: 'layui-layer-lan', icon: 4, title: '提示', anim: 1}, function (index) {
|
||||
layer.close(index);
|
||||
$(".yy").show();
|
||||
layer.prompt({
|
||||
btn: ['确定'],
|
||||
title: '输入密码解锁(123456)',
|
||||
closeBtn: 0,
|
||||
formType: 1
|
||||
}, function (value, index, elem) {
|
||||
if (value == "123456") {
|
||||
layer.close(index);
|
||||
$(".yy").hide();
|
||||
} else {
|
||||
layer.msg('密码错误', {anim: 6});
|
||||
}
|
||||
});
|
||||
//移动端的处理事件End
|
||||
|
||||
//tab左右移动
|
||||
$("body").on("click", ".okNavMove", function () {
|
||||
var moveId = $(this).attr("data-id");
|
||||
var that = this;
|
||||
okTab.navMove(moveId, that);
|
||||
// console.log(width);
|
||||
});
|
||||
|
||||
//刷新当前tab页
|
||||
$("body").on("click", ".ok-refresh", function () {
|
||||
okTab.refresh(this);
|
||||
});
|
||||
|
||||
//关闭tab页
|
||||
$("body").on("click", "#tabAction a", function () {
|
||||
var num = $(this).attr('data-num');
|
||||
okTab.tabClose(num);
|
||||
});
|
||||
|
||||
//全屏/退出全屏
|
||||
$("body").on("keydown", function (event) {
|
||||
event = event || window.event || arguments.callee.caller.arguments[0];
|
||||
if (event && event.keyCode == 27) { // 按 Esc
|
||||
console.log("Esc");
|
||||
$("#fullScreen").children("i").eq(0).removeClass("okicon-screen-restore");
|
||||
}
|
||||
if (event && event.keyCode == 122) { // 按 F11
|
||||
$("#fullScreen").children("i").eq(0).addClass("okicon-screen-restore");
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("click", "#fullScreen", function () {
|
||||
if ($(this).children("i").hasClass("okicon-screen-restore")) {
|
||||
screenFun(2).then(function () {
|
||||
$(this).children("i").eq(0).removeClass("okicon-screen-restore");
|
||||
});
|
||||
} else {
|
||||
screenFun(1).then(function () {
|
||||
$(this).children("i").eq(0).addClass("okicon-screen-restore");
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 全屏和退出全屏的方法
|
||||
* @param num
|
||||
* num为1代表全屏
|
||||
* num为2代表退出全屏
|
||||
*/
|
||||
function screenFun(num) {
|
||||
num = num || 1;
|
||||
num = num * 1;
|
||||
var docElm = document.documentElement;
|
||||
|
||||
switch (num) {
|
||||
case 1:
|
||||
if (docElm.requestFullscreen) {
|
||||
docElm.requestFullscreen();
|
||||
} else if (docElm.mozRequestFullScreen) {
|
||||
docElm.mozRequestFullScreen();
|
||||
} else if (docElm.webkitRequestFullScreen) {
|
||||
docElm.webkitRequestFullScreen();
|
||||
} else if (docElm.msRequestFullscreen) {
|
||||
docElm.msRequestFullscreen();
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
return new Promise(function (res, rej) {
|
||||
res("返回值");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// console.log(" _ _ _ \n" +
|
||||
// " | | | | (_) \n" +
|
||||
// " ___ | | _ _____ _____ __| |____ _ ____ \n" +
|
||||
// " / _ \\| |_/ |_____|____ |/ _ | \\| | _ \\ \n" +
|
||||
// "| |_| | _ ( / ___ ( (_| | | | | | | | |\n" +
|
||||
// " \\___/|_| \\_) \\_____|\\____|_|_|_|_|_| |_|\n" +
|
||||
// " \n" +
|
||||
// "版本：v2.0\n" +
|
||||
// "作者：bobi\n" +
|
||||
// "邮箱：bobi1234@foxmail.com\n" +
|
||||
// "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
|
||||
}
|
||||
|
||||
/**
|
||||
* 系统公告
|
||||
*/
|
||||
$(document).on("click", "#notice", noticeFun);
|
||||
!function () {
|
||||
let notice = sessionStorage.getItem("notice");
|
||||
if (notice != "true") {
|
||||
noticeFun();
|
||||
}
|
||||
}();
|
||||
|
||||
function noticeFun() {
|
||||
var srcWidth = okUtils.getBodyWidth();
|
||||
layer.open({
|
||||
type: 0,
|
||||
title: "系统公告",
|
||||
btn: "我知道啦",
|
||||
btnAlign: 'c',
|
||||
content: "ok-admin v2.0上线啦(^し^)<br />" +
|
||||
"在此郑重承诺该模板<span style='color:#5cb85c'>永久免费</span>为大家提供" +
|
||||
"<br />若有更好的建议欢迎<span id='noticeQQ'>加入QQ群</span>一起聊",
|
||||
yes: function (index) {
|
||||
if (srcWidth > 800) {
|
||||
layer.tips('公告跑到这里去啦', '#notice', {
|
||||
tips: [1, '#000'],
|
||||
time: 2000
|
||||
});
|
||||
}
|
||||
sessionStorage.setItem("notice", "true");
|
||||
layer.close(index);
|
||||
},
|
||||
cancel: function (index) {
|
||||
if (srcWidth > 800) {
|
||||
layer.tips('公告跑到这里去啦', '#notice', {
|
||||
tips: [1, '#000'],
|
||||
time: 2000
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 捐赠作者
|
||||
*/
|
||||
$(".layui-footer button.donate").click(function () {
|
||||
layer.tab({
|
||||
area: ["330px", "350px"],
|
||||
tab: [{
|
||||
title: "支付宝",
|
||||
content: "<img src='images/zfb.jpg' width='200' height='300' style='margin-left: 60px'>"
|
||||
}, {
|
||||
title: "微信",
|
||||
content: "<img src='images/wx.jpg' width='200' height='300' style='margin-left: 60px'>"
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* QQ群交流
|
||||
*/
|
||||
$("body").on("click", ".layui-footer button.communication,#noticeQQ", function () {
|
||||
layer.tab({
|
||||
area: ["330px", "350px"],
|
||||
tab: [{
|
||||
title: "QQ群",
|
||||
content: "<img src='images/qq.jpeg' width='200' height='300' style='margin-left: 60px'>"
|
||||
}]
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 退出操作
|
||||
*/
|
||||
$("#logout").click(function () {
|
||||
layer.confirm("确定要退出吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 6}, function () {
|
||||
window.location = "./pages/login.html";
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 锁定账户
|
||||
*/
|
||||
$("#lock").click(function () {
|
||||
layer.confirm("确定要锁定账户吗？", {skin: 'layui-layer-lan', icon: 4, title: '提示', anim: 1}, function (index) {
|
||||
layer.close(index);
|
||||
$(".yy").show();
|
||||
layer.prompt({
|
||||
btn: ['确定'],
|
||||
title: '输入密码解锁(123456)',
|
||||
closeBtn: 0,
|
||||
formType: 1
|
||||
}, function (value, index, elem) {
|
||||
if (value == "123456") {
|
||||
layer.close(index);
|
||||
$(".yy").hide();
|
||||
} else {
|
||||
layer.msg('密码错误', {anim: 6});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
// console.log(" _ _ _ \n" +
|
||||
// " | | | | (_) \n" +
|
||||
// " ___ | | _ _____ _____ __| |____ _ ____ \n" +
|
||||
// " / _ \\| |_/ |_____|____ |/ _ | \\| | _ \\ \n" +
|
||||
// "| |_| | _ ( / ___ ( (_| | | | | | | | |\n" +
|
||||
// " \\___/|_| \\_) \\_____|\\____|_|_|_|_|_| |_|\n" +
|
||||
// " \n" +
|
||||
// "版本：v2.0\n" +
|
||||
// "作者：bobi\n" +
|
||||
// "邮箱：bobi1234@foxmail.com\n" +
|
||||
// "描述：一个很赞的，扁平化风格的，响应式布局的后台管理模版，旨为后端程序员减压！");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -18,6 +18,36 @@ String.prototype.format = function () {
|
|||
}
|
||||
};
|
||||
|
||||
/**打开已经打开的tabMenu**/
|
||||
let OpenTabMenuFun = function ($,fun) {
|
||||
var tabMenu = localStorage.getItem("tabMenu");//已经打开的tab页面
|
||||
var tabMenuLeft = localStorage.getItem("tabMenuLeft");//tab的位置
|
||||
if (tabMenu) {
|
||||
tabMenu = JSON.parse(tabMenu);
|
||||
$("#tabTitle").html(tabMenu.tabTitle).animate({
|
||||
left: tabMenuLeft
|
||||
}, 50);
|
||||
$("#tabContent").html(tabMenu.tabContent);
|
||||
if(typeof fun == 'function'){
|
||||
fun();
|
||||
}
|
||||
}
|
||||
};
|
||||
/**存储打开的tabMenu**/
|
||||
function saveTabMenuFun($) {
|
||||
let tabMenu = JSON.stringify({
|
||||
tabTitle: $("#tabTitle").html(),
|
||||
tabContent: $("#tabContent").html()
|
||||
});
|
||||
localStorage.setItem('tabMenu', tabMenu);
|
||||
localStorage.setItem('tabMenuLeft', $("#tabTitle").css('left'));
|
||||
}
|
||||
/**tab的位置**/
|
||||
function saveTabMenuPosition(num){
|
||||
// num = num || $("#tabTitle").css('left');
|
||||
// localStorage.setItem('tabMenuLeft', num);
|
||||
}
|
||||
|
||||
layui.define(["element", "jquery"], function (exports) {
|
||||
var layui = parent.layui || layui;
|
||||
$ = layui.jquery;
|
||||
|
|
@ -28,10 +58,11 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
openTabNum: 30, //最大可打开窗口数量默认30
|
||||
tabFilter: "ok-tab", //添加窗口的filter
|
||||
url: "", //获取菜单的接口地址
|
||||
data:[],//菜单数据列表(如果传入了url则data无效)
|
||||
parseData:''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值)
|
||||
data: [],//菜单数据列表(如果传入了url则data无效)
|
||||
parseData: ''//这是一个方法处理url请求地址的返回值(该方法必须提供一个返回值)
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 导航初始化的操作(只执行一次)
|
||||
* @param option 配置tabConfig参数
|
||||
|
|
@ -42,174 +73,10 @@ 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;
|
||||
};
|
||||
|
||||
/**
|
||||
* 定位tab位置
|
||||
* @param superEle 父级元素
|
||||
* @param ele 当前tab
|
||||
*/
|
||||
okTab.prototype.positionTab = function (contEle, ele) {
|
||||
|
||||
var superEle = $(".ok-tab");//父级元素
|
||||
contEle = $(contEle);//tab内容存放的父元素
|
||||
ele = $(ele);//当前的tab
|
||||
|
||||
var menuSet = $(".okadmin-side a[lay-id]");//获取所有菜单集合
|
||||
var thatLayId = ele.attr('lay-id');
|
||||
|
||||
var contWidth = contEle.width(),//父级元素宽度
|
||||
superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度
|
||||
subWidth = ele.outerWidth(),//当前元素宽度
|
||||
elePrevAll = ele.prevAll(),//左边的所有同级元素
|
||||
leftWidth = 0,//左边距离
|
||||
postLeft = Math.abs(contEle.position().left);//当前移动的位置
|
||||
var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度
|
||||
|
||||
/*console.log("maxMoveWidth：" + maxMoveWidth);
|
||||
console.log("superWidth：" + superWidth);
|
||||
console.log("contWidth：" + contWidth);*/
|
||||
// console.log(contEle);
|
||||
for (let i = 0; i < elePrevAll.length; i++) {
|
||||
leftWidth += $(elePrevAll[i]).outerWidth() * 1;
|
||||
}
|
||||
if (contWidth > superWidth) {
|
||||
/**
|
||||
* 移动tab栏的位置
|
||||
*/
|
||||
var showPost = leftWidth - postLeft;//当前点击的元素位置（显示区域的位置）
|
||||
var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半
|
||||
|
||||
if (halfPlace < showPost) {//从右往左移动
|
||||
var tempMove = leftWidth - subWidth;//预留一部分距离
|
||||
if (tempMove > maxMoveWidth) {//当前移动的距离超过最大可移动的宽度
|
||||
tempMove = maxMoveWidth;
|
||||
}
|
||||
contEle.animate({
|
||||
left: -tempMove
|
||||
}, 50);
|
||||
} else {//从左往右移动
|
||||
var tempMove = leftWidth - halfPlace;//预留一部分距离
|
||||
if (tempMove < 0) {
|
||||
tempMove = 0;
|
||||
}
|
||||
contEle.animate({
|
||||
left: -tempMove
|
||||
}, 50);
|
||||
}
|
||||
} else {
|
||||
contEle.animate({
|
||||
left: 0
|
||||
}, 50);
|
||||
//this.navMove("rightmax");
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧菜单的样式和多级菜单的展开
|
||||
*/
|
||||
$(".okadmin-side").find("li,dd").removeClass("layui-this").removeClass("layui-nav-itemed");//关闭所有展开的菜单
|
||||
for (let i = 0; i < menuSet.length; i++) {
|
||||
if ($(menuSet[i]).attr('lay-id') == thatLayId) {
|
||||
$(menuSet[i]).parents("dd").addClass("layui-nav-itemed");
|
||||
$(menuSet[i]).parents("li").addClass("layui-nav-itemed");
|
||||
$(menuSet[i]).parent().removeClass("layui-nav-itemed").addClass("layui-this");
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 点击导航页的操作
|
||||
okTab.prototype.tab = function () {
|
||||
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索引
|
||||
var elSuper = $(".ok-tab"),//视窗元素
|
||||
elMove = $(".ok-tab-title"),//移动的元素
|
||||
elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
|
||||
thatElem = $(elTabs[index]);//当前元素
|
||||
that.positionTab(elMove, thatElem);
|
||||
});
|
||||
};
|
||||
|
||||
//删除tab页的操作（此处为点击关闭按钮的操作）
|
||||
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");
|
||||
});
|
||||
};
|
||||
|
||||
//右侧内容nav操作添加tab页
|
||||
okTab.prototype.tabAdd = function (_thisa) {
|
||||
var that = this;
|
||||
var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ）
|
||||
|
||||
var openTabNum = that.tabConfig.openTabNum;
|
||||
var tabFilter = that.tabConfig.tabFilter;
|
||||
var url = _this.attr("data-url");//选项卡的页面路径
|
||||
var tabId = _this.attr("lay-id");//选项卡ID
|
||||
var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量
|
||||
var iframes = $(".ok-tab-content iframe");
|
||||
var isClose = _this.attr('is-close') || "true";
|
||||
|
||||
_this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId + "></strong>");
|
||||
|
||||
if (_this.children("i").length < 1) {
|
||||
_this.prepend("<i class='layui-icon'></i>");
|
||||
}
|
||||
if (_this.attr("target") == "_blank") {
|
||||
window.location.href = _this.attr("data-url");
|
||||
} else if (url != undefined) {
|
||||
var title = '';
|
||||
var html = _this.html();
|
||||
// 去重复选项卡
|
||||
/**
|
||||
* 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增）
|
||||
*/
|
||||
for (var i = 0; i < thatTabNum; i++) {
|
||||
if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) {
|
||||
var iframeParam = (iframes[i].src).split("?")[1];
|
||||
var urlParam = url.split("?")[1];
|
||||
if (urlParam == iframeParam) {
|
||||
element.tabChange(tabFilter, tabId);
|
||||
} else {
|
||||
//参数不一样的时候刷新并且更换参数
|
||||
iframes[i].contentWindow.location.reload(true);
|
||||
iframes[i].src = url;
|
||||
element.tabChange(tabFilter, tabId);
|
||||
}
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (thatTabNum >= openTabNum) {
|
||||
layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！');
|
||||
return;
|
||||
}
|
||||
var contentIframe = ("<iframe src='{0}' lay-id='{1}'" +
|
||||
"frameborder='0' scrolling='yes' width='100%' height='100%'>" +
|
||||
"</iframe>").format(url, tabId);
|
||||
element.tabAdd(tabFilter, {
|
||||
title: html,
|
||||
content: contentIframe,
|
||||
id: tabId
|
||||
});
|
||||
|
||||
// 切换选项卡
|
||||
element.tabChange(tabFilter, tabId);
|
||||
this.navMove("rightmax");
|
||||
}
|
||||
};
|
||||
|
||||
//生成左侧菜单
|
||||
var temp = "";
|
||||
okTab.prototype.navBar = function (strData) {
|
||||
|
|
@ -297,14 +164,188 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 定位tab位置
|
||||
* @param superEle 父级元素
|
||||
* @param ele 当前tab
|
||||
*/
|
||||
okTab.prototype.positionTab = function (contEle, ele) {
|
||||
|
||||
var superEle = $(".ok-tab");//父级元素
|
||||
contEle = $(contEle);//tab内容存放的父元素
|
||||
ele = $(ele);//当前的tab
|
||||
|
||||
var menuSet = $(".okadmin-side a[lay-id]");//获取所有菜单集合
|
||||
var thatLayId = ele.attr('lay-id');
|
||||
|
||||
var contWidth = contEle.width(),//父级元素宽度
|
||||
superWidth = parseInt(superEle.width()) - 40 * 3,//可显示的宽度
|
||||
subWidth = ele.outerWidth(),//当前元素宽度
|
||||
elePrevAll = ele.prevAll(),//左边的所有同级元素
|
||||
leftWidth = 0,//左边距离
|
||||
postLeft = Math.abs(contEle.position().left);//当前移动的位置
|
||||
var maxMoveWidth = contWidth - superWidth;//最大可移动的宽度
|
||||
|
||||
/*console.log("maxMoveWidth：" + maxMoveWidth);
|
||||
console.log("superWidth：" + superWidth);
|
||||
console.log("contWidth：" + contWidth);*/
|
||||
// console.log(contEle);
|
||||
for (let i = 0; i < elePrevAll.length; i++) {
|
||||
leftWidth += $(elePrevAll[i]).outerWidth() * 1;
|
||||
}
|
||||
if (contWidth > superWidth) {
|
||||
/**
|
||||
* 移动tab栏的位置
|
||||
*/
|
||||
var showPost = leftWidth - postLeft;//当前点击的元素位置（显示区域的位置）
|
||||
var halfPlace = parseInt(superWidth / 2);//可显示的宽度的一半
|
||||
var tempMove = 0;
|
||||
if (halfPlace < showPost) {//从右往左移动
|
||||
tempMove = leftWidth - subWidth;//预留一部分距离
|
||||
if (tempMove > maxMoveWidth) {//当前移动的距离超过最大可移动的宽度
|
||||
tempMove = maxMoveWidth;
|
||||
}
|
||||
contEle.animate({
|
||||
left: -tempMove
|
||||
}, 50);
|
||||
} else {//从左往右移动
|
||||
tempMove = leftWidth - halfPlace;//预留一部分距离
|
||||
if (tempMove < 0) {
|
||||
tempMove = 0;
|
||||
}
|
||||
contEle.animate({
|
||||
left: -tempMove
|
||||
}, 50);
|
||||
}
|
||||
/**存储tab位置**/
|
||||
saveTabMenuPosition(-tempMove);
|
||||
} else {
|
||||
contEle.animate({
|
||||
left: 0
|
||||
}, 50);
|
||||
//this.navMove("rightmax");
|
||||
/**存储tab位置**/
|
||||
saveTabMenuPosition(0);
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧菜单的样式和多级菜单的展开
|
||||
*/
|
||||
$(".okadmin-side").find("li,dd").removeClass("layui-this").removeClass("layui-nav-itemed");//关闭所有展开的菜单
|
||||
for (let i = 0; i < menuSet.length; i++) {
|
||||
if ($(menuSet[i]).attr('lay-id') == thatLayId) {
|
||||
$(menuSet[i]).parents("dd").addClass("layui-nav-itemed");
|
||||
$(menuSet[i]).parents("li").addClass("layui-nav-itemed");
|
||||
$(menuSet[i]).parent().removeClass("layui-nav-itemed").addClass("layui-this");
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 点击导航页的操作
|
||||
okTab.prototype.tab = function () {
|
||||
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索引
|
||||
var elSuper = $(".ok-tab"),//视窗元素
|
||||
elMove = $(".ok-tab-title"),//移动的元素
|
||||
elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
|
||||
thatElem = $(elTabs[index]);//当前元素
|
||||
saveTabMenuFun($);
|
||||
that.positionTab(elMove, thatElem);
|
||||
});
|
||||
};
|
||||
|
||||
//删除tab页的操作（此处为点击关闭按钮的操作）
|
||||
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($);
|
||||
});
|
||||
};
|
||||
|
||||
//添加tab页
|
||||
okTab.prototype.tabAdd = function (_thisa) {
|
||||
var that = this;
|
||||
var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ）
|
||||
|
||||
var openTabNum = that.tabConfig.openTabNum;
|
||||
var tabFilter = that.tabConfig.tabFilter;
|
||||
var url = _this.attr("data-url");//选项卡的页面路径
|
||||
var tabId = _this.attr("lay-id");//选项卡ID
|
||||
var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量
|
||||
var iframes = $(".ok-tab-content iframe");
|
||||
var isClose = _this.attr('is-close') || "true";
|
||||
|
||||
_this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId + "></strong>");
|
||||
|
||||
if (_this.children("i").length < 1) {
|
||||
_this.prepend("<i class='layui-icon'></i>");
|
||||
}
|
||||
if (_this.attr("target") == "_blank") {
|
||||
window.location.href = _this.attr("data-url");
|
||||
} else if (url != undefined) {
|
||||
var title = '';
|
||||
var html = _this.html();
|
||||
// 去重复选项卡
|
||||
/**
|
||||
* 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增）
|
||||
*/
|
||||
for (var i = 0; i < thatTabNum; i++) {
|
||||
if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) {
|
||||
var iframeParam = (iframes[i].src).split("?")[1];
|
||||
var urlParam = url.split("?")[1];
|
||||
if (urlParam == iframeParam) {
|
||||
element.tabChange(tabFilter, tabId);
|
||||
} else {
|
||||
//参数不一样的时候刷新并且更换参数
|
||||
iframes[i].contentWindow.location.reload(true);
|
||||
iframes[i].src = url;
|
||||
element.tabChange(tabFilter, tabId);
|
||||
}
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (thatTabNum >= openTabNum) {
|
||||
layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！');
|
||||
return;
|
||||
}
|
||||
var contentIframe = ("<iframe src='{0}' lay-id='{1}'" +
|
||||
"frameborder='0' scrolling='yes' width='100%' height='100%'>" +
|
||||
"</iframe>").format(url, tabId);
|
||||
element.tabAdd(tabFilter, {
|
||||
title: html,
|
||||
content: contentIframe,
|
||||
id: tabId
|
||||
});
|
||||
|
||||
// 切换选项卡
|
||||
element.tabChange(tabFilter, tabId);
|
||||
this.navMove("rightmax");
|
||||
/**保存展开的tab**/
|
||||
saveTabMenuFun($);
|
||||
}
|
||||
};
|
||||
|
||||
//重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作)
|
||||
okTab.prototype.render = function (fun) {
|
||||
var _this = this;//data
|
||||
var _data = _this.tabConfig.data;
|
||||
if(_this.tabConfig.url){
|
||||
if (_this.tabConfig.url) {
|
||||
$.get(_this.tabConfig.url, function (res) {
|
||||
_data = res;
|
||||
if(typeof _this.tabConfig.parseData == "function"){
|
||||
if (typeof _this.tabConfig.parseData == "function") {
|
||||
_data = _this.tabConfig.parseData(res);
|
||||
}
|
||||
$("#navBar").html(_this.navBar(_data));
|
||||
|
|
@ -316,8 +357,13 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
fun();
|
||||
}
|
||||
});
|
||||
}else if($.type(_data) == 'array'){
|
||||
if(_data.length < 1){
|
||||
/**打开缓存中的tab**/
|
||||
OpenTabMenuFun($,function () {
|
||||
// var filter = _this.tabConfig.tabFilter;
|
||||
element.render("tab");
|
||||
});
|
||||
} else if ($.type(_data) == 'array') {
|
||||
if (_data.length < 1) {
|
||||
alert("菜单集合中无任何数据");
|
||||
}
|
||||
var _data = _this.tabConfig.data;
|
||||
|
|
@ -329,7 +375,7 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
if (typeof fun == "function") {
|
||||
fun();
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
alert("你的菜单配置有误请查看菜单配置说明");
|
||||
}
|
||||
};
|
||||
|
|
@ -394,6 +440,8 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
break;
|
||||
}
|
||||
element.render("tab", filter);
|
||||
/**保存展开的tab**/
|
||||
saveTabMenuFun($);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -467,10 +515,12 @@ layui.define(["element", "jquery"], function (exports) {
|
|||
contEle.animate({
|
||||
left: moveLeft
|
||||
}, 50);
|
||||
saveTabMenuPosition(moveLeft);
|
||||
} else {
|
||||
contEle.animate({
|
||||
left: 0
|
||||
}, 50);
|
||||
saveTabMenuPosition(0);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,391 +0,0 @@
|
|||
var $;
|
||||
String.prototype.format = function () {
|
||||
//字符串占位符
|
||||
//eg: var str1 = "hello {0}".format("world");
|
||||
if (arguments.length == 0) return this;
|
||||
var param = arguments[0];
|
||||
var s = this;
|
||||
if (typeof (param) == 'object') {
|
||||
for (var key in param) {
|
||||
s = s.replace(new RegExp("\\{" + key + "\\}", "g"), param[key]);
|
||||
}
|
||||
return s;
|
||||
} else {
|
||||
for (var i = 0; i < arguments.length; i++) {
|
||||
s = s.replace(new RegExp("\\{" + i + "\\}", "g"), arguments[i]);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
};
|
||||
|
||||
/** 元素是否处于父容器的可见区域不可见则移动到可见区域 */
|
||||
function isEleInView(superEle, ele) {
|
||||
|
||||
|
||||
// if(){
|
||||
//
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
layui.define(["element", "jquery"], function (exports) {
|
||||
var layui = parent.layui || layui;
|
||||
$ = layui.jquery;
|
||||
var element = layui.element,
|
||||
layer = layui.layer,
|
||||
okTab = function () {
|
||||
this.tabConfig = {
|
||||
openTabNum: 30, //最大可打开窗口数量默认30
|
||||
tabFilter: "ok-tab", //添加窗口的filter
|
||||
url: "./data/navs.json" //获取菜单的接口地址
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 导航初始化的操作(只执行一次)
|
||||
* @param option 配置tabConfig参数
|
||||
* @returns {okTab}
|
||||
*/
|
||||
okTab.prototype.init = function (option) {
|
||||
var _this = this; //这个this就是代表okTab（因为prototype的原因）
|
||||
$.extend(true, _this.tabConfig, option); //函数用于将一个或多个对象的内容合并到目标对象。http://www.runoob.com/jquery/misc-extend.html
|
||||
this.tabDelete(); //关闭导航页的操作
|
||||
this.tab(); //tab导航切换时的操作
|
||||
return _this;
|
||||
};
|
||||
|
||||
/**
|
||||
* 定位tab位置
|
||||
* @param superEle 父级元素
|
||||
* @param ele 当前tab
|
||||
*/
|
||||
okTab.prototype.positionTab = function (superEle, ele) {
|
||||
superEle = $(superEle);
|
||||
ele = $(ele);
|
||||
var superWidth = superEle.width(),//父级元素宽度
|
||||
subWidth = ele.outerWidth(),//当前元素宽度
|
||||
elePrevAll = ele.prevAll(),//左边的所有同级元素
|
||||
leftWidth = 0;//左边距离
|
||||
for (var i = 0; i < elePrevAll.length; i++) {
|
||||
leftWidth += $(elePrevAll[i]).outerWidth() * 1;
|
||||
}
|
||||
if (leftWidth + subWidth > superWidth) {
|
||||
superEle.animate({
|
||||
scrollLeft: leftWidth
|
||||
}, 200);
|
||||
} else {
|
||||
superEle.animate({
|
||||
scrollLeft: 0
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
||||
// 点击导航页的操作
|
||||
okTab.prototype.tab = function () {
|
||||
var that = this;
|
||||
var filter = this.tabConfig.tabFilter;
|
||||
element.on(`tab(${filter})`, function (data) {
|
||||
var index = data.index;//点击的某个tab索引
|
||||
var elSuper = $(".ok-tab"),//视窗元素
|
||||
elMove = $(".ok-tab-title"),//移动的元素
|
||||
elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
|
||||
thatElem = $(elTabs[index]);//当前元素
|
||||
that.positionTab(elMove, thatElem);
|
||||
});
|
||||
};
|
||||
|
||||
//删除tab页的操作（此处为点击关闭按钮的操作）
|
||||
okTab.prototype.tabDelete = function () {
|
||||
var that = this;
|
||||
var filter = this.tabConfig.tabFilter;
|
||||
element.on(`tabDelete(${filter})`, function (data) {
|
||||
// that.navMove("right");
|
||||
});
|
||||
};
|
||||
|
||||
//右侧内容nav操作添加tab页
|
||||
okTab.prototype.tabAdd = function (_thisa) {
|
||||
var that = this;
|
||||
var _this = $(_thisa).clone(true);//拷贝dom（js： _this.cloneNode(true) ）
|
||||
|
||||
var openTabNum = that.tabConfig.openTabNum;
|
||||
var tabFilter = that.tabConfig.tabFilter;
|
||||
var url = _this.attr("data-url");//选项卡的页面路径
|
||||
var tabId = _this.attr("lay-id");//选项卡ID
|
||||
var thatTabNum = $('.ok-tab-title > li').length;//当前已经打开的选项卡的数量
|
||||
var iframes = $(".ok-tab-content iframe");
|
||||
var isClose = _this.attr('is-close') || "true";
|
||||
|
||||
_this.prepend("<strong style='display: none;' is-close=" + isClose + " lay-id=" + tabId + "></strong>");
|
||||
|
||||
if (_this.children("i").length < 1) {
|
||||
_this.prepend("<i class='layui-icon'></i>");
|
||||
}
|
||||
if (_this.attr("target") == "_blank") {
|
||||
window.location.href = _this.attr("data-url");
|
||||
} else if (url != undefined) {
|
||||
var title = '';
|
||||
var html = _this.html();
|
||||
// 去重复选项卡
|
||||
/**
|
||||
* 这里还有一种情况就是同一选项卡页面路径不同（这个是多余的没必要了，页面不同，跳转的选项卡也应该新增）
|
||||
*/
|
||||
for (var i = 0; i < thatTabNum; i++) {
|
||||
if ($('.ok-tab-title > li').eq(i).attr('lay-id') == tabId) {
|
||||
var iframeParam = (iframes[i].src).split("?")[1];
|
||||
var urlParam = url.split("?")[1];
|
||||
if (urlParam == iframeParam) {
|
||||
element.tabChange(tabFilter, tabId);
|
||||
} else {
|
||||
//参数不一样的时候刷新并且更换参数
|
||||
iframes[i].contentWindow.location.reload(true);
|
||||
iframes[i].src = url;
|
||||
element.tabChange(tabFilter, tabId);
|
||||
}
|
||||
if (event) {
|
||||
event.stopPropagation();
|
||||
}
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (thatTabNum >= openTabNum) {
|
||||
layer.msg('最多只能同时打开' + openTabNum + '个选项卡哦。不然系统会卡的！');
|
||||
return;
|
||||
}
|
||||
element.tabAdd(tabFilter, {
|
||||
title: html
|
||||
, content: `
|
||||
<iframe src='${url}' lay-id='${tabId}' frameborder="0" scrolling="yes" width="100%" height="100%"></iframe>
|
||||
`
|
||||
, id: tabId
|
||||
});
|
||||
|
||||
// 切换选项卡
|
||||
element.tabChange(tabFilter, tabId);
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
//生成左侧菜单
|
||||
var temp = "";
|
||||
okTab.prototype.navBar = function (strData) {
|
||||
var data;
|
||||
if (typeof (strData) == "string") {
|
||||
var data = JSON.parse(strData); //有可能是字符串，转换一下
|
||||
} else {
|
||||
data = strData;
|
||||
}
|
||||
var ulItem = '';
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
temp = "";
|
||||
if (data[i].isCheck) {
|
||||
ulItem += '<li class="layui-nav-item layui-this">';
|
||||
} else if (data[i].spread) {
|
||||
ulItem += '<li class="layui-nav-item layui-nav-itemed">';
|
||||
} else {
|
||||
ulItem += '<li class="layui-nav-item">';
|
||||
}
|
||||
createMenu(data[i], (i + 1).toString());
|
||||
ulItem += temp;
|
||||
ulItem += '</li>';
|
||||
}
|
||||
return ulItem;
|
||||
};
|
||||
|
||||
/**
|
||||
* 递归生成菜单
|
||||
* @param data 数据
|
||||
* @param tabID 设置lay-id使用
|
||||
*/
|
||||
function createMenu(data, tabID) {
|
||||
if (data.children != undefined && data.children.length > 0) {
|
||||
temp += '<a>';
|
||||
if (data.icon != undefined && data.icon != '') {
|
||||
if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) {
|
||||
if (data.icon.indexOf("&#") >= 0) {
|
||||
temp += ('<i class="{0}">{1}</i>').format(data.fontFamily, data.icon);
|
||||
} else {
|
||||
temp += ('<i class="{0} {1}"></i>').format(data.fontFamily, data.icon);
|
||||
}
|
||||
} else {
|
||||
temp += ('<i class="layui-icon" data-icon="{0}">{1}</i>').format(data.icon, data.icon);
|
||||
}
|
||||
}
|
||||
temp += '<cite>' + data.title + '</cite>';
|
||||
temp += '<span class="layui-nav-more"></span>';
|
||||
temp += '</a>';
|
||||
temp += '<dl class="layui-nav-child">';
|
||||
for (var i = 0; i < data.children.length; i++) {
|
||||
temp += '<dd>';
|
||||
var lay_id = tabID + "-" + (i + 1);
|
||||
createMenu(data.children[i], lay_id);
|
||||
temp += '</dd>';
|
||||
}
|
||||
temp += "</dl>";
|
||||
} else {
|
||||
var isClose = data.isClose === false ? "false" : "true";
|
||||
if (data.target) {
|
||||
temp += ('<a lay-id="{0}" data-url="{1}" target="{2}" is-close="{3}">').format(tabID, data.href, data.target, isClose);
|
||||
} else {
|
||||
temp += ('<a lay-id="{0}" data-url="{1}" is-close="{2}">').format(tabID, data.href, isClose);
|
||||
}
|
||||
if (data.icon != undefined && data.icon != '') {
|
||||
if (data.fontFamily && data.fontFamily.indexOf("layui-icon") < 0) {
|
||||
if (data.icon.indexOf("&#") >= 0) {
|
||||
temp += ('<i class="{0}">{1}</i>').format(data.fontFamily, data.icon);
|
||||
} else {
|
||||
temp += ('<i class="{0} {1}"></i>').format(data.fontFamily, data.icon);
|
||||
}
|
||||
} else {
|
||||
temp += ('<i class="layui-icon" data-icon="{0}">{1}</i>').format(data.icon, data.icon);
|
||||
}
|
||||
}
|
||||
temp += ('<cite>{0}</cite></a>').format(data.title);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
//重新对导航进行渲染(此处有个回调函数，主要用作渲染完成之后的操作)
|
||||
okTab.prototype.render = function (fun) {
|
||||
let _this = this;//data
|
||||
$.get(_this.tabConfig.url, function (data) {
|
||||
$("#navBar").html(_this.navBar(data));
|
||||
element.render('nav');
|
||||
$(window).resize(function () {
|
||||
$("#navBar").height($(window).height() - 245);
|
||||
});
|
||||
if (typeof fun == "function") {
|
||||
fun();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//刷新当前tab页
|
||||
okTab.prototype.refresh = function (_this) {
|
||||
if (!($(_this).hasClass("refreshThis"))) {
|
||||
$(_this).addClass("refreshThis");
|
||||
$(".ok-tab-content .layui-show").find("iframe")[0].contentWindow.location.reload(true);
|
||||
setTimeout(function () {
|
||||
$(_this).removeClass("refreshThis");
|
||||
}, 2000)
|
||||
} else {
|
||||
layer.msg("客官请不要频繁点击哦！我会反应不过来的");
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 关闭tab标签页操作
|
||||
* @param num 默认为1
|
||||
* 1：代表关闭当前标签页
|
||||
* 2：代表关闭其他标签页
|
||||
* 3：代表关闭所有标签页
|
||||
*/
|
||||
okTab.prototype.tabClose = function (num = 1) {
|
||||
num = num * 1;//强制转换成数字
|
||||
var that = this;
|
||||
let openTabs = $('.ok-tab-title > li strong[lay-id]').not('strong[is-close=false]'),//获取已打开的tab元素(除开不会被关闭的导航)
|
||||
thatLayID = $('.ok-tab-title > li.layui-this strong[lay-id]').not('strong[is-close=false]').attr("lay-id") || '';//获取当前打开的tab元素ID(除开不会被关闭的导航)
|
||||
|
||||
var filter = that.tabConfig.tabFilter;
|
||||
if (thatLayID.length < 1 && num == 1) {
|
||||
layer.msg("您不能关闭当前页哦 (๑╹◡╹)ﾉ");
|
||||
return;
|
||||
} else if (openTabs.length < 1) {
|
||||
layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ");
|
||||
return;
|
||||
}
|
||||
switch (num) {
|
||||
case 1:
|
||||
element.tabDelete(filter, thatLayID);
|
||||
break;
|
||||
case 2:
|
||||
if (openTabs.length > 0) {
|
||||
openTabs.each(function (i, j) {
|
||||
if ($(j).attr("lay-id") != thatLayID) {
|
||||
element.tabDelete(filter, $(j).attr("lay-id"));
|
||||
}
|
||||
});
|
||||
} else {
|
||||
layer.msg("您好！当前没有可关闭的窗口了 (๑╹◡╹)ﾉ");
|
||||
return;
|
||||
}
|
||||
break;
|
||||
case 3:
|
||||
openTabs.each(function (i, j) {
|
||||
element.tabDelete(filter, $(j).attr("lay-id"));
|
||||
});
|
||||
break;
|
||||
}
|
||||
element.render("tab", filter);
|
||||
// this.navMove("right");
|
||||
};
|
||||
|
||||
/**
|
||||
* 移动标签导航
|
||||
* @param moveId
|
||||
* 为left:往左边移动
|
||||
* 为right:往右边移动
|
||||
* 为rightMax:跑到最右边
|
||||
* 为leftMax:跑到最左边
|
||||
*/
|
||||
okTab.prototype.navMove = function (moveId, that) {
|
||||
var superEle = $(".ok-tab-title"),//父级元素
|
||||
contWidth = parseInt(superEle.width()),//可显示的宽度
|
||||
elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
|
||||
moveWidth = 0,//移动元素的总宽度
|
||||
postLeft = superEle.scrollLeft();//滚动条位置
|
||||
elTabs.each(function (i, j) {
|
||||
moveWidth += $(j).outerWidth() * 1;
|
||||
});
|
||||
|
||||
var movePost = moveId.toLowerCase().indexOf("left") < 0 ? 1 : -1;//移动方向
|
||||
var moveLeft = postLeft + parseInt((contWidth * 0.25 < 20 ? 20 : contWidth * 0.25) * movePost);
|
||||
|
||||
if (moveWidth > contWidth) {
|
||||
switch (moveId) {
|
||||
case 'left':
|
||||
if (postLeft <= 0) {
|
||||
layer.tips('已到最左边啦', that, {
|
||||
tips: [1, '#000'],
|
||||
time: 2000
|
||||
})
|
||||
}
|
||||
break;
|
||||
case 'leftmax':
|
||||
if (postLeft <= 0) {
|
||||
layer.tips('已到最左边啦', that, {
|
||||
tips: [1, '#000'],
|
||||
time: 2000
|
||||
})
|
||||
}
|
||||
moveLeft = 0;
|
||||
break;
|
||||
case 'right':
|
||||
if (postLeft + contWidth >= moveWidth) {
|
||||
layer.tips('已到最右边啦', that, {
|
||||
tips: [1, '#000'],
|
||||
time: 2000
|
||||
});
|
||||
}
|
||||
break;
|
||||
case 'rightmax':
|
||||
if (postLeft + contWidth >= moveWidth) {
|
||||
layer.tips('已到最右边啦', that, {
|
||||
tips: [1, '#000'],
|
||||
time: 2000
|
||||
});
|
||||
}
|
||||
moveLeft = moveWidth;
|
||||
}
|
||||
superEle.animate({
|
||||
scrollLeft: moveLeft
|
||||
}, 200);
|
||||
}
|
||||
};
|
||||
|
||||
exports("okTab", function (option) {
|
||||
return new okTab().init(option);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue