config.js
var okConfig = {
theme: "blue_theme", //主题色orange_theme|blue_theme
menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式
tabMemory: true, //是否开启tab刷新记忆
tabRefresh: false, //是否开启切换刷新
};
master
parent
71a453d54d
commit
197ba8478f
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
/**
|
||||
* 左侧导航渲染完成之后的操作
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
var okConfig = {
|
||||
theme: "blue_theme", //主题色orange_theme|blue_theme
|
||||
menuArrow: "ok-arrow2", //导航箭头ok-arrow2:箭头,不填为默认样式
|
||||
tabMemory: true, //是否开启tab刷新记忆
|
||||
tabRefresh: false, //是否开启切换刷新
|
||||
};
|
||||
|
|
@ -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);
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue