config.js

var okConfig = {
   theme: "blue_theme", //主题色orange_theme|blue_theme
   menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式
   tabMemory: true,  //是否开启tab刷新记忆
   tabRefresh: false, //是否开启切换刷新
};
master
zhizous 2020-04-06 17:59:35 +08:00
parent 71a453d54d
commit 197ba8478f
6 changed files with 811 additions and 663 deletions

View File

@ -9,6 +9,7 @@
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" href="css/okadmin.css">
<link rel="stylesheet" href="lib/loading/okLoading.css"/>
<script type="text/javascript" src="./js/okconfig.js"></script>
<script type="text/javascript" src="lib/loading/okLoading.js"></script>
</head>
<body class="layui-layout-body">

View File

@ -7,7 +7,6 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
var layer = layui.layer;
var okLayer = layui.okLayer;
var okHoliday = layui.okHoliday;
var okTab = layui.okTab({
// 菜单请求路径
url: "data/navs.json",
@ -18,8 +17,18 @@ layui.use(["element", "layer", "okUtils", "okTab", "okLayer", "okContextMenu", "
return data;
}
});
var config = okUtils.local("okConfig") || okConfig || {};
objOkTab = okTab;
okLoading && okLoading.close();/**关闭加载动画*/
if(config.theme){ //主题颜色
$(".layui-layout-admin").removeClass("orange_theme blue_theme");
$(".layui-layout-admin").addClass(config.theme);
}
if(config.menuArrow){ //tab箭头样式
$("#navBar").addClass(config.menuArrow);
}
/**
* 左侧导航渲染完成之后的操作
*/

6
js/okconfig.js Normal file
View File

@ -0,0 +1,6 @@
var okConfig = {
theme: "blue_theme", //主题色orange_theme|blue_theme
menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式
tabMemory: true, //是否开启tab刷新记忆
tabRefresh: false, //是否开启切换刷新
};

View File

@ -1,4 +1,5 @@
var $;
var config;
String.prototype.format = function () {
//字符串占位符
//eg: var str1 = "hello {0}".format("world");
@ -20,6 +21,7 @@ String.prototype.format = function () {
/**打开缓存中的tabMenu**/
let OpenTabMenuFun = function ($, callback) {
if(config && config.menuArrow){
var tabMenu = sessionStorage.getItem("tabMenu");//已经打开的tab页面
if (tabMenu) {
tabMenu = JSON.parse(tabMenu);
@ -29,6 +31,8 @@ let OpenTabMenuFun = function ($, callback) {
callback();
}
}
}
};
/**删除缓存中的tabMenu**/
@ -43,6 +47,7 @@ let removeTabMenu = function (okTab, callback) {
/**存储打开的tabMenu**/
function saveTabMenuFun($) {
if(config && config.menuArrow) {
let tabTitle = $("<div>" + $("#tabTitle").html() + "</div>");
tabTitle.find("i.layui-tab-close").remove();
let tabMenu = JSON.stringify({
@ -51,12 +56,21 @@ function saveTabMenuFun($) {
});
sessionStorage.setItem('tabMenu', tabMenu);
}
}
layui.define(["element", "jquery"], function (exports) {
layui.define(["element", "jquery", "okUtils"], function (exports) {
var layui = parent.layui || layui;
var okUtils = layui.okUtils;
$ = layui.jquery;
var element = layui.element,
layer = layui.layer;
config = okUtils.local("okConfig") || okConfig || {};
console.log(config);
if(!config.tabMemory){
okUtils.session("tabMenu", null);
okUtils.session("lay-id", null);
}
okTab = function () {
this.tabConfig = {
openTabNum: 30, //最大可打开窗口数量默认30
@ -248,12 +262,17 @@ layui.define(["element", "jquery"], function (exports) {
//`tab(${filter})`
element.on("tab({0})".format(filter), function (data) {
var index = data.index;//点击的某个tab索引
config = okUtils.local("okConfig") || okConfig || {};
sessionStorage.setItem('lay-id', this.getAttribute('lay-id'));
var elSuper = $(".ok-tab"),//视窗元素
elMove = $(".ok-tab-title"),//移动的元素
elTabs = $(".ok-tab-title li"),//所有已存在的tab集合
thatElem = $(elTabs[index]);//当前元素
saveTabMenuFun($);
if(config.tabRefresh){ /**切换刷新*/
$(".ok-tab-content .layui-show").find("iframe")[0].contentWindow.location.reload(true);
}
that.positionTab(elMove, thatElem);
});
};

View File

@ -102,6 +102,52 @@ layui.define(["layer"], function (exprots) {
$(".layui-laypage-btn")[0].click();
});
},
/**
* sessionStorage 二次封装
*/
session: function (name, value) {
if (value) { /**设置*/
if (typeof value == "object") {
sessionStorage.setItem(name, JSON.stringify(value));
} else {
sessionStorage.setItem(name, value);
}
} else if (null !== value) {
/**获取*/
let val = sessionStorage.getItem(name);
try {
val = JSON.parse(val);
return val;
} catch (err) {
return val;
}
} else { /**清除*/
return sessionStorage.removeItem(name);
}
},
/**
* localStorage 二次封装
*/
local: function (name, value) {
if (value) { /**设置*/
if (typeof value == "object") {
localStorage.setItem(name, JSON.stringify(value));
} else {
localStorage.setItem(name, value);
}
} else if (null !== value) {
/**获取*/
let val = localStorage.getItem(name);
try {
val = JSON.parse(val);
return val;
} catch (err) {
return val;
}
} else { /**清除*/
return localStorage.removeItem(name);
}
},
/**
* 获取父窗体的okTab
* @returns {string}

View File

@ -3,17 +3,22 @@
<head>
<meta charset="UTF-8">
<title>系统设置</title>
<link rel="stylesheet" href="../../css/oksub.css">
<!--<link rel="stylesheet" href="../../css/oksub.css">-->
<link rel="stylesheet" href="../../css/okadmin.css">
<script type="text/javascript" src="../../js/okconfig.js"></script>
<style type="text/css">
.ok-setting .layui-form-item {
margin: 0;
}
.ok-setting .set-label {
padding-left: 0;
width: auto;
width: 80px;
text-align: right;
font-size: 16px;
padding-right: 10px;
}
.ok-setting .layui-input-block {
margin: 0;
}
@ -22,11 +27,33 @@
<body>
<div class="layui-card-body ok-setting">
<form class="layui-form" action="javascript:;">
<div class="layui-form-item">
<label class="layui-form-label set-label">主题色:</label>
<div class="layui-input-block">
<input lay-filter="theme" type="radio" name="theme" value="" title="默认">
<input lay-filter="theme" type="radio" name="theme" value="blue_theme" title="蓝色"/>
<input lay-filter="theme" type="radio" name="theme" value="orange_theme" title="橘色"/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label set-label">导航箭头:</label>
<div class="layui-input-block">
<input lay-filter="arrow" type="radio" name="sex" value="" title="默认" checked>
<input lay-filter="arrow" type="radio" name="sex" value="ok-arrow2" title="箭头" >
<input lay-filter="arrow" type="radio" name="arrow" value="" title="默认">
<input lay-filter="arrow" type="radio" name="arrow" value="ok-arrow2" title="箭头">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label set-label">切换刷新:</label>
<div class="layui-input-block">
<input lay-filter="refresh" type="checkbox" name="refresh" lay-skin="switch" lay-text="开启|关闭">
<!--<input lay-filter="arrow" type="checkbox" name="sex" value="" title="默认">-->
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label set-label">tab记忆</label>
<div class="layui-input-block">
<input lay-filter="memory" type="checkbox" name="memory" lay-skin="switch" lay-text="开启|关闭">
<!--<input lay-filter="arrow" type="checkbox" name="sex" value="" title="默认">-->
</div>
</div>
</form>
@ -35,12 +62,32 @@
</html>
<script type="text/javascript" src="../../lib/layui/layui.js"></script>
<script type="text/javascript">
layui.use(['jquery', 'form'], function () {
layui.use(['jquery', 'form', 'okUtils'], function () {
var $ = layui.jquery,
form = layui.form,
okUtils = layui.okUtils,
parentBody = parent.document.body;// 父级dom
var config = okUtils.local("okConfig") || okConfig || {};
var ok_arrow = ['ok-arrow2'];
let ok_arrow = ['ok-arrow2'];
$("input[name=theme]").each(function (i,item) {
if(config.theme == $(item).val()){
$(item).prop("checked", true);
}else {
$(item).prop("checked", false);
}
});
$("input[name=arrow]").each(function (i,item) {
if(config.menuArrow == $(item).val()){
$(item).prop("checked", true);
}else {
$(item).prop("checked", false);
}
});
$("input[name=refresh]").prop("checked", config.tabRefresh);
$("input[name=memory]").prop("checked", config.tabMemory);
form.render();
form.on('radio(arrow)', function (data) { //更改导航箭头样式
if (data.value) {
$(parentBody).find("#navBar").addClass(data.value);
@ -49,6 +96,26 @@
$(parentBody).find("#navBar").removeClass(ok_arrow[i]);
}
}
config.menuArrow = data.value;
okUtils.local("okConfig", config);
});
form.on('switch(refresh)', function (data) { //切换刷新
config.tabRefresh = data.elem.checked;
okUtils.local("okConfig", config);
});
form.on('switch(memory)', function (data) { //tab记忆
config.tabMemory = data.elem.checked;
okUtils.local("okConfig", config);
});
form.on('radio(theme)', function (data) {
$(parentBody).find(".layui-layout-admin").removeClass("orange_theme blue_theme");
$(parentBody).find(".layui-layout-admin").addClass(data.value);
config.theme = data.value;
okUtils.local("okConfig", config);
});
});
</script>