1
This commit is contained in:
你的名字
10
public/static/plugs/lay-module/autocomplete/autocomplete.css
Normal file
10
public/static/plugs/lay-module/autocomplete/autocomplete.css
Normal file
@ -0,0 +1,10 @@
|
||||
.layui-form-autocomplete {position: relative;}
|
||||
.layui-form-autocomplete dl {display: none; position: absolute; left: 0; top: 0; padding: 5px 0; z-index: 999; min-width: 100%; border: 1px solid #d2d2d2; max-height: 300px; overflow-y: auto; background-color: #fff; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,.12); box-sizing: border-box;}
|
||||
.layui-form-autocomplete dl dd, .layui-form-autocomplete dl dt {padding: 0 10px; line-height: 36px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
|
||||
.layui-form-autocomplete dl dt {font-size: 12px; color: #999;}
|
||||
.layui-form-autocomplete dl dd {cursor: pointer;}
|
||||
.layui-form-autocomplete dl dd:hover {background-color: #f2f2f2;}
|
||||
.layui-form-autocomplete .layui-autocomplete-group dd {padding-left: 20px;}
|
||||
.layui-form-autocomplete dl dd.layui-autocomplete-tips {padding-left: 10px!important; color: #999;}
|
||||
.layui-form-autocomplete dl dd.layui-this {background-color: #5FB878; color: #fff;}
|
||||
.layui-form-autocomplete-focus dl {display: block;}
|
||||
190
public/static/plugs/lay-module/autocomplete/autocomplete.js
Normal file
190
public/static/plugs/lay-module/autocomplete/autocomplete.js
Normal file
@ -0,0 +1,190 @@
|
||||
layui.define(['jquery', 'laytpl', 'layer'], function (e) {
|
||||
"use strict";
|
||||
var hint = layui.hint(),
|
||||
$ = layui.jquery,
|
||||
laytpl = layui.laytpl,
|
||||
layer = layui.layer,
|
||||
module = 'autocomplete',
|
||||
filter = 'layui-autocomplete',
|
||||
container = 'layui-form-autocomplete',
|
||||
container_focus = 'layui-form-autocomplete-focus',
|
||||
system = {
|
||||
config: {
|
||||
template: ['<div class="layui-form-autocomplete">', '<dl class="layui-anim layui-anim-upbit">', '</dl>', '</div>'].join(''),
|
||||
layout: ['<dd data-index="{{d.index}}">{{- d.text}}</dd>'].join(''),
|
||||
template_txt: '{{d.text}}',
|
||||
template_val: '{{d.value}}',
|
||||
cache: false
|
||||
},
|
||||
data: {}
|
||||
},
|
||||
callback = function () {
|
||||
var _self = this,
|
||||
_config = _self.config;
|
||||
return {
|
||||
call: function (handle, params) {
|
||||
if (!_self.handles[handle]) return hint.error(handle + " handle is not defined");
|
||||
_self.handles[handle].call(_self, params)
|
||||
}
|
||||
}
|
||||
},
|
||||
job = function (e) {
|
||||
var _self = this;
|
||||
_self.config = $.extend({}, _self.config, system.config, e);
|
||||
_self.render();
|
||||
};
|
||||
job.prototype.config = {
|
||||
response: {
|
||||
code: 'code',
|
||||
data: 'content'
|
||||
},
|
||||
request: {
|
||||
keywords: 'keywords'
|
||||
},
|
||||
time_limit: 300,
|
||||
pullTimer: null,
|
||||
data: {},
|
||||
temp_data: {},
|
||||
params: {},
|
||||
filter: '',
|
||||
method: 'get',
|
||||
ajaxParams: {}
|
||||
}
|
||||
job.prototype.render = function () {
|
||||
var _self = this, _config = _self.config;
|
||||
if (_config.elem = $(_config.elem), _config.where = _config.where || {}, !_config.elem[0]) return _self;
|
||||
var _elem = _config.elem,
|
||||
_container = _elem.next('.' + container),
|
||||
_html = _self.elem = $(laytpl(_config.template).render({}));
|
||||
_config.id = _self.id, _container && _container.remove(), _elem.attr('autocomplete', 'off'), _elem.after(_html);
|
||||
_self.events()
|
||||
}
|
||||
job.prototype.pullData = function () {
|
||||
var _self = this,
|
||||
_config = _self.config,
|
||||
_elem = _config.elem,
|
||||
_container = _elem.next('.' + container);
|
||||
if (!_config.filter) return _self.renderData([]);
|
||||
if ((_config.cache || !_config.url) && Object.keys(_config.data).length > 0) return _self.renderData(_config.data);
|
||||
var keywords = _config.request.keywords
|
||||
var params = {
|
||||
t: new Date().getTime()
|
||||
}
|
||||
params[keywords] = _config.filter;
|
||||
|
||||
var $loading = $('<i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop"></i>');
|
||||
$.ajax($.extend({
|
||||
type: _config.method,
|
||||
url: _config.url,
|
||||
data: $.extend(params, _config.params instanceof Function ? _config.params() :_config.params),
|
||||
contentType: 'text/json,charset=utf-8',
|
||||
dataType: "json",
|
||||
beforeSend: function () {
|
||||
$loading.attr('style', [
|
||||
'position:absolute',
|
||||
'left:' + (_elem.offset().left + _elem.outerWidth() - 20) + 'px',
|
||||
'top:' + _elem.offset().top + 'px',
|
||||
'height:' + _elem.height() + 'px',
|
||||
'line-height:' + _elem.height() + 'px'
|
||||
].join(';'));
|
||||
$loading.appendTo('body');
|
||||
},
|
||||
success: function (resp) {
|
||||
$loading.remove();
|
||||
return 0 != resp[_config.response.code] ? layer.msg(resp[_config.response.data]) : _config.data = resp[_config.response.data], _self.renderData(_config.data)
|
||||
},
|
||||
error: function () {
|
||||
hint.error("请求失败")
|
||||
}
|
||||
}, _config.ajaxParams))
|
||||
}
|
||||
job.prototype.renderData = function (resp) {
|
||||
var _self = this,
|
||||
_config = _self.config,
|
||||
_elem = _config.elem,
|
||||
_container = _elem.next('.' + container),
|
||||
_dom = _container.find('dl'),
|
||||
_list = [];
|
||||
_config.temp_data = [];
|
||||
layui.each(resp, function (i, e) {
|
||||
if (_config.cache) {
|
||||
if (e instanceof Object) {
|
||||
layui.each(e, function (_i, _e) {
|
||||
if (_e.toString().toLowerCase().indexOf(_config.filter.toLowerCase()) > -1) {
|
||||
_config.temp_data.push(e), _list.push(laytpl(_config.layout).render({ index: i, text: laytpl(_config.template_txt).render(e) }));
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
if (e.toString().toLowerCase().indexOf(_config.filter.toLowerCase()) > -1) {
|
||||
_config.temp_data.push(e), _list.push(laytpl(_config.layout).render({ index: i, text: laytpl(_config.template_txt).render(e) }));
|
||||
}
|
||||
}
|
||||
} else {
|
||||
_config.temp_data.push(e), _list.push(laytpl(_config.layout).render({ index: i, text: laytpl(_config.template_txt).render(e) }));
|
||||
}
|
||||
});
|
||||
_dom.html(_list.join('')), _list.length > 0 ? _container.addClass(container_focus) : _container.removeClass(container_focus)
|
||||
}
|
||||
job.prototype.handles = {
|
||||
addData: function (data) {
|
||||
var _self = this,
|
||||
_config = _self.config;
|
||||
if (data instanceof Array) {
|
||||
_config.data = _config.data.concat(data)
|
||||
} else {
|
||||
_config.data.push(data)
|
||||
}
|
||||
},
|
||||
setData: function (data) {
|
||||
var _self = this,
|
||||
_config = _self.config;
|
||||
_config.data = data;
|
||||
}
|
||||
}
|
||||
job.prototype.events = function () {
|
||||
var _self = this,
|
||||
_config = _self.config,
|
||||
_elem = _config.elem,
|
||||
_container = _elem.next('.' + container),
|
||||
_dom = _container.find('dl');
|
||||
_elem.unbind('focus').unbind('input propertychange').on('focus', function () {
|
||||
_config.filter = this.value, _self.renderData(_config.data)
|
||||
}).on('input propertychange', function (e) {
|
||||
var _value = this.value;
|
||||
clearTimeout(_config.pullTimer), _config.pullTimer = setTimeout(function () {
|
||||
_config.filter = _value, _self.pullData()
|
||||
}, _config.time_limit)
|
||||
})
|
||||
$(document).on('click', function (e) {
|
||||
var _target = e.target, _item = _dom.find(_target), _e = _item.length > 0 ? _item.closest('dd') : undefined;
|
||||
if (_target === _elem[0]) return false;
|
||||
if (_e !== undefined) {
|
||||
if (_e.attr('autocomplete-load') !== undefined) return false;
|
||||
var curr_data = _config.temp_data[_e.index()]
|
||||
_elem.val(laytpl(_config.template_val).render(curr_data)), _config.onselect == undefined || _config.onselect(curr_data)
|
||||
}
|
||||
_container.removeClass(container_focus);
|
||||
})
|
||||
}
|
||||
system.init = function (e, c) {
|
||||
var c = c || {}, _self = this, _elems = $(e ? 'input[lay-filter="' + e + '"]' : 'input[' + filter + ']');
|
||||
_elems.each(function (_i, _e) {
|
||||
var _elem = $(_e),
|
||||
_lay_data = _elem.attr('lay-data');
|
||||
try {
|
||||
_lay_data = new Function("return " + _lay_data)()
|
||||
} catch (ex) {
|
||||
return hint.error("autocomplete元素属性lay-data配置项存在语法错误：" + _lay_data)
|
||||
}
|
||||
var _config = $.extend({ elem: this }, system.config, c, _lay_data);
|
||||
_config.url == undefined && (_config.data == undefined || _config.length === 0) && hint.error("autocomplete配置有误，缺少获取数据方式");
|
||||
system.render(_config);
|
||||
})
|
||||
}
|
||||
system.render = function (e) {
|
||||
var j = new job(e);
|
||||
return callback.call(j)
|
||||
}
|
||||
system.init(), e(module, system);
|
||||
});
|
||||
19
public/static/plugs/lay-module/echarts/echarts.js
Normal file
19
public/static/plugs/lay-module/echarts/echarts.js
Normal file
File diff suppressed because one or more lines are too long
492
public/static/plugs/lay-module/echarts/echartsTheme.js
Normal file
492
public/static/plugs/lay-module/echarts/echartsTheme.js
Normal file
@ -0,0 +1,492 @@
|
||||
layui.define(function(exports) {
|
||||
exports('echartsTheme',
|
||||
{
|
||||
"color": [
|
||||
"#3fb1e3",
|
||||
"#6be6c1",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
"backgroundColor": "rgba(252,252,252,0)",
|
||||
"textStyle": {},
|
||||
"title": {
|
||||
"textStyle": {
|
||||
"color": "#666666"
|
||||
},
|
||||
"subtextStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"line": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "3"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "4"
|
||||
}
|
||||
},
|
||||
"symbolSize": "10",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"radar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": "3"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "4"
|
||||
}
|
||||
},
|
||||
"symbolSize": "10",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true
|
||||
},
|
||||
"bar": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"barBorderWidth": 0,
|
||||
"barBorderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"pie": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"scatter": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"boxplot": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"parallel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"sankey": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"gauge": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
}
|
||||
},
|
||||
"candlestick": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#e6a0d2",
|
||||
"color0": "transparent",
|
||||
"borderColor": "#e6a0d2",
|
||||
"borderColor0": "#3fb1e3",
|
||||
"borderWidth": "2"
|
||||
}
|
||||
}
|
||||
},
|
||||
"graph": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"borderWidth": 0,
|
||||
"borderColor": "#ccc"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"normal": {
|
||||
"width": "1",
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"symbolSize": "10",
|
||||
"symbol": "emptyCircle",
|
||||
"smooth": true,
|
||||
"color": [
|
||||
"#3fb1e3",
|
||||
"#6be6c1",
|
||||
"#626c91",
|
||||
"#a0a7e6",
|
||||
"#c4ebad",
|
||||
"#96dee8"
|
||||
],
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"map": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#eeeeee",
|
||||
"borderColor": "#aaaaaa",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(63,177,227,0.25)",
|
||||
"borderColor": "#3fb1e3",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(63,177,227)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"geo": {
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"areaColor": "#eeeeee",
|
||||
"borderColor": "#aaaaaa",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"areaColor": "rgba(63,177,227,0.25)",
|
||||
"borderColor": "#3fb1e3",
|
||||
"borderWidth": 1
|
||||
}
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "rgb(63,177,227)"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"categoryAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"valueAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"logAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeAxis": {
|
||||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#cccccc"
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
"lineStyle": {
|
||||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": [
|
||||
"#eeeeee"
|
||||
]
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"show": false,
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(250,250,250,0.05)",
|
||||
"rgba(200,200,200,0.02)"
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"toolbox": {
|
||||
"iconStyle": {
|
||||
"normal": {
|
||||
"borderColor": "#999999"
|
||||
},
|
||||
"emphasis": {
|
||||
"borderColor": "#666666"
|
||||
}
|
||||
}
|
||||
},
|
||||
"legend": {
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"axisPointer": {
|
||||
"lineStyle": {
|
||||
"color": "#cccccc",
|
||||
"width": 1
|
||||
},
|
||||
"crossStyle": {
|
||||
"color": "#cccccc",
|
||||
"width": 1
|
||||
}
|
||||
}
|
||||
},
|
||||
"timeline": {
|
||||
"lineStyle": {
|
||||
"color": "#626c91",
|
||||
"width": 1
|
||||
},
|
||||
"itemStyle": {
|
||||
"normal": {
|
||||
"color": "#626c91",
|
||||
"borderWidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#626c91"
|
||||
}
|
||||
},
|
||||
"controlStyle": {
|
||||
"normal": {
|
||||
"color": "#626c91",
|
||||
"borderColor": "#626c91",
|
||||
"borderWidth": 0.5
|
||||
},
|
||||
"emphasis": {
|
||||
"color": "#626c91",
|
||||
"borderColor": "#626c91",
|
||||
"borderWidth": 0.5
|
||||
}
|
||||
},
|
||||
"checkpointStyle": {
|
||||
"color": "#3fb1e3",
|
||||
"borderColor": "rgba(63,177,227,0.15)"
|
||||
},
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#626c91"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#626c91"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"color": [
|
||||
"#2a99c9",
|
||||
"#afe8ff"
|
||||
]
|
||||
},
|
||||
"dataZoom": {
|
||||
"backgroundColor": "rgba(255,255,255,0)",
|
||||
"dataBackgroundColor": "rgba(222,222,222,1)",
|
||||
"fillerColor": "rgba(114,230,212,0.25)",
|
||||
"handleColor": "#cccccc",
|
||||
"handleSize": "100%",
|
||||
"textStyle": {
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"markPoint": {
|
||||
"label": {
|
||||
"normal": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
},
|
||||
"emphasis": {
|
||||
"textStyle": {
|
||||
"color": "#ffffff"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
399
public/static/plugs/lay-module/iconPicker/iconPickerFa.js
Normal file
399
public/static/plugs/lay-module/iconPicker/iconPickerFa.js
Normal file
@ -0,0 +1,399 @@
|
||||
/**
|
||||
* fa图标选择器 根据开源项目https://gitee.com/wujiawei0926/iconpicker修改而来
|
||||
* @author wujiawei0926@yeah.net chung@99php.cn
|
||||
* @version 1.1
|
||||
*/
|
||||
|
||||
layui.define(['laypage', 'form'], function (exports) {
|
||||
"use strict";
|
||||
|
||||
var IconPicker = function () {
|
||||
this.v = '1.1';
|
||||
}, _MOD = 'iconPickerFa',
|
||||
_this = this,
|
||||
$ = layui.jquery,
|
||||
laypage = layui.laypage,
|
||||
form = layui.form,
|
||||
BODY = 'body',
|
||||
TIPS = '请选择图标';
|
||||
|
||||
/**
|
||||
* 渲染组件
|
||||
*/
|
||||
IconPicker.prototype.render = function (options) {
|
||||
var opts = options,
|
||||
// DOM选择器
|
||||
elem = opts.elem,
|
||||
// 数据类型：fontClass/unicode
|
||||
url = opts.url,
|
||||
// 是否分页：true/false
|
||||
page = opts.page == null ? true : opts.page,
|
||||
// 每页显示数量
|
||||
limit = opts.limit == null ? 12 : opts.limit,
|
||||
// 是否开启搜索：true/false
|
||||
search = opts.search == null ? true : opts.search,
|
||||
// 每个图标格子的宽度：'43px'或'20%'
|
||||
cellWidth = opts.cellWidth,
|
||||
// 点击回调
|
||||
click = opts.click,
|
||||
// 渲染成功后的回调
|
||||
success = opts.success,
|
||||
// json数据
|
||||
data = {},
|
||||
// 唯一标识
|
||||
tmp = new Date().getTime(),
|
||||
// 初始化时input的值
|
||||
ORIGINAL_ELEM_VALUE = $(elem).val(),
|
||||
TITLE = 'layui-select-title',
|
||||
TITLE_ID = 'layui-select-title-' + tmp,
|
||||
ICON_BODY = 'layui-iconpicker-' + tmp,
|
||||
PICKER_BODY = 'layui-iconpicker-body-' + tmp,
|
||||
PAGE_ID = 'layui-iconpicker-page-' + tmp,
|
||||
LIST_BOX = 'layui-iconpicker-list-box',
|
||||
selected = 'layui-form-selected',
|
||||
unselect = 'layui-unselect';
|
||||
|
||||
var a = {
|
||||
init: function () {
|
||||
data = common.getData(url);
|
||||
|
||||
a.hideElem().createSelect().createBody().toggleSelect();
|
||||
a.preventEvent().inputListen();
|
||||
common.loadCss();
|
||||
|
||||
if (success) {
|
||||
success(this.successHandle());
|
||||
}
|
||||
|
||||
return a;
|
||||
},
|
||||
successHandle: function () {
|
||||
var d = {
|
||||
options: opts,
|
||||
data: data,
|
||||
id: tmp,
|
||||
elem: $('#' + ICON_BODY)
|
||||
};
|
||||
return d;
|
||||
},
|
||||
/**
|
||||
* 隐藏elem
|
||||
*/
|
||||
hideElem: function () {
|
||||
$(elem).hide();
|
||||
return a;
|
||||
},
|
||||
/**
|
||||
* 绘制select下拉选择框
|
||||
*/
|
||||
createSelect: function () {
|
||||
var oriIcon = '<i class="fa">';
|
||||
|
||||
// 默认图标
|
||||
if (ORIGINAL_ELEM_VALUE === '') {
|
||||
ORIGINAL_ELEM_VALUE = 'fa-adjust';
|
||||
|
||||
}
|
||||
|
||||
|
||||
oriIcon = '<i class="fa ' + ORIGINAL_ELEM_VALUE + '">';
|
||||
|
||||
oriIcon += '</i>';
|
||||
|
||||
var selectHtml = '<div class="layui-iconpicker layui-unselect layui-form-select" id="' + ICON_BODY + '">' +
|
||||
'<div class="' + TITLE + '" id="' + TITLE_ID + '">' +
|
||||
'<div class="layui-iconpicker-item">' +
|
||||
'<span class="layui-iconpicker-icon layui-unselect">' +
|
||||
oriIcon +
|
||||
'</span>' +
|
||||
'<i class="layui-edge"></i>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="layui-anim layui-anim-upbit" style="">' +
|
||||
'123' +
|
||||
'</div>';
|
||||
$(elem).after(selectHtml);
|
||||
return a;
|
||||
},
|
||||
/**
|
||||
* 展开/折叠下拉框
|
||||
*/
|
||||
toggleSelect: function () {
|
||||
var item = '#' + TITLE_ID + ' .layui-iconpicker-item,#' + TITLE_ID + ' .layui-iconpicker-item .layui-edge';
|
||||
a.event('click', item, function (e) {
|
||||
var $icon = $('#' + ICON_BODY);
|
||||
if ($icon.hasClass(selected)) {
|
||||
$icon.removeClass(selected).addClass(unselect);
|
||||
} else {
|
||||
// 隐藏其他picker
|
||||
$('.layui-form-select').removeClass(selected);
|
||||
// 显示当前picker
|
||||
$icon.addClass(selected).removeClass(unselect);
|
||||
}
|
||||
e.stopPropagation();
|
||||
});
|
||||
return a;
|
||||
},
|
||||
/**
|
||||
* 绘制主体部分
|
||||
*/
|
||||
createBody: function () {
|
||||
// 获取数据
|
||||
var searchHtml = '';
|
||||
|
||||
if (search) {
|
||||
searchHtml = '<div class="layui-iconpicker-search">' +
|
||||
'<input class="layui-input">' +
|
||||
'<i class="layui-icon"></i>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
// 组合dom
|
||||
var bodyHtml = '<div class="layui-iconpicker-body" id="' + PICKER_BODY + '">' +
|
||||
searchHtml +
|
||||
'<div class="' + LIST_BOX + '"></div> ' +
|
||||
'</div>';
|
||||
$('#' + ICON_BODY).find('.layui-anim').eq(0).html(bodyHtml);
|
||||
a.search().createList().check().page();
|
||||
|
||||
return a;
|
||||
},
|
||||
/**
|
||||
* 绘制图标列表
|
||||
* @param text 模糊查询关键字
|
||||
* @returns {string}
|
||||
*/
|
||||
createList: function (text) {
|
||||
var d = data,
|
||||
l = d.length,
|
||||
pageHtml = '',
|
||||
listHtml = $('<div class="layui-iconpicker-list">')//'<div class="layui-iconpicker-list">';
|
||||
|
||||
// 计算分页数据
|
||||
var _limit = limit, // 每页显示数量
|
||||
_pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1), // 总计多少页
|
||||
_id = PAGE_ID;
|
||||
|
||||
// 图标列表
|
||||
var icons = [];
|
||||
|
||||
for (var i = 0; i < l; i++) {
|
||||
var obj = d[i];
|
||||
|
||||
// 判断是否模糊查询
|
||||
if (text && obj.indexOf(text) === -1) {
|
||||
continue;
|
||||
}
|
||||
|
||||
// 是否自定义格子宽度
|
||||
var style = '';
|
||||
if (cellWidth !== null) {
|
||||
style += ' style="width:' + cellWidth + '"';
|
||||
}
|
||||
|
||||
// 每个图标dom
|
||||
var icon = '<div class="layui-iconpicker-icon-item" title="' + obj + '" ' + style + '>';
|
||||
|
||||
icon += '<i class="fa ' + obj + '"></i>';
|
||||
|
||||
icon += '</div>';
|
||||
|
||||
icons.push(icon);
|
||||
}
|
||||
|
||||
// 查询出图标后再分页
|
||||
l = icons.length;
|
||||
_pages = l % _limit === 0 ? l / _limit : parseInt(l / _limit + 1);
|
||||
for (var i = 0; i < _pages; i++) {
|
||||
// 按limit分块
|
||||
var lm = $('<div class="layui-iconpicker-icon-limit" id="layui-iconpicker-icon-limit-' + tmp + (i + 1) + '">');
|
||||
|
||||
for (var j = i * _limit; j < (i + 1) * _limit && j < l; j++) {
|
||||
lm.append(icons[j]);
|
||||
}
|
||||
|
||||
listHtml.append(lm);
|
||||
}
|
||||
|
||||
// 无数据
|
||||
if (l === 0) {
|
||||
listHtml.append('<p class="layui-iconpicker-tips">无数据</p>');
|
||||
}
|
||||
|
||||
// 判断是否分页
|
||||
if (page) {
|
||||
$('#' + PICKER_BODY).addClass('layui-iconpicker-body-page');
|
||||
pageHtml = '<div class="layui-iconpicker-page" id="' + PAGE_ID + '">' +
|
||||
'<div class="layui-iconpicker-page-count">' +
|
||||
'<span id="' + PAGE_ID + '-current">1</span>/' +
|
||||
'<span id="' + PAGE_ID + '-pages">' + _pages + '</span>' +
|
||||
' (<span id="' + PAGE_ID + '-length">' + l + '</span>)' +
|
||||
'</div>' +
|
||||
'<div class="layui-iconpicker-page-operate">' +
|
||||
'<i class="layui-icon" id="' + PAGE_ID + '-prev" data-index="0" prev></i> ' +
|
||||
'<i class="layui-icon" id="' + PAGE_ID + '-next" data-index="2" next></i> ' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
}
|
||||
|
||||
|
||||
$('#' + ICON_BODY).find('.layui-anim').find('.' + LIST_BOX).html('').append(listHtml).append(pageHtml);
|
||||
return a;
|
||||
},
|
||||
// 阻止Layui的一些默认事件
|
||||
preventEvent: function () {
|
||||
var item = '#' + ICON_BODY + ' .layui-anim';
|
||||
a.event('click', item, function (e) {
|
||||
e.stopPropagation();
|
||||
});
|
||||
return a;
|
||||
},
|
||||
// 分页
|
||||
page: function () {
|
||||
var icon = '#' + PAGE_ID + ' .layui-iconpicker-page-operate .layui-icon';
|
||||
|
||||
$(icon).unbind('click');
|
||||
a.event('click', icon, function (e) {
|
||||
var elem = e.currentTarget,
|
||||
total = parseInt($('#' + PAGE_ID + '-pages').html()),
|
||||
isPrev = $(elem).attr('prev') !== undefined,
|
||||
// 按钮上标的页码
|
||||
index = parseInt($(elem).attr('data-index')),
|
||||
$cur = $('#' + PAGE_ID + '-current'),
|
||||
// 点击时正在显示的页码
|
||||
current = parseInt($cur.html());
|
||||
|
||||
// 分页数据
|
||||
if (isPrev && current > 1) {
|
||||
current = current - 1;
|
||||
$(icon + '[prev]').attr('data-index', current);
|
||||
} else if (!isPrev && current < total) {
|
||||
current = current + 1;
|
||||
$(icon + '[next]').attr('data-index', current);
|
||||
}
|
||||
$cur.html(current);
|
||||
|
||||
// 图标数据
|
||||
$('#' + ICON_BODY + ' .layui-iconpicker-icon-limit').hide();
|
||||
$('#layui-iconpicker-icon-limit-' + tmp + current).show();
|
||||
e.stopPropagation();
|
||||
});
|
||||
return a;
|
||||
},
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
search: function () {
|
||||
var item = '#' + PICKER_BODY + ' .layui-iconpicker-search .layui-input';
|
||||
a.event('input propertychange', item, function (e) {
|
||||
var elem = e.target,
|
||||
t = $(elem).val();
|
||||
a.createList(t);
|
||||
});
|
||||
return a;
|
||||
},
|
||||
/**
|
||||
* 点击选中图标
|
||||
*/
|
||||
check: function () {
|
||||
var item = '#' + PICKER_BODY + ' .layui-iconpicker-icon-item';
|
||||
a.event('click', item, function (e) {
|
||||
var el = $(e.currentTarget).find('.fa'),
|
||||
icon = '';
|
||||
|
||||
var clsArr = el.attr('class').split(/[\s\n]/),
|
||||
cls = clsArr[1],
|
||||
icon = cls;
|
||||
$('#' + TITLE_ID).find('.layui-iconpicker-item .fa').html('').attr('class', clsArr.join(' '));
|
||||
|
||||
|
||||
$('#' + ICON_BODY).removeClass(selected).addClass(unselect);
|
||||
$(elem).val(icon).attr('value', icon);
|
||||
// 回调
|
||||
if (click) {
|
||||
click({
|
||||
icon: icon
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
return a;
|
||||
},
|
||||
// 监听原始input数值改变
|
||||
inputListen: function () {
|
||||
var el = $(elem);
|
||||
a.event('change', elem, function () {
|
||||
var value = el.val();
|
||||
})
|
||||
// el.change(function(){
|
||||
|
||||
// });
|
||||
return a;
|
||||
},
|
||||
event: function (evt, el, fn) {
|
||||
$(BODY).on(evt, el, fn);
|
||||
}
|
||||
};
|
||||
|
||||
var common = {
|
||||
/**
|
||||
* 加载样式表
|
||||
*/
|
||||
loadCss: function () {
|
||||
var css = '.layui-iconpicker {max-width: 280px;}.layui-iconpicker .layui-anim{display:none;position:absolute;left:0;top:42px;padding:5px 0;z-index:899;min-width:100%;border:1px solid #d2d2d2;max-height:300px;overflow-y:auto;background-color:#fff;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12);box-sizing:border-box;}.layui-iconpicker-item{border:1px solid #e6e6e6;width:90px;height:38px;border-radius:4px;cursor:pointer;position:relative;}.layui-iconpicker-icon{border-right:1px solid #e6e6e6;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;display:block;width:60px;height:100%;float:left;text-align:center;background:#fff;transition:all .3s;}.layui-iconpicker-icon i{line-height:38px;font-size:18px;}.layui-iconpicker-item > .layui-edge{left:70px;}.layui-iconpicker-item:hover{border-color:#D2D2D2!important;}.layui-iconpicker-item:hover .layui-iconpicker-icon{border-color:#D2D2D2!important;}.layui-iconpicker.layui-form-selected .layui-anim{display:block;}.layui-iconpicker-body{padding:6px;}.layui-iconpicker .layui-iconpicker-list{background-color:#fff;border:1px solid #ccc;border-radius:4px;}.layui-iconpicker .layui-iconpicker-icon-item{display:inline-block;width:21.1%;line-height:36px;text-align:center;cursor:pointer;vertical-align:top;height:36px;margin:4px;border:1px solid #ddd;border-radius:2px;transition:300ms;}.layui-iconpicker .layui-iconpicker-icon-item i.layui-icon{font-size:17px;}.layui-iconpicker .layui-iconpicker-icon-item:hover{background-color:#eee;border-color:#ccc;-webkit-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;-moz-box-shadow:0 0 2px #aaa,0 0 2px #fff inset;box-shadow:0 0 2px #aaa,0 0 2px #fff inset;text-shadow:0 0 1px #fff;}.layui-iconpicker-search{position:relative;margin:0 0 6px 0;border:1px solid #e6e6e6;border-radius:2px;transition:300ms;}.layui-iconpicker-search:hover{border-color:#D2D2D2!important;}.layui-iconpicker-search .layui-input{cursor:text;display:inline-block;width:86%;border:none;padding-right:0;margin-top:1px;}.layui-iconpicker-search .layui-icon{position:absolute;top:11px;right:4%;}.layui-iconpicker-tips{text-align:center;padding:8px 0;cursor:not-allowed;}.layui-iconpicker-page{margin-top:6px;margin-bottom:-6px;font-size:12px;padding:0 2px;}.layui-iconpicker-page-count{display:inline-block;}.layui-iconpicker-page-operate{display:inline-block;float:right;cursor:default;}.layui-iconpicker-page-operate .layui-icon{font-size:12px;cursor:pointer;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit{display:none;}.layui-iconpicker-body-page .layui-iconpicker-icon-limit:first-child{display:block;}';
|
||||
var $style = $('head').find('style[iconpicker]');
|
||||
if ($style.length === 0) {
|
||||
$('head').append('<style rel="stylesheet" iconpicker>' + css + '</style>');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取数据
|
||||
*/
|
||||
getData: function (url) {
|
||||
var iconlist = [];
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'get',
|
||||
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
|
||||
async: false,
|
||||
success: function (ret) {
|
||||
var exp = /fa-var-(.*):/ig;
|
||||
var result;
|
||||
while ((result = exp.exec(ret)) != null) {
|
||||
iconlist.push('fa-' + result[1]);
|
||||
}
|
||||
},
|
||||
error: function (xhr, textstatus, thrown) {
|
||||
layer.msg('fa图标接口有误');
|
||||
}
|
||||
});
|
||||
return iconlist;
|
||||
}
|
||||
};
|
||||
|
||||
a.init();
|
||||
return new IconPicker();
|
||||
};
|
||||
|
||||
/**
|
||||
* 选中图标
|
||||
* @param filter lay-filter
|
||||
* @param iconName 图标名称，自动识别fontClass/unicode
|
||||
*/
|
||||
IconPicker.prototype.checkIcon = function (filter, iconName) {
|
||||
var el = $('*[lay-filter=' + filter + ']'),
|
||||
p = el.next().find('.layui-iconpicker-item .fa'),
|
||||
c = iconName;
|
||||
|
||||
if (c.indexOf('#xe') > 0) {
|
||||
p.html(c);
|
||||
} else {
|
||||
p.html('').attr('class', 'fa ' + c);
|
||||
}
|
||||
el.attr('value', c).val(c);
|
||||
};
|
||||
|
||||
var iconPicker = new IconPicker();
|
||||
exports(_MOD, iconPicker);
|
||||
});
|
||||
930
public/static/plugs/lay-module/layuimini/layuimini.css
Normal file
930
public/static/plugs/lay-module/layuimini/layuimini.css
Normal file
@ -0,0 +1,930 @@
|
||||
/**
|
||||
配色方案（如有需要，请自行配置）
|
||||
*/
|
||||
/**头部-配色*/
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: #1aa094 !important;
|
||||
}
|
||||
|
||||
.layui-header > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
|
||||
background-color: #197971 !important;
|
||||
}
|
||||
|
||||
.layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
|
||||
background-color: #197971 !important;
|
||||
}
|
||||
|
||||
/**logo-配色*/
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: #243346 !important;
|
||||
}
|
||||
|
||||
/**左侧-配色*/
|
||||
.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul {
|
||||
background-color: #2f4056 !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-child a:hover:not(.layui-this) {
|
||||
background-color: #3b3f4b;
|
||||
}
|
||||
|
||||
/**左侧菜单选中-配色*/
|
||||
.layui-layout-admin .layui-nav-tree .layui-this, .layui-layout-admin .layui-nav-tree .layui-this > a, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: #1aa094 !important;
|
||||
}
|
||||
|
||||
|
||||
/**头部样式 */
|
||||
.layui-layout-admin .header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.layuimini-header-menu, .layui-header {
|
||||
height: 60px !important;
|
||||
}
|
||||
|
||||
.layuimini-header-menu > .layui-nav-item {
|
||||
color: #1b1d21;
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
|
||||
.layui-header > .layui-layout-right > .layui-nav-item {
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
}
|
||||
|
||||
.layui-layout-left {
|
||||
left: 295px !important;
|
||||
}
|
||||
|
||||
.layui-nav.layui-layout-left.layuimini-header-menu.layuimini-pc-show {
|
||||
font-weight: bold;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
|
||||
/**logo演示（通用） */
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
font-weight: bold;
|
||||
color: #ffffff !important;
|
||||
height: 60px !important;
|
||||
line-height: 60px !important;
|
||||
overflow: hidden;
|
||||
line-height: 64px;
|
||||
transition: all .2s !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layuimini-logo img {
|
||||
display: inline-block;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layuimini-logo h1 {
|
||||
display: inline-block;
|
||||
margin: 0 0 0 12px;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
font-size: 20px;
|
||||
font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**缩放工具（通用） */
|
||||
.layuimini-tool {
|
||||
position: absolute !important;
|
||||
top: 0;
|
||||
left: 235px;
|
||||
width: 60px;
|
||||
height: 100%;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
color: #ffffff !important;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
/**缩放工具（缩放） */
|
||||
.layuimini-tool i {
|
||||
display: block;
|
||||
color: #bbe3df;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border-radius: 3px;
|
||||
text-align: center;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/**tab选项卡 */
|
||||
.layuimini-tab {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-scroll {
|
||||
position: marker;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-body {
|
||||
height: calc(100% - 37px) !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-body .layui-tabs-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header {
|
||||
border: none;
|
||||
border: 1px solid whitesmoke;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header li {
|
||||
border-right: 1px solid whitesmoke;
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-tab-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-this:after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layuimini-tab-active {
|
||||
display: inline-block;
|
||||
background-color: lightgray;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
border-radius: 30px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-this .layuimini-tab-active {
|
||||
background-color: var(--ea8-theme-main-color);
|
||||
}
|
||||
|
||||
.layuimini-tab > .layui-tabs-header, .layuimini-tab > .close-box {
|
||||
height: 35px !important;
|
||||
}
|
||||
|
||||
.layuimini-tab > .layui-tabs-header li, .layuimini-tab > .close-box li {
|
||||
line-height: 35px !important;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header span {
|
||||
color: #acafb1;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-this span {
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-tab-close {
|
||||
font-size: 12px !important;
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
line-height: 16px !important;
|
||||
margin-left: 5px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .layui-tab-close:hover {
|
||||
border-radius: 4em;
|
||||
background: #ff5722;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .disable-close + .layui-tab-close {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-header .able-close + .layui-tab-close {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control > li {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
width: 35px;
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
border-top: whitesmoke 1px solid;
|
||||
border-bottom: whitesmoke 1px solid;
|
||||
}
|
||||
|
||||
.layuimini-tab .layuimini-tab-roll-left {
|
||||
left: 0;
|
||||
border-right: whitesmoke 1px solid;
|
||||
border-left: whitesmoke 1px solid;
|
||||
}
|
||||
|
||||
.layuimini-tab .layuimini-tab-roll-right {
|
||||
right: 35px;
|
||||
border-left: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool {
|
||||
right: 0;
|
||||
border-left: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-control .layui-tab-tool,
|
||||
.layuimini-tab .layui-tab-control .layuimini-tab-roll-left,
|
||||
.layuimini-tab .layui-tab-control .layuimini-tab-roll-right {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-left,
|
||||
.layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-right {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-right {
|
||||
right: 0;
|
||||
border-right: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-roll .layui-tabs-header {
|
||||
padding-left: 35px;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-tab.layui-tab-tool .layui-tab-control .layui-tab-tool {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-tool .layui-tabs-header {
|
||||
padding-left: 0;
|
||||
padding-right: 35px;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-tab.layui-tab-rollTool .layui-tabs-header {
|
||||
padding-left: 35px;
|
||||
padding-right: 80px;
|
||||
}
|
||||
|
||||
.layuimini-tab.layui-tab-rollTool .layui-tab-control .layuimini-tab-roll-left,
|
||||
.layuimini-tab.layui-tab-rollTool .layui-tab-control .layuimini-tab-roll-right,
|
||||
.layuimini-tab.layui-tab-rollTool .layui-tab-control .layui-tab-tool {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav {
|
||||
position: absolute;
|
||||
height: 43px !important;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0;
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav-item {
|
||||
height: 35px;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-nav-child {
|
||||
left: auto;
|
||||
top: 45px;
|
||||
right: 3px;
|
||||
width: 120px;
|
||||
border: 1px solid whitesmoke;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tab-tool .layui-this a {
|
||||
background-color: #009688;
|
||||
}
|
||||
|
||||
.layuimini-tab-loading {
|
||||
position: absolute;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: calc(100% - 37px);
|
||||
top: 37px;
|
||||
z-index: 19;
|
||||
background-color: #fff
|
||||
}
|
||||
|
||||
.layuimini-tab-loading.close {
|
||||
animation: close 1s;
|
||||
-webkit-animation: close 1s;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
|
||||
/**左侧菜单栏 (通用) */
|
||||
.layui-side.layui-bg-black {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.layui-side.layui-bg-black > .layuimini-menu-left > ul {
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
.layui-side.layui-bg-black > .layuimini-menu-left > ul > .layui-nav-item:first-child {
|
||||
border-top: 1px solid #4b5461;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-right: 30px;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item > a {
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child {
|
||||
background: 0 0 !important
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-more {
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
|
||||
/**左侧菜单栏 (正常) */
|
||||
.layui-layout-body .layui-nav-itemed .layui-nav-child a, .layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child a {
|
||||
padding-left: 35px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child a {
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child .layui-nav-child a {
|
||||
padding-left: 55px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child .layui-nav-child .layui-nav-child .layui-nav-child a {
|
||||
padding-left: 65px;
|
||||
}
|
||||
|
||||
.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-itemed > .layui-nav-child {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
/**内容主体（通用） */
|
||||
.layui-layout-admin .layui-body {
|
||||
overflow: hidden;
|
||||
bottom: 0px !important;
|
||||
top: 60px !important;
|
||||
transition: all .2s;
|
||||
}
|
||||
|
||||
/**选择配色方案 */
|
||||
.layuimini-color .color-title {
|
||||
padding: 10px 0 10px 20px;
|
||||
border-bottom: 1px solid #d9dada;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content {
|
||||
padding: 10px 5px 0 5px;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content ul {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content ul li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: 80px;
|
||||
height: 50px;
|
||||
margin: 0 15px 15px 0;
|
||||
padding: 2px 2px 4px 2px;
|
||||
background-color: #f2f2f2;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content li.layui-this:after, .layuimini-color .color-content li:hover:after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 4px;
|
||||
top: -5px;
|
||||
left: -5px;
|
||||
border-color: #d8d8d8;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.layuimini-color .color-content li:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 1px;
|
||||
height: 0;
|
||||
border: 1px solid #f2f2f2;
|
||||
transition: all .3s;
|
||||
-webkit-transition: all .3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
/**其它 */
|
||||
.layui-tabs-item {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.layui-nav-item.layui-this {
|
||||
background-color: #1b1d21;
|
||||
}
|
||||
|
||||
.layui-width-height {
|
||||
width: 100%;
|
||||
height: 95%;
|
||||
}
|
||||
|
||||
.layui-tab {
|
||||
margin: 0;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
height: 30px !important;
|
||||
line-height: 30px !important;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
.layui-nav {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
|
||||
width: 0 !important;
|
||||
height: 0 !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-side {
|
||||
top: 60px !important;
|
||||
}
|
||||
|
||||
.layui-tab-card {
|
||||
box-shadow: 0px 0px 0px #888888;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
/**自定义滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
display: none
|
||||
}
|
||||
|
||||
|
||||
/*移动端遮罩层*/
|
||||
.layuimini-make {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-header {
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
/**初始化加载层*/
|
||||
.layuimini-loader {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #ffffff;
|
||||
z-index: 999999;
|
||||
}
|
||||
|
||||
.layuimini-loader .layuimini-loader-inner {
|
||||
display: block;
|
||||
position: relative;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
margin: -75px 0 0 -75px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #1E9FFF;
|
||||
animation: spin 2s linear infinite;
|
||||
}
|
||||
|
||||
.layuimini-loader .layuimini-loader-inner:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 5px;
|
||||
right: 5px;
|
||||
bottom: 5px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #1E9FFF;
|
||||
animation: spin 3s linear infinite;
|
||||
}
|
||||
|
||||
.layuimini-loader .layuimini-loader-inner:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
bottom: 15px;
|
||||
border-radius: 50%;
|
||||
border: 3px solid transparent;
|
||||
border-top-color: #1E9FFF;
|
||||
animation: spin 1.5s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(1turn);
|
||||
}
|
||||
}
|
||||
|
||||
/*系统设置*/
|
||||
|
||||
.layuimini-color .layui-word-aux {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.layuimini-color .layui-input-block {
|
||||
margin-left: 15px;
|
||||
min-height: 36px;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-list {
|
||||
width: 100%;
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
|
||||
.layuimini-color .more-menu-item:first-child {
|
||||
border-top: 1px solid #e8e8e8;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item .layui-icon {
|
||||
font-size: 18px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
font-size: 16px;
|
||||
padding: 0 25px;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
font-style: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-color .more-menu-item:after {
|
||||
color: #8c8c8c;
|
||||
right: 16px;
|
||||
content: "\e602";
|
||||
position: absolute;
|
||||
font-family: layui-icon !important;
|
||||
}
|
||||
|
||||
/**
|
||||
鼠标右键
|
||||
*/
|
||||
.layuimini-tab-mousedown {
|
||||
display: none;
|
||||
width: 80px;
|
||||
position: fixed;
|
||||
top: 55px !important;
|
||||
left: 0 !important;
|
||||
z-index: 99999;
|
||||
}
|
||||
|
||||
.layuimini-tab-mousedown dd a {
|
||||
padding: 0 15px;
|
||||
color: #484545;
|
||||
}
|
||||
|
||||
.layuimini-tab-make {
|
||||
position: absolute;
|
||||
top: 36px;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: rgb(255, 255, 255, 0);
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/**
|
||||
菜单缩放
|
||||
*/
|
||||
.popup-tips .layui-layer-TipsG {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.popup-tips.layui-layer-tips .layui-layer-content {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popup-tips .layui-nav-tree {
|
||||
width: 150px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/**左侧菜单字体间距*/
|
||||
.layuimini-menu-left .layui-nav-item a span {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/**头部菜单字体间距*/
|
||||
.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-pc-show, .layui-layout-admin .layui-header .layuimini-header-menu.layuimini-mobile-show {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
|
||||
/**左侧菜单更多下拉样式*/
|
||||
.layuimini-menu-left .layui-nav-more, .layuimini-menu-left-zoom .layui-nav-more {
|
||||
font-family: layui-icon !important;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
width: auto;
|
||||
height: auto;
|
||||
line-height: normal;
|
||||
border: none;
|
||||
display: inline-block;
|
||||
margin-top: -6px !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-child .layui-nav-more {
|
||||
margin-top: -6px !important;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-more:before, .layuimini-menu-left-zoom .layui-nav-more:before {
|
||||
content: "\e61a";
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more, .layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more {
|
||||
transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-webkit-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
width: 12px;
|
||||
text-align: center;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more:before, .layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more:before {
|
||||
content: '\e61a';
|
||||
background-color: transparent;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/**修复左侧菜单字体不对齐的问题*/
|
||||
.layuimini-menu-left .layui-nav-item a .fa, .layuimini-menu-left .layui-nav-item a .layui-icon {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
PC版样式
|
||||
*/
|
||||
@media screen and (min-width: 1025px) {
|
||||
/**头部样式（缩放） */
|
||||
.layuimini-mini .layui-layout-left.layuimini-header-menu.layuimini-pc-show {
|
||||
left: 155px !important;
|
||||
}
|
||||
|
||||
/**logo演示（缩放） */
|
||||
.layuimini-mini .layui-layout-admin .layuimini-logo {
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-layout-admin .layuimini-logo h1 {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**左侧菜单栏（缩放） */
|
||||
.layuimini-mini .layuimini-menu-left {
|
||||
width: 80px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-side.layui-bg-black, .layuimini-mini .layuimini-menu-left > ul, .layuimini-mini .layuimini-menu-left > ul li i {
|
||||
width: 60px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-menu-left > ul li span:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-menu-left > ul li span:last-child {
|
||||
float: right;
|
||||
right: 7px;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-menu-left .layui-nav .layui-nav-item a {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-right: 0px !important;
|
||||
}
|
||||
|
||||
/**内容主体（缩放） */
|
||||
.layuimini-mini .layui-layout-admin .layui-body {
|
||||
left: 60px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-tool {
|
||||
left: 95px !important;
|
||||
}
|
||||
|
||||
.layuimini-pc-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-mobile-show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/**菜单缩放*/
|
||||
.layuimini-mini .layuimini-menu-left .layui-nav-more, .layuimini-mini .layuimini-menu-left .layui-nav-child {
|
||||
display: none;
|
||||
!important;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
手机自适应样式
|
||||
*/
|
||||
@media screen and (max-width: 1024px) {
|
||||
|
||||
/**
|
||||
todo 修复低版本IOS不能滑动问题, 但还是有问题, 低版本IOS部分情况下子页面无法自适应
|
||||
*/
|
||||
.layuimini-tab .layui-tabs-body .layui-tabs-item {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
overflow: scroll;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.layuimini-tab .layui-tabs-body .layui-tabs-item iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.layuimini-pc-show {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-mobile-show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-header-content {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-body .layui-tabs-item.layui-show {
|
||||
border-top: 1px solid #e2e2e2;
|
||||
}
|
||||
|
||||
.layuimini-all .layui-layout-left.layuimini-header-menu {
|
||||
left: 15px !important
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-layout-left.layuimini-header-menu {
|
||||
left: 205px !important
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-nav.layui-layout-right > li:not(.layuimini-setting) {
|
||||
width: 40px !important;
|
||||
}
|
||||
|
||||
.layui-layout-admin .layui-nav.layui-layout-right > li:not(.layuimini-setting) a {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.layuimini-all .layui-layout-admin .layui-body {
|
||||
left: 0px !important;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-layout-admin .layuimini-menu-left, .layuimini-mini .layui-header .layuimini-logo {
|
||||
left: 0;
|
||||
transition: left .2s;
|
||||
z-index: 1001 !important;
|
||||
}
|
||||
|
||||
.layuimini-all .layui-layout-admin .layuimini-menu-left, .layuimini-all .layui-header .layuimini-logo {
|
||||
left: -200px;
|
||||
transition: left .2s;
|
||||
top: 0;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.layuimini-mini .layui-layout-admin .layui-body {
|
||||
left: 0 !important;
|
||||
transition: left .2s;
|
||||
top: 0;
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-make {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.layuimini-multi-module .layuimini-header-content .layuimini-tool {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layuimini-single-module .layuimini-header-content .layuimini-tool {
|
||||
left: 15px;
|
||||
}
|
||||
|
||||
.layuimini-mini .layuimini-site-mobile {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.layuimini-site-mobile {
|
||||
display: block !important;
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
bottom: 15px;
|
||||
left: 15px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
border-radius: 2px;
|
||||
text-align: center;
|
||||
background-color: rgba(0, 0, 0, .7);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.layuimini-header-content {
|
||||
z-index: 997;
|
||||
}
|
||||
|
||||
/*修复UC之类的浏览器点击无效*/
|
||||
.layuimini-make {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layuimini-site-mobile {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 550px) {
|
||||
|
||||
/**头部右侧数据*/
|
||||
.layuimini-multi-module.layuimini-mini .layuimini-header-content .layui-layout-right {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
435
public/static/plugs/lay-module/layuimini/miniAdmin.js
Normal file
435
public/static/plugs/lay-module/layuimini/miniAdmin.js
Normal file
@ -0,0 +1,435 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 主体框架扩展
|
||||
*/
|
||||
|
||||
|
||||
define(["jquery", "miniMenu", "miniTheme", "miniTab", "colorMode"], function ($, miniMenu, miniTheme, miniTab, colorMode) {
|
||||
|
||||
var $ = layui.$,
|
||||
layer = layui.layer,
|
||||
element = layui.element;
|
||||
|
||||
if (!/http(s*):\/\//.test(location.href)) {
|
||||
var tips = "请先将项目部署至web容器（Apache/Tomcat/Nginx/IIS/等），否则部分数据将无法显示";
|
||||
return layer.alert(tips);
|
||||
}
|
||||
|
||||
|
||||
var miniAdmin = {
|
||||
|
||||
/**
|
||||
* 后台框架初始化
|
||||
* @param options.iniUrl 后台初始化接口地址
|
||||
* @param options.clearUrl 后台清理缓存接口
|
||||
* @param options.urlHashLocation URL地址hash定位
|
||||
* @param options.bgColorDefault 默认皮肤
|
||||
* @param options.multiModule 是否开启多模块
|
||||
* @param options.menuChildOpen 是否展开子菜单
|
||||
* @param options.loadingTime 初始化加载时间
|
||||
* @param options.pageAnim iframe窗口动画
|
||||
* @param options.maxTabNum 最大的tab打开数量
|
||||
*/
|
||||
render: function (options) {
|
||||
options.iniUrl = options.iniUrl || null;
|
||||
options.clearUrl = options.clearUrl || null;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.menuChildOpen = options.menuChildOpen || false;
|
||||
options.loadingTime = options.loadingTime || 1;
|
||||
options.pageAnim = options.pageAnim || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
$.getJSON(options.iniUrl, function (data) {
|
||||
if (data == null) {
|
||||
miniAdmin.error('暂无菜单信息')
|
||||
} else {
|
||||
miniAdmin.renderLogo(data.logoInfo);
|
||||
miniAdmin.renderClear(options.clearUrl);
|
||||
miniAdmin.renderHome(data.homeInfo);
|
||||
miniAdmin.renderAnim(options.pageAnim);
|
||||
miniAdmin.listen();
|
||||
miniMenu.render({
|
||||
menuList: data.menuInfo,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen
|
||||
});
|
||||
miniTab.render({
|
||||
filter: 'layuiminiTab',
|
||||
urlHashLocation: options.urlHashLocation,
|
||||
multiModule: options.multiModule,
|
||||
menuChildOpen: options.menuChildOpen,
|
||||
maxTabNum: options.maxTabNum,
|
||||
menuList: data.menuInfo,
|
||||
homeInfo: data.homeInfo,
|
||||
listenSwichCallback: function () {
|
||||
miniAdmin.renderDevice();
|
||||
}
|
||||
});
|
||||
miniTheme.render({
|
||||
bgColorDefault: options.bgColorDefault,
|
||||
listen: true,
|
||||
});
|
||||
miniAdmin.deleteLoader(options.loadingTime);
|
||||
}
|
||||
}).fail(function () {
|
||||
miniAdmin.error('菜单接口有误');
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化logo
|
||||
* @param data
|
||||
*/
|
||||
renderLogo: function (data) {
|
||||
var html = '<a href="' + data.href + '"><img src="' + data.image + '" alt="logo"><h1>' + data.title + '</h1></a>';
|
||||
$('.layuimini-logo').html(html);
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化首页
|
||||
* @param data
|
||||
*/
|
||||
renderHome: function (data) {
|
||||
sessionStorage.setItem('layuiminiHomeHref', data.href);
|
||||
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
|
||||
$('#layuiminiHomeTabId').attr('lay-id', data.href);
|
||||
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化缓存地址
|
||||
* @param clearUrl
|
||||
*/
|
||||
renderClear: function (clearUrl) {
|
||||
$('.layuimini-clear').attr('data-href', clearUrl);
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化iframe窗口动画
|
||||
* @param anim
|
||||
*/
|
||||
renderAnim: function (anim) {
|
||||
if (anim) {
|
||||
$('#layuimini-bg-color').after('<style id="layuimini-page-anim">' +
|
||||
'.layui-tab-item.layui-show {animation:moveTop 1s;-webkit-animation:moveTop 1s;animation-fill-mode:both;-webkit-animation-fill-mode:both;position:relative;height:100%;-webkit-overflow-scrolling:touch;}\n' +
|
||||
'@keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-o-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-moz-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}\n' +
|
||||
'@-webkit-keyframes moveTop {0% {opacity:0;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px);}\n' +
|
||||
' 100% {opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}\n' +
|
||||
'}' +
|
||||
'</style>');
|
||||
}
|
||||
},
|
||||
|
||||
fullScreen: function () {
|
||||
var el = document.documentElement;
|
||||
var rfs = el.requestFullScreen || el.webkitRequestFullScreen;
|
||||
if (typeof rfs != "undefined" && rfs) {
|
||||
rfs.call(el);
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript != null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
} else if (el.msRequestFullscreen) {
|
||||
el.msRequestFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oRequestFullscreen();
|
||||
} else if (el.webkitRequestFullscreen) {
|
||||
el.webkitRequestFullscreen();
|
||||
} else if (el.mozRequestFullScreen) {
|
||||
el.mozRequestFullScreen();
|
||||
} else {
|
||||
miniAdmin.error('浏览器不支持全屏调用！');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 退出全屏
|
||||
*/
|
||||
exitFullScreen: function () {
|
||||
var el = document;
|
||||
var cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.exitFullScreen;
|
||||
if (typeof cfs != "undefined" && cfs) {
|
||||
cfs.call(el);
|
||||
} else if (typeof window.ActiveXObject != "undefined") {
|
||||
var wscript = new ActiveXObject("WScript.Shell");
|
||||
if (wscript != null) {
|
||||
wscript.SendKeys("{F11}");
|
||||
}
|
||||
} else if (el.msExitFullscreen) {
|
||||
el.msExitFullscreen();
|
||||
} else if (el.oRequestFullscreen) {
|
||||
el.oCancelFullScreen();
|
||||
} else if (el.mozCancelFullScreen) {
|
||||
el.mozCancelFullScreen();
|
||||
} else if (el.webkitCancelFullScreen) {
|
||||
el.webkitCancelFullScreen();
|
||||
} else {
|
||||
miniAdmin.error('浏览器不支持全屏调用！');
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化设备端
|
||||
*/
|
||||
renderDevice: function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
$('.layuimini-tool i').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool i').attr('class', 'fa fa-outdent');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 初始化加载时间
|
||||
* @param loadingTime
|
||||
*/
|
||||
deleteLoader: function (loadingTime) {
|
||||
$('.layuimini-loader').fadeOut();
|
||||
},
|
||||
|
||||
/**
|
||||
* 成功
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
success: function (title) {
|
||||
return layer.msg(title, {icon: 1, shade: this.shade, scrollbar: false, time: 2000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 失败
|
||||
* @param title
|
||||
* @returns {*}
|
||||
*/
|
||||
error: function (title) {
|
||||
return layer.msg(title, {icon: 2, shade: this.shade, scrollbar: false, time: 3000, shadeClose: true});
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断是否为手机
|
||||
* @returns {boolean}
|
||||
*/
|
||||
checkMobile: function () {
|
||||
var ua = navigator.userAgent.toLocaleLowerCase();
|
||||
var pf = navigator.platform.toLocaleLowerCase();
|
||||
var isAndroid = (/android/i).test(ua) || ((/iPhone|iPod|iPad/i).test(ua) && (/linux/i).test(pf))
|
||||
|| (/ucweb.*linux/i.test(ua));
|
||||
var isIOS = (/iPhone|iPod|iPad/i).test(ua) && !isAndroid;
|
||||
var isWinPhone = (/Windows Phone|ZuneWP7/i).test(ua);
|
||||
var clientWidth = document.documentElement.clientWidth;
|
||||
if (!isAndroid && !isIOS && !isWinPhone && clientWidth > 1024) {
|
||||
return false;
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
layui.form.on('switch(header-theme-mode)', function (data) {
|
||||
let checked = data.elem.checked;
|
||||
let mode = checked ? 'dark' : 'light';
|
||||
changeTheme(mode);
|
||||
});
|
||||
|
||||
/**
|
||||
* 浅色和暗色主题切换
|
||||
*/
|
||||
const theme = colorMode.init({
|
||||
onChanged(mode, defaultHandler) {
|
||||
const isAppearanceTransition =
|
||||
document.startViewTransition && !window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
|
||||
const isDark = mode === 'dark';
|
||||
//跟随windows系统主题色的变化而变化，但没法保存选择的元素风格
|
||||
// var darkThemeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
// var preferredDark = darkThemeMediaQuery.matches;
|
||||
// var currMode = preferredDark ? 'dark' : 'light';
|
||||
// changeTheme(currMode);
|
||||
$('#change-theme').attr('class', `layui-icon layui-icon-${isDark ? 'moon' : 'light'}`);
|
||||
|
||||
if (!isAppearanceTransition) {
|
||||
defaultHandler();
|
||||
} else {
|
||||
rippleViewTransition(isDark, function () {
|
||||
// 动画需要
|
||||
document.documentElement.classList[isDark ? 'add' : 'remove']('dark');
|
||||
defaultHandler();
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
//切换特效
|
||||
function rippleViewTransition(isDark, callback) {
|
||||
// 移植自 https://github.com/vuejs/vitepress/pull/2347
|
||||
// 支持 Chrome 111+
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));
|
||||
const transition = document.startViewTransition(function () {
|
||||
callback && callback();
|
||||
});
|
||||
transition.ready.then(function () {
|
||||
var clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark ? clipPath : [...clipPath].reverse(),
|
||||
},
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: isDark ? '::view-transition-new(root)' : '::view-transition-old(root)',
|
||||
}
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
//改变主题
|
||||
function changeTheme(mode) {
|
||||
switch (mode) {
|
||||
case 'dark':
|
||||
localStorage.setItem('layuiminiBgColorId', '1');
|
||||
localStorage.setItem('layuiminiElemStyleName', 'dark');
|
||||
changeBgColor(1);
|
||||
break;
|
||||
case 'light':
|
||||
localStorage.setItem('layuiminiBgColorId', '0');
|
||||
localStorage.setItem('layuiminiElemStyleName', 'normal');
|
||||
changeBgColor(0);
|
||||
break
|
||||
}
|
||||
window.onInitElemStyle()
|
||||
}
|
||||
|
||||
//改变配色
|
||||
function changeBgColor(id) {
|
||||
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
||||
$(this).attr('class', 'layui-this');
|
||||
localStorage.setItem('layuiminiBgColorId', id);
|
||||
miniTheme.render({
|
||||
bgColorDefault: id,
|
||||
listen: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 清理
|
||||
*/
|
||||
$('body').on('click', '[data-clear]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
sessionStorage.clear();
|
||||
|
||||
// 判断是否清理服务端
|
||||
var clearUrl = $(this).attr('data-href');
|
||||
if (clearUrl != undefined && clearUrl != '' && clearUrl != null) {
|
||||
$.getJSON(clearUrl, function (data, status) {
|
||||
layer.close(loading);
|
||||
if (data.code != 1) {
|
||||
return miniAdmin.error(data.msg);
|
||||
} else {
|
||||
return miniAdmin.success(data.msg);
|
||||
}
|
||||
}).fail(function () {
|
||||
layer.close(loading);
|
||||
return miniAdmin.error('清理缓存接口有误');
|
||||
});
|
||||
} else {
|
||||
layer.close(loading);
|
||||
return miniAdmin.success('清除缓存成功');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 刷新
|
||||
*/
|
||||
$('body').on('click', '[data-refresh]', function () {
|
||||
$(".layui-tabs-item.layui-show").find("iframe")[0].contentWindow.location.reload();
|
||||
miniAdmin.success('刷新成功');
|
||||
});
|
||||
|
||||
/**
|
||||
* 监听提示信息
|
||||
*/
|
||||
$("body").on("mouseenter", ".layui-nav-tree .menu-li", function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var classInfo = $(this).attr('class'),
|
||||
tips = $(this).prop("innerHTML"),
|
||||
isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0 && tips) {
|
||||
tips = "<ul class='layuimini-menu-left-zoom layui-nav layui-nav-tree layui-this'><li class='layui-nav-item layui-nav-itemed'>" + tips + "</li></ul>";
|
||||
window.openTips = layer.tips(tips, $(this), {
|
||||
tips: [2, '#2f4056'],
|
||||
time: 300000,
|
||||
skin: "popup-tips",
|
||||
success: function (el) {
|
||||
var left = $(el).position().left - 10;
|
||||
$(el).css({left: left});
|
||||
element.render();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
$("body").on("mouseleave", ".popup-tips", function () {
|
||||
if (miniAdmin.checkMobile()) {
|
||||
return false;
|
||||
}
|
||||
var isShow = $('.layuimini-tool i').attr('data-side-fold');
|
||||
if (isShow == 0) {
|
||||
try {
|
||||
layer.close(window.openTips);
|
||||
} catch (e) {
|
||||
console.log(e.message);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* 全屏
|
||||
*/
|
||||
$('body').on('click', '[data-check-screen]', function () {
|
||||
var check = $(this).attr('data-check-screen');
|
||||
if (check == 'full') {
|
||||
miniAdmin.fullScreen();
|
||||
$(this).attr('data-check-screen', 'exit');
|
||||
$(this).html('<i class="fa fa-compress"></i>');
|
||||
} else {
|
||||
miniAdmin.exitFullScreen();
|
||||
$(this).attr('data-check-screen', 'full');
|
||||
$(this).html('<i class="fa fa-arrows-alt"></i>');
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 点击遮罩层
|
||||
*/
|
||||
$('body').on('click', '.layuimini-make', function () {
|
||||
miniAdmin.renderDevice();
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
return miniAdmin;
|
||||
});
|
||||
257
public/static/plugs/lay-module/layuimini/miniMenu.js
Normal file
257
public/static/plugs/lay-module/layuimini/miniMenu.js
Normal file
@ -0,0 +1,257 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 菜单框架扩展
|
||||
*/
|
||||
define(["jquery"], function ($) {
|
||||
var element = layui.element,
|
||||
$ = layui.$,
|
||||
laytpl = layui.laytpl,
|
||||
layer = layui.layer;
|
||||
|
||||
var miniMenu = {
|
||||
|
||||
/**
|
||||
* 菜单初始化
|
||||
* @param options.menuList 菜单数据信息
|
||||
* @param options.multiModule 是否开启多模块
|
||||
* @param options.menuChildOpen 是否展开子菜单
|
||||
*/
|
||||
render: function (options) {
|
||||
options.menuList = options.menuList || [];
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.menuChildOpen = options.menuChildOpen || false;
|
||||
if (options.multiModule) {
|
||||
miniMenu.renderMultiModule(options.menuList, options.menuChildOpen);
|
||||
} else {
|
||||
miniMenu.renderSingleModule(options.menuList, options.menuChildOpen);
|
||||
}
|
||||
miniMenu.listen();
|
||||
},
|
||||
|
||||
/**
|
||||
* 单模块
|
||||
* @param menuList 菜单数据
|
||||
* @param menuChildOpen 是否默认展开
|
||||
*/
|
||||
renderSingleModule: function (menuList, menuChildOpen) {
|
||||
menuList = menuList || [];
|
||||
var leftMenuHtml = '',
|
||||
childOpenClass = '',
|
||||
leftMenuCheckDefault = 'layui-this';
|
||||
var me = this ;
|
||||
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
|
||||
leftMenuHtml = this.renderLeftMenu(menuList,{ childOpenClass:childOpenClass }) ;
|
||||
$('.layui-layout-body').addClass('layuimini-single-module'); //单模块标识
|
||||
$('.layuimini-header-menu').remove();
|
||||
$('.layuimini-menu-left').html(leftMenuHtml);
|
||||
|
||||
element.init();
|
||||
},
|
||||
|
||||
/**
|
||||
* 渲染一级菜单
|
||||
*/
|
||||
compileMenu: function(menu,isSub){
|
||||
var menuHtml = '<li {{#if( d.menu){ }} data-menu="{{- d.menu}}" {{#}}} class="layui-nav-item menu-li {{- d.childOpenClass}} {{- d.className}}" {{#if( d.id){ }} id="{{- d.id}}" {{#}}}> <a {{#if( d.href){ }} layuimini-href="{{- d.href}}" {{#}}} {{#if( d.target){ }} target="{{- d.target}}" {{#}}} href="javascript:;">{{#if( d.icon){ }} <i class="{{- d.icon}}"></i> {{#}}} <span class="layui-left-nav">{{- d.title}}</span></a> {{# if(d.children){}} {{- d.children}} {{#}}} </li>' ;
|
||||
if(isSub){
|
||||
menuHtml = '<dd class="menu-dd {{- d.childOpenClass}} {{ d.className }}"> <a href="javascript:;" {{#if( d.menu){ }} data-menu="{{- d.menu}}" {{#}}} {{#if( d.id){ }} id="{{- d.id}}" {{#}}} {{#if(( !d.child || !d.child.length ) && d.href){ }} layuimini-href="{{- d.href}}" {{#}}} {{#if( d.target){ }} target="{{- d.target}}" {{#}}}> {{#if( d.icon){ }} <i class="{{- d.icon}}"></i> {{#}}} <span class="layui-left-nav"> {{- d.title}}</span></a> {{# if(d.children){}} {{- d.children}} {{#}}}</dd>'
|
||||
}
|
||||
return laytpl(menuHtml).render(menu);
|
||||
},
|
||||
compileMenuContainer :function(menu,isSub){
|
||||
var wrapperHtml = '<ul class="layui-nav layui-nav-tree layui-left-nav-tree {{- d.className}}" id="{{- d.id}}">{{- d.children}}</ul>' ;
|
||||
if(isSub){
|
||||
wrapperHtml = '<dl class="layui-nav-child ">{{- d.children}}</dl>' ;
|
||||
}
|
||||
if(!menu.children){
|
||||
return "";
|
||||
}
|
||||
return laytpl(wrapperHtml).render(menu);
|
||||
},
|
||||
|
||||
each:function(list,callback){
|
||||
var _list = [];
|
||||
for(var i = 0 ,length = list.length ; i<length ;i++ ){
|
||||
_list[i] = callback(i,list[i]) ;
|
||||
}
|
||||
return _list ;
|
||||
},
|
||||
renderChildrenMenu:function(menuList,options){
|
||||
var me = this ;
|
||||
menuList = menuList || [] ;
|
||||
var html = this.each(menuList,function (idx,menu) {
|
||||
if(menu.child && menu.child.length){
|
||||
menu.children = me.renderChildrenMenu(menu.child,{ childOpenClass: options.childOpenClass || '' });
|
||||
}
|
||||
menu.className = "" ;
|
||||
menu.childOpenClass = options.childOpenClass || ''
|
||||
return me.compileMenu(menu,true)
|
||||
}).join("");
|
||||
return me.compileMenuContainer({ children:html },true)
|
||||
},
|
||||
renderLeftMenu :function(leftMenus,options){
|
||||
options = options || {};
|
||||
var me = this ;
|
||||
let _i = 0
|
||||
// 左侧菜单遍历
|
||||
var leftMenusHtml = me.each(leftMenus || [],function (idx,leftMenu) {
|
||||
$(leftMenu).each(function (index, child) {
|
||||
options.childOpenClass = ''
|
||||
if (child.child && child.child.length && _i === 0) options.childOpenClass = ' layui-nav-itemed'
|
||||
_i++
|
||||
})
|
||||
var children = me.renderChildrenMenu(leftMenu.child, { childOpenClass:options.childOpenClass });
|
||||
var leftMenuHtml = me.compileMenu({
|
||||
href:leftMenu.href,
|
||||
target:leftMenu.target,
|
||||
childOpenClass:options.childOpenClass,
|
||||
icon:leftMenu.icon,
|
||||
title:leftMenu.title,
|
||||
children:children,
|
||||
className: '',
|
||||
});
|
||||
return leftMenuHtml ;
|
||||
}).join("");
|
||||
|
||||
leftMenusHtml = me.compileMenuContainer({ id:options.parentMenuId,className:options.leftMenuCheckDefault,children:leftMenusHtml }) ;
|
||||
return leftMenusHtml ;
|
||||
},
|
||||
/**
|
||||
* 多模块
|
||||
* @param menuList 菜单数据
|
||||
* @param menuChildOpen 是否默认展开
|
||||
*/
|
||||
renderMultiModule: function (menuList, menuChildOpen) {
|
||||
menuList = menuList || [];
|
||||
var me = this ;
|
||||
var headerMenuHtml = '',
|
||||
headerMobileMenuHtml = '',
|
||||
leftMenuHtml = '',
|
||||
leftMenuCheckDefault = 'layui-this',
|
||||
childOpenClass = '',
|
||||
headerMenuCheckDefault = 'layui-this';
|
||||
|
||||
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
|
||||
var headerMenuHtml = this.each(menuList, function (index, val) { //顶部菜单渲染
|
||||
var menu = 'multi_module_' + index ;
|
||||
var id = menu+"HeaderId";
|
||||
var topMenuItemHtml = "" ;
|
||||
topMenuItemHtml = me.compileMenu({
|
||||
className:headerMenuCheckDefault,
|
||||
menu:menu,
|
||||
id:id,
|
||||
title:val.title,
|
||||
href:"",
|
||||
target:"",
|
||||
children:""
|
||||
});
|
||||
leftMenuHtml+=me.renderLeftMenu(val.child,{
|
||||
parentMenuId:menu,
|
||||
childOpenClass:childOpenClass,
|
||||
leftMenuCheckDefault:leftMenuCheckDefault
|
||||
});
|
||||
headerMobileMenuHtml +=me.compileMenu({ id:id,menu:menu,id:id,icon:val.icon, title:val.title, },true);
|
||||
headerMenuCheckDefault = "";
|
||||
leftMenuCheckDefault = "layui-hide" ;
|
||||
return topMenuItemHtml ;
|
||||
}).join("");
|
||||
$('.layui-layout-body').addClass('layuimini-multi-module'); //多模块标识
|
||||
$('.layuimini-menu-header-pc').html(headerMenuHtml); //电脑
|
||||
$('.layuimini-menu-left').html(leftMenuHtml);
|
||||
$('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); //手机
|
||||
element.init();
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
*/
|
||||
listen: function () {
|
||||
|
||||
/**
|
||||
* 菜单模块切换
|
||||
*/
|
||||
$('body').on('click', '[data-menu]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var menuId = $(this).attr('data-menu');
|
||||
// header
|
||||
$(".layuimini-header-menu .layui-nav-item.layui-this").removeClass('layui-this');
|
||||
$(this).addClass('layui-this');
|
||||
// left
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this").addClass('layui-hide');
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree.layui-this.layui-hide").removeClass('layui-this');
|
||||
$("#" + menuId).removeClass('layui-hide');
|
||||
$("#" + menuId).addClass('layui-this');
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 菜单缩放
|
||||
*/
|
||||
$('body').on('click', '.layuimini-site-mobile', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if (isShow == 1) { // 缩放
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent');
|
||||
$('.layui-layout-body').removeClass('layuimini-all');
|
||||
$('.layui-layout-body').addClass('layuimini-mini');
|
||||
} else { // 正常
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
layer.close(window.openTips);
|
||||
}
|
||||
element.init();
|
||||
layer.close(loading);
|
||||
});
|
||||
/**
|
||||
* 菜单缩放
|
||||
*/
|
||||
$('body').on('click', '[data-side-fold]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var isShow = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if (isShow == 1) { // 缩放
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 0);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-indent');
|
||||
$('.layui-layout-body').removeClass('layuimini-all');
|
||||
$('.layui-layout-body').addClass('layuimini-mini');
|
||||
// $(".menu-li").each(function (idx,el) {
|
||||
// $(el).addClass("hidden-sub-menu");
|
||||
// });
|
||||
|
||||
} else { // 正常
|
||||
$('.layuimini-tool [data-side-fold]').attr('data-side-fold', 1);
|
||||
$('.layuimini-tool [data-side-fold]').attr('class', 'fa fa-outdent');
|
||||
$('.layui-layout-body').removeClass('layuimini-mini');
|
||||
$('.layui-layout-body').addClass('layuimini-all');
|
||||
// $(".menu-li").each(function (idx,el) {
|
||||
// $(el).removeClass("hidden-sub-menu");
|
||||
// });
|
||||
layer.close(window.openTips);
|
||||
}
|
||||
element.init();
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 手机端点开模块
|
||||
*/
|
||||
$('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
|
||||
if(check === "1"){
|
||||
$('.layuimini-site-mobile').trigger("click");
|
||||
element.init();
|
||||
}
|
||||
layer.close(loading);
|
||||
});
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
|
||||
return miniMenu;
|
||||
});
|
||||
579
public/static/plugs/lay-module/layuimini/miniTab.js
Normal file
579
public/static/plugs/lay-module/layuimini/miniTab.js
Normal file
@ -0,0 +1,579 @@
|
||||
/**
|
||||
* date:2020/02/27
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini tab框架扩展
|
||||
*/
|
||||
define(["jquery"], function ($) {
|
||||
var element = layui.element,
|
||||
tabs = layui.tabs,
|
||||
$ = layui.$;
|
||||
|
||||
|
||||
var miniTab = {
|
||||
|
||||
/**
|
||||
* 初始化tab
|
||||
* @param options
|
||||
*/
|
||||
render: function (options) {
|
||||
options.filter = options.filter || null;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
options.menuList = options.menuList || []; // todo 后期菜单想改为不操作dom, 而是直接操作初始化传过来的数据
|
||||
options.homeInfo = options.homeInfo || {};
|
||||
options.listenSwichCallback = options.listenSwichCallback || function () {
|
||||
};
|
||||
miniTab.listen(options);
|
||||
miniTab.listenRoll();
|
||||
miniTab.listenSwitch(options);
|
||||
miniTab.listenHash(options);
|
||||
},
|
||||
|
||||
/**
|
||||
* 新建tab窗口
|
||||
* @param options.tabId
|
||||
* @param options.href
|
||||
* @param options.title
|
||||
* @param options.isIframe
|
||||
* @param options.maxTabNum
|
||||
*/
|
||||
create: function (options) {
|
||||
options.tabId = options.tabId || null;
|
||||
options.href = options.href || null;
|
||||
options.title = options.title || null;
|
||||
options.isIframe = options.isIframe || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
if ($(".layuimini-tab .layui-tabs-header li").length >= options.maxTabNum) {
|
||||
layer.msg('Tab窗口已达到限定数量，请先关闭部分Tab');
|
||||
return false;
|
||||
}
|
||||
if (options.isIframe) tabs = parent.layui.tabs;
|
||||
tabs.add('layuiminiTab', {
|
||||
title: `<span class="layuimini-tab-active"></span><span>${options.title}</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>`
|
||||
, content: `<iframe width="100%" height="100%" frameborder="no" border="0" src="${options.href}" style="width: 100%; height:100%;"></iframe>`
|
||||
, id: options.tabId
|
||||
});
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'add');
|
||||
sessionStorage.setItem('layuiminimenu_' + options.tabId, options.title);
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* 切换选项卡
|
||||
* @param tabId
|
||||
*/
|
||||
change: function (tabId) {
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除tab窗口
|
||||
* @param tabId
|
||||
* @param isParent
|
||||
*/
|
||||
delete: function (tabId, isParent) {
|
||||
if (isParent === true) {
|
||||
parent.layui.tabs.close('layuiminiTab', tabId);
|
||||
} else {
|
||||
tabs.close('layuiminiTab', tabId);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 在iframe层打开新tab方法
|
||||
*/
|
||||
openNewTabByIframe: function (options) {
|
||||
options.href = options.href || null;
|
||||
options.title = options.title || null;
|
||||
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
|
||||
if (options.href === null || options.href === undefined) options.href = new Date().getTime();
|
||||
var checkTab = miniTab.check(options.href, true);
|
||||
if (!checkTab) {
|
||||
miniTab.create({
|
||||
tabId: options.href,
|
||||
href: options.href,
|
||||
title: options.title,
|
||||
isIframe: true,
|
||||
});
|
||||
}
|
||||
parent.layui.tabs.change('layuiminiTab', options.href);
|
||||
parent.layer.close(loading);
|
||||
},
|
||||
|
||||
/**
|
||||
* 在iframe层关闭当前tab方法
|
||||
*/
|
||||
deleteCurrentByIframe: function () {
|
||||
var ele = $(".layuimini-tab .layui-tabs-header li.layui-this", parent.document);
|
||||
if (ele.length > 0) {
|
||||
var layId = $(ele[0]).attr('lay-id');
|
||||
miniTab.delete(layId, true);
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 判断tab窗口
|
||||
*/
|
||||
check: function (tabId, isIframe) {
|
||||
// 判断选项卡上是否有
|
||||
var checkTab = false;
|
||||
if (isIframe === undefined || isIframe === false) {
|
||||
$(".layui-tabs-header li").each(function () {
|
||||
var checkTabId = $(this).attr('lay-id');
|
||||
if (checkTabId != null && checkTabId === tabId) {
|
||||
checkTab = true;
|
||||
}
|
||||
});
|
||||
} else {
|
||||
parent.layui.$(".layui-tabs-header li").each(function () {
|
||||
var checkTabId = $(this).attr('lay-id');
|
||||
if (checkTabId != null && checkTabId === tabId) {
|
||||
checkTab = true;
|
||||
}
|
||||
});
|
||||
}
|
||||
return checkTab;
|
||||
},
|
||||
|
||||
/**
|
||||
* 开启tab右键菜单
|
||||
* @param tabId
|
||||
* @param left
|
||||
*/
|
||||
openTabRignMenu: function (tabId, left) {
|
||||
miniTab.closeTabRignMenu();
|
||||
var menuHtml = '<div class="layui-unselect layui-form-select layui-form-selected layuimini-tab-mousedown layui-show" data-tab-id="' + tabId + '" style="left: ' + left + 'px!important">\n' +
|
||||
'<dl>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="current">关 闭 当 前</a></dd>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="other">关 闭 其 他</a></dd>\n' +
|
||||
'<dd><a href="javascript:;" layuimini-tab-menu-close="all">关 闭 全 部</a></dd>\n' +
|
||||
'</dl>\n' +
|
||||
'</div>';
|
||||
var makeHtml = '<div class="layuimini-tab-make"></div>';
|
||||
$('.layuimini-tab .layui-tabs-header').after(menuHtml);
|
||||
$('.layuimini-tab .layui-tab-content').after(makeHtml);
|
||||
},
|
||||
|
||||
/**
|
||||
* 关闭tab右键菜单
|
||||
*/
|
||||
closeTabRignMenu: function () {
|
||||
$('.layuimini-tab-mousedown').remove();
|
||||
$('.layuimini-tab-make').remove();
|
||||
},
|
||||
|
||||
/**
|
||||
* 查询菜单信息
|
||||
* @param href
|
||||
* @param menuList
|
||||
*/
|
||||
searchMenu: function (href, menuList) {
|
||||
var menu;
|
||||
for (key in menuList) {
|
||||
var item = menuList[key];
|
||||
if (item.href === href) {
|
||||
menu = item;
|
||||
break;
|
||||
}
|
||||
if (item.child) {
|
||||
newMenu = miniTab.searchMenu(href, item.child);
|
||||
if (newMenu) {
|
||||
menu = newMenu;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
return menu;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
* @param options
|
||||
*/
|
||||
listen: function (options) {
|
||||
options = options || {};
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
|
||||
/**
|
||||
* 打开新窗口
|
||||
*/
|
||||
$('body').on('click', '[layuimini-href]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var tabId = $(this).attr('layuimini-href'),
|
||||
href = $(this).attr('layuimini-href'),
|
||||
title = $(this).text(),
|
||||
target = $(this).attr('target');
|
||||
|
||||
var el = $("[layuimini-href='" + href + "']", ".layuimini-menu-left");
|
||||
layer.close(window.openTips);
|
||||
if (el.length) {
|
||||
$(el).closest(".layui-nav-tree").find(".layui-this").removeClass("layui-this");
|
||||
$(el).parent().addClass("layui-this");
|
||||
}
|
||||
|
||||
if (target === '_blank') {
|
||||
layer.close(loading);
|
||||
window.open(href, "_blank");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
|
||||
var checkTab = miniTab.check(tabId);
|
||||
if (!checkTab) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: href,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
}
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 在iframe子菜单上打开新窗口
|
||||
*/
|
||||
$('body').on('click', '[layuimini-content-href]', function () {
|
||||
var loading = parent.layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var tabId = $(this).attr('layuimini-content-href'),
|
||||
href = $(this).attr('layuimini-content-href'),
|
||||
title = $(this).attr('data-title'),
|
||||
target = $(this).attr('target');
|
||||
if (target === '_blank') {
|
||||
parent.layer.close(loading);
|
||||
window.open(href, "_blank");
|
||||
return false;
|
||||
}
|
||||
if (tabId === null || tabId === undefined) tabId = new Date().getTime();
|
||||
var checkTab = miniTab.check(tabId, true);
|
||||
if (!checkTab) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: href,
|
||||
title: title,
|
||||
isIframe: true,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
}
|
||||
parent.layui.tabs.change('layuiminiTab', tabId);
|
||||
parent.layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭选项卡
|
||||
**/
|
||||
$('body').on('click', '.layuimini-tab .layui-tabs-header .layui-tab-close', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var $parent = $(this).parent();
|
||||
var tabId = $parent.attr('lay-id');
|
||||
if (tabId !== undefined || tabId !== null) {
|
||||
miniTab.delete(tabId);
|
||||
}
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 选项卡操作
|
||||
*/
|
||||
$('body').on('click', '[layuimini-tab-close]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var closeType = $(this).attr('layuimini-tab-close');
|
||||
$(".layuimini-tab .layui-tabs-header li").each(function () {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
var id = $(this).attr('id');
|
||||
var isCurrent = $(this).hasClass('layui-this');
|
||||
if (id !== 'layuiminiHomeTabId') {
|
||||
if (closeType === 'all') {
|
||||
miniTab.delete(tabId);
|
||||
} else {
|
||||
if (closeType === 'current' && isCurrent) {
|
||||
miniTab.delete(tabId);
|
||||
} else if (closeType === 'other' && !isCurrent) {
|
||||
miniTab.delete(tabId);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
/**
|
||||
* 禁用网页右键
|
||||
*/
|
||||
$(".layuimini-tab .layui-tabs-header").unbind("mousedown").bind("contextmenu", function (e) {
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
|
||||
/**
|
||||
* 注册鼠标右键
|
||||
*/
|
||||
$('body').on('mousedown', '.layuimini-tab .layui-tabs-header li', function (e) {
|
||||
var left = e.pageX ,
|
||||
tabId = $(this).attr('lay-id');
|
||||
if (e.which === 3) {
|
||||
e.preventDefault();
|
||||
miniTab.openTabRignMenu(tabId, left);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* 关闭tab右键菜单
|
||||
*/
|
||||
$('body').on('click', '.layui-body,.layui-header,.layuimini-menu-left,.layuimini-tab-make', function () {
|
||||
miniTab.closeTabRignMenu();
|
||||
});
|
||||
|
||||
/**
|
||||
* tab右键选项卡操作
|
||||
*/
|
||||
$('body').on('click', '[layuimini-tab-menu-close]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var closeType = $(this).attr('layuimini-tab-menu-close'),
|
||||
currentTabId = $('.layuimini-tab-mousedown').attr('data-tab-id');
|
||||
$(".layuimini-tab .layui-tabs-header li").each(function () {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
var id = $(this).attr('id');
|
||||
if (id !== 'layuiminiHomeTabId') {
|
||||
if (closeType === 'all') {
|
||||
miniTab.delete(tabId);
|
||||
} else {
|
||||
if (closeType === 'current' && currentTabId === tabId) {
|
||||
miniTab.delete(tabId);
|
||||
} else if (closeType === 'other' && currentTabId !== tabId) {
|
||||
miniTab.delete(tabId);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
miniTab.closeTabRignMenu();
|
||||
layer.close(loading);
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听tab切换
|
||||
* @param options
|
||||
*/
|
||||
listenSwitch: function (options) {
|
||||
options.filter = options.filter || null;
|
||||
options.multiModule = options.multiModule || false;
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.listenSwichCallback = options.listenSwichCallback || function () {
|
||||
|
||||
};
|
||||
tabs.on('afterChange(layuiminiTab)', function (data) {
|
||||
var tabId = $(this).attr('lay-id');
|
||||
if (options.urlHashLocation) {
|
||||
location.hash = tabId;
|
||||
}
|
||||
if (typeof options.listenSwichCallback === 'function') {
|
||||
options.listenSwichCallback();
|
||||
}
|
||||
// 判断是否为新增窗口
|
||||
if ($('.layuimini-menu-left').attr('layuimini-tab-tag') === 'add') {
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no')
|
||||
} else {
|
||||
$("[layuimini-href]").parent().removeClass('layui-this');
|
||||
if (options.multiModule) {
|
||||
miniTab.listenSwitchMultiModule(tabId);
|
||||
} else {
|
||||
miniTab.listenSwitchSingleModule(tabId);
|
||||
}
|
||||
}
|
||||
miniTab.rollPosition();
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听hash变化
|
||||
* @param options
|
||||
* @returns {boolean}
|
||||
*/
|
||||
listenHash: function (options) {
|
||||
options.urlHashLocation = options.urlHashLocation || false;
|
||||
options.maxTabNum = options.maxTabNum || 20;
|
||||
options.homeInfo = options.homeInfo || {};
|
||||
options.menuList = options.menuList || [];
|
||||
if (!options.urlHashLocation) return false;
|
||||
var tabId = location.hash.replace(/^#/, '');
|
||||
if (tabId === null || tabId === undefined || tabId === '') return false;
|
||||
|
||||
// 判断是否为首页
|
||||
if (tabId === options.homeInfo.href) return false;
|
||||
|
||||
// 判断是否为右侧菜单
|
||||
var menu = miniTab.searchMenu(tabId, options.menuList);
|
||||
if (menu !== undefined) {
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: menu.title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 判断是否为快捷菜单
|
||||
var isSearchMenu = false;
|
||||
$("[layuimini-content-href]").each(function () {
|
||||
if ($(this).attr("layuimini-content-href") === tabId) {
|
||||
var title = $(this).attr("data-title");
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
isSearchMenu = true;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
if (isSearchMenu) return false;
|
||||
|
||||
// 既不是右侧菜单、快捷菜单,就直接打开
|
||||
var title = sessionStorage.getItem('layuiminimenu_' + tabId) === null ? tabId : sessionStorage.getItem('layuiminimenu_' + tabId);
|
||||
miniTab.create({
|
||||
tabId: tabId,
|
||||
href: tabId,
|
||||
title: title,
|
||||
isIframe: false,
|
||||
maxTabNum: options.maxTabNum,
|
||||
});
|
||||
tabs.change('layuiminiTab', tabId);
|
||||
return false;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听滚动
|
||||
*/
|
||||
listenRoll: function () {
|
||||
$(".layuimini-tab-roll-left").click(function () {
|
||||
miniTab.rollClick("left");
|
||||
});
|
||||
$(".layuimini-tab-roll-right").click(function () {
|
||||
miniTab.rollClick("right");
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 单模块切换
|
||||
* @param tabId
|
||||
*/
|
||||
listenSwitchSingleModule: function (tabId) {
|
||||
$("[layuimini-href]").each(function () {
|
||||
if ($(this).attr("layuimini-href") === tabId) {
|
||||
// 自动展开菜单栏
|
||||
var addMenuClass = function ($element, type) {
|
||||
if (type === 1) {
|
||||
$element.addClass('layui-this');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
} else {
|
||||
$element.addClass('layui-nav-itemed');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
addMenuClass($(this).parent(), 1);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 多模块切换
|
||||
* @param tabId
|
||||
*/
|
||||
listenSwitchMultiModule: function (tabId) {
|
||||
$("[layuimini-href]").each(function () {
|
||||
if ($(this).attr("layuimini-href") === tabId) {
|
||||
|
||||
// 自动展开菜单栏
|
||||
var addMenuClass = function ($element, type) {
|
||||
if (type === 1) {
|
||||
$element.addClass('layui-this');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-this')) {
|
||||
var moduleId = $element.parent().attr('id');
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
$("#" + moduleId + "HeaderId").addClass("layui-this");
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
|
||||
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
} else {
|
||||
$element.addClass('layui-nav-itemed');
|
||||
if ($element.hasClass('layui-nav-item') && $element.hasClass('layui-nav-itemed')) {
|
||||
var moduleId = $element.parent().attr('id');
|
||||
$(".layuimini-header-menu li").attr('class', 'layui-nav-item');
|
||||
$("#" + moduleId + "HeaderId").addClass("layui-this");
|
||||
$(".layuimini-menu-left .layui-nav.layui-nav-tree").attr('class', 'layui-nav layui-nav-tree layui-hide');
|
||||
$("#" + moduleId).attr('class', 'layui-nav layui-nav-tree layui-this');
|
||||
} else {
|
||||
addMenuClass($element.parent().parent(), 2);
|
||||
}
|
||||
}
|
||||
};
|
||||
addMenuClass($(this).parent(), 1);
|
||||
return false;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 自动定位
|
||||
*/
|
||||
rollPosition: function () {
|
||||
var $tabTitle = $('.layuimini-tab .layui-tabs-header');
|
||||
var autoLeft = 0;
|
||||
$tabTitle.children("li").each(function () {
|
||||
if ($(this).hasClass('layui-this')) {
|
||||
return false;
|
||||
} else {
|
||||
autoLeft += $(this).outerWidth();
|
||||
}
|
||||
});
|
||||
$tabTitle.animate({
|
||||
scrollLeft: autoLeft - $tabTitle.width() / 3
|
||||
}, 200);
|
||||
},
|
||||
|
||||
/**
|
||||
* 点击滚动
|
||||
* @param direction
|
||||
*/
|
||||
rollClick: function (direction) {
|
||||
var $tabTitle = $('.layuimini-tab .layui-tabs-header');
|
||||
var left = $tabTitle.scrollLeft();
|
||||
if ('left' === direction) {
|
||||
$tabTitle.animate({
|
||||
scrollLeft: left - 450
|
||||
}, 200);
|
||||
} else {
|
||||
$tabTitle.animate({
|
||||
scrollLeft: left + 450
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return miniTab;
|
||||
});
|
||||
600
public/static/plugs/lay-module/layuimini/miniTheme.js
Normal file
600
public/static/plugs/lay-module/layuimini/miniTheme.js
Normal file
@ -0,0 +1,600 @@
|
||||
/**
|
||||
* date:2020/02/28
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini tab框架扩展
|
||||
*/
|
||||
define(["jquery"], function ($) {
|
||||
var $ = layui.$,
|
||||
layer = layui.layer;
|
||||
|
||||
var miniTheme = {
|
||||
|
||||
/**
|
||||
* 主题配置项
|
||||
* @param bgcolorId
|
||||
* @returns {{headerLogo, menuLeftHover, headerRight, menuLeft, headerRightThis, menuLeftThis}|*|*[]}
|
||||
*/
|
||||
config: function (bgcolorId) {
|
||||
var bgColorConfig = [
|
||||
{
|
||||
headerRightBg: '#ffffff', //头部右侧背景色
|
||||
headerRightBgThis: '#e4e4e4', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(107, 107, 107, 0.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: 'rgba(107, 107, 107, 0.7)', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#565656', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(160, 160, 160, 0.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1E9FFF', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#565656', //头部缩放按钮样式,
|
||||
headerLogoBg: '#192027', //logo背景颜色,
|
||||
headerLogoColor: 'rgb(191, 187, 187)', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#28333E', //左侧菜单背景,
|
||||
leftMenuBgThis: '#1E9FFF', //左侧菜单选中背景,
|
||||
leftMenuChildBg: '#0c0f13', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#23262e', //头部右侧背景色
|
||||
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: 'rgba(255,255,255,.7)', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: 'rgba(255,255,255,.7)', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: 'rgba(255,255,255,.7)', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#23262e', //左侧菜单背景,
|
||||
leftMenuBgThis: '#484849', //左侧菜单选中背景,
|
||||
leftMenuChildBg: '#23262e', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgba(255,255,255,.9)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: 'rgba(255,255,255,.7)', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#23262e', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffa4d1', //头部右侧背景色
|
||||
headerRightBgThis: '#bf7b9d', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ffa4d1', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#e694bd', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#737373', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffa4d1', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#1aa094', //头部右侧背景色
|
||||
headerRightBgThis: '#197971', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#23262e', //左侧菜单背景,
|
||||
leftMenuBgThis: '#1aa094', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#1aa094', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#1e9fff', //头部右侧背景色
|
||||
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#1e9fff', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#1e9fff', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffb800', //头部右侧背景色
|
||||
headerRightBgThis: '#d09600', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#243346', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#8593a7', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#e82121', //头部右侧背景色
|
||||
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0c0c0c', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#e82121', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#963885', //头部右侧背景色
|
||||
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#243346', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#586473', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#963885', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#2D8CF0', //头部右侧背景色
|
||||
headerRightBgThis: '#0069b7', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#0069b7', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#0069b7', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#2D8CF0', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#2d8cf0', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#ffb800', //头部右侧背景色
|
||||
headerRightBgThis: '#d09600', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#d09600', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#d09600', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#ffb800', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#e82121', //头部右侧背景色
|
||||
headerRightBgThis: '#ae1919', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#ae1919', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#d91f1f', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#1f1f1f', //左侧菜单背景,
|
||||
leftMenuBgThis: '#3b3f4b', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#e82121', //tab选项卡选中颜色,
|
||||
},
|
||||
{
|
||||
headerRightBg: '#963885', //头部右侧背景色
|
||||
headerRightBgThis: '#772c6a', //头部右侧选中背景色,
|
||||
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
|
||||
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
|
||||
headerRightColorThis: '#ffffff', //头部右侧鼠标选中,
|
||||
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
|
||||
headerRightNavMoreBg: '#772c6a', //头部右侧更多下拉列表选中背景色,
|
||||
headerRightNavMoreColor: '#ffffff', //头部右侧更多下拉列表字体色,
|
||||
headerRightToolColor: '#bbe3df', //头部缩放按钮样式,
|
||||
headerLogoBg: '#772c6a', //logo背景颜色,
|
||||
headerLogoColor: '#ffffff', //logo字体颜色,
|
||||
leftMenuNavMore: 'rgb(191, 187, 187)', //左侧菜单更多下拉样式,
|
||||
leftMenuBg: '#2f4056', //左侧菜单背景,
|
||||
leftMenuBgThis: '#626f7f', //左侧菜单选中背景,
|
||||
leftMenuChildBg: 'rgba(0,0,0,.3)', //左侧菜单子菜单背景,
|
||||
leftMenuColor: 'rgb(191, 187, 187)', //左侧菜单字体颜色,
|
||||
leftMenuColorThis: '#ffffff', //左侧菜单选中字体颜色,
|
||||
tabActiveColor: '#963885', //tab选项卡选中颜色,
|
||||
}
|
||||
];
|
||||
if (bgcolorId === undefined) {
|
||||
return bgColorConfig;
|
||||
} else {
|
||||
return bgColorConfig[bgcolorId];
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
* @param options
|
||||
*/
|
||||
render: function (options) {
|
||||
options.bgColorDefault = options.bgColorDefault || false;
|
||||
options.listen = options.listen || false;
|
||||
var bgcolorId = localStorage.getItem('layuiminiBgColorId');
|
||||
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
|
||||
bgcolorId = options.bgColorDefault;
|
||||
}
|
||||
miniTheme.buildThemeCss(bgcolorId);
|
||||
if (options.listen) miniTheme.listen(options);
|
||||
},
|
||||
|
||||
renderElemStyle(elemStyleDefault) {
|
||||
elemStyleDefault = elemStyleDefault || 'light';
|
||||
let elemStyleName = localStorage.getItem('layuiminiElemStyleName');
|
||||
if (!elemStyleName) elemStyleName = elemStyleDefault;
|
||||
let themeModeEle = $('input[name=theme-mode]')
|
||||
if (themeModeEle.length > 0) {
|
||||
if (elemStyleName == 'dark') {
|
||||
themeModeEle.prop('checked', true);
|
||||
} else {
|
||||
themeModeEle.prop('checked', false);
|
||||
}
|
||||
layui.form.render('checkbox', 'header-theme-mode');
|
||||
}
|
||||
miniTheme.buildBodyElemStyle(elemStyleName);
|
||||
},
|
||||
|
||||
changeThemeMainColor() {
|
||||
let bgcolorId = localStorage.getItem('layuiminiBgColorId');
|
||||
if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') return false;
|
||||
let bgcolorData = miniTheme.config(bgcolorId);
|
||||
let mainColor = bgcolorData.headerRightBg
|
||||
if (bgcolorId == 0) mainColor = '#16b777';
|
||||
const bgColor = window.getComputedStyle(document.documentElement).getPropertyValue('--ea8-theme-main-color');
|
||||
document.documentElement.style.setProperty('--ea8-theme-main-color', mainColor);
|
||||
const iframes = document.getElementsByTagName('iframe');
|
||||
if (iframes.length === 0) return false;
|
||||
$.each(iframes, (i, iframe) => {
|
||||
if (iframe === '' || iframe === undefined) return false;
|
||||
const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
|
||||
iframeDocument.documentElement.style.setProperty('--ea8-theme-main-color', mainColor);
|
||||
})
|
||||
},
|
||||
|
||||
/**
|
||||
* 构建主题样式
|
||||
* @param bgcolorId
|
||||
* @returns {boolean}
|
||||
*/
|
||||
buildThemeCss: function (bgcolorId) {
|
||||
if (!bgcolorId) {
|
||||
return false;
|
||||
}
|
||||
var bgcolorData = miniTheme.config(bgcolorId);
|
||||
var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
|
||||
'.layui-layout-admin .layui-header {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧选中背景色 headerRightBgThis */\n' +
|
||||
'.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightBgThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧字体颜色 headerRightColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {\n' +
|
||||
' color: ' + bgcolorData.headerRightColor + ';\n' +
|
||||
'}\n' +
|
||||
'/**头部右侧下拉字体颜色 headerRightChildColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {\n' +
|
||||
' color: ' + bgcolorData.headerRightChildColor + '!important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧鼠标选中 headerRightColorThis */\n' +
|
||||
'.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {\n' +
|
||||
' color: ' + bgcolorData.headerRightColorThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-more {\n' +
|
||||
' border-top-color: ' + bgcolorData.headerRightNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部右侧更多下拉颜色 headerRightNavMore */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {\n' +
|
||||
' border-color: transparent transparent ' + bgcolorData.headerRightNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */\n' +
|
||||
'.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {\n' +
|
||||
' background-color: ' + bgcolorData.headerRightNavMoreBg + ' !important;\n' +
|
||||
' color:' + bgcolorData.headerRightNavMoreColor + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*头部缩放按钮样式 headerRightToolColor */\n' +
|
||||
'.layui-layout-admin .layui-header .layuimini-tool i {\n' +
|
||||
' color: ' + bgcolorData.headerRightToolColor + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*logo背景颜色 headerLogoBg */\n' +
|
||||
'.layui-layout-admin .layuimini-logo {\n' +
|
||||
' background-color: ' + bgcolorData.headerLogoBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*logo字体颜色 headerLogoColor */\n' +
|
||||
'.layui-layout-admin .layuimini-logo h1 {\n' +
|
||||
' color: ' + bgcolorData.headerLogoColor + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-more,.layuimini-menu-left-zoom.layui-nav .layui-nav-more {\n' +
|
||||
' border-top-color: ' + bgcolorData.leftMenuNavMore + ';\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单更多下拉样式 leftMenuNavMore */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {\n' +
|
||||
' border-color: transparent transparent ' + bgcolorData.leftMenuNavMore + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单背景 leftMenuBg */\n' +
|
||||
'.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单选中背景 leftMenuBgThis */\n' +
|
||||
'.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuBgThis + ' !important\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单子菜单背景 leftMenuChildBg */\n' +
|
||||
'.layuimini-menu-left .layui-nav-itemed > .layui-nav-child{\n' +
|
||||
' background-color: ' + bgcolorData.leftMenuChildBg + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单字体颜色 leftMenuColor */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {\n' +
|
||||
' color: ' + bgcolorData.leftMenuColor + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/*左侧菜单选中字体颜色 leftMenuColorThis */\n' +
|
||||
'.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {\n' +
|
||||
' color:' + bgcolorData.leftMenuColorThis + ' !important;\n' +
|
||||
'}\n' +
|
||||
'\n' +
|
||||
'/**tab选项卡选中颜色 tabActiveColor */\n' +
|
||||
'.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {\n' +
|
||||
' background-color: ' + bgcolorData.tabActiveColor + ';\n' +
|
||||
'}\n';
|
||||
$('#layuimini-bg-color').html(styleHtml);
|
||||
},
|
||||
configElemStyle() {
|
||||
var listElemStyle = [
|
||||
{
|
||||
title: '标准',
|
||||
className: 'normal'
|
||||
},
|
||||
{
|
||||
title: '原型',
|
||||
className: 'demo',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: '科幻',
|
||||
className: 'sicfi'
|
||||
},
|
||||
{
|
||||
title: 'GTK',
|
||||
className: 'gtk'
|
||||
},
|
||||
{
|
||||
title: '像素',
|
||||
className: 'nes',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: 'WIN7',
|
||||
className: 'win7',
|
||||
defaultColorConfig: '12'
|
||||
},
|
||||
{
|
||||
title: '拟物',
|
||||
className: 'neomorphic',
|
||||
|
||||
},
|
||||
{
|
||||
title: '暗黑',
|
||||
className: 'dark',
|
||||
defaultColorConfig: '1'
|
||||
|
||||
},
|
||||
]
|
||||
return listElemStyle;
|
||||
},
|
||||
buildBodyElemStyle(className) {
|
||||
|
||||
var listElemStyle = miniTheme.configElemStyle()
|
||||
|
||||
$.each(listElemStyle, function (index, item) {
|
||||
var classNameReal = 'elem-style-' + item.className;
|
||||
if ($('body').hasClass(classNameReal)) {
|
||||
$('body').removeClass(classNameReal);
|
||||
}
|
||||
})
|
||||
|
||||
$('body').addClass('elem-style-' + className)
|
||||
},
|
||||
buildElemStyleHtml(options) {
|
||||
var elemStyleName = localStorage.getItem('layuiminiElemStyleName');
|
||||
if (!elemStyleName) elemStyleName = options.elemStyleDefault;
|
||||
var listElemStyle = miniTheme.configElemStyle()
|
||||
var html = '';
|
||||
$.each(listElemStyle, function (key, val) {
|
||||
|
||||
if (typeof val.defaultColorConfig == 'undefined') {
|
||||
val.defaultColorConfig = '0'
|
||||
}
|
||||
|
||||
if (val.className === elemStyleName) {
|
||||
html += '<li class="layui-this style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n';
|
||||
} else {
|
||||
html += '<li id="' + val.className + '" class="style-item" data-select-style="' + val.className + '" data-default-color-config="' + val.defaultColorConfig + '">\n';
|
||||
}
|
||||
html +=
|
||||
val.title +
|
||||
|
||||
'</li>';
|
||||
});
|
||||
return html;
|
||||
},
|
||||
/**
|
||||
* 构建主题选择html
|
||||
* @param options
|
||||
* @returns {string}
|
||||
*/
|
||||
buildBgColorHtml: function (options) {
|
||||
options.bgColorDefault = options.bgColorDefault || 0;
|
||||
var bgcolorId = parseInt(localStorage.getItem('layuiminiBgColorId'));
|
||||
if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
|
||||
var bgColorConfig = miniTheme.config();
|
||||
var html = '';
|
||||
$.each(bgColorConfig, function (key, val) {
|
||||
if (key === bgcolorId) {
|
||||
html += '<li class="layui-this" data-select-bgcolor="' + key + '">\n';
|
||||
} else {
|
||||
html += '<li data-select-bgcolor="' + key + '">\n';
|
||||
}
|
||||
html += '<a href="javascript:;" data-skin="skin-blue" style="" class="clearfix full-opacity-hover">\n' +
|
||||
'<div><span style="display:block; width: 20%; float: left; height: 12px; background: ' + val.headerLogoBg + ';"></span><span style="display:block; width: 80%; float: left; height: 12px; background: ' + val.headerRightBg + ';"></span></div>\n' +
|
||||
'<div><span style="display:block; width: 20%; float: left; height: 40px; background: ' + val.leftMenuBg + ';"></span><span style="display:block; width: 80%; float: left; height: 40px; background: #ffffff;"></span></div>\n' +
|
||||
'</a>\n' +
|
||||
'</li>';
|
||||
});
|
||||
return html;
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听
|
||||
* @param options
|
||||
*/
|
||||
listen: function (options) {
|
||||
$('body').on('click', '[data-bgcolor]', function () {
|
||||
var loading = layer.load(0, {shade: false, time: 2 * 1000});
|
||||
var clientHeight = (document.documentElement.clientHeight) - 60;
|
||||
var bgColorHtml = miniTheme.buildBgColorHtml(options);
|
||||
var html = '<div class="layuimini-color">\n' +
|
||||
'<div class="color-title">\n' +
|
||||
'<span>配色方案</span>\n' +
|
||||
'</div>\n' +
|
||||
'<div class="color-content">\n' +
|
||||
'<ul>\n' + bgColorHtml + '</ul>\n' +
|
||||
'</div>\n' +
|
||||
'<div class="more-menu-list">\n' +
|
||||
'<a class="more-menu-item" href="https://gitee.com/wolf18/easyAdmin8" target="_blank"><i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> 开源地址</a>\n' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: false,
|
||||
closeBtn: 0,
|
||||
shade: 0.2,
|
||||
anim: 2,
|
||||
shadeClose: true,
|
||||
id: 'layuiminiBgColor',
|
||||
area: ['340px', clientHeight + 'px'],
|
||||
offset: 'rb',
|
||||
content: html,
|
||||
success: function (index, layero) {
|
||||
},
|
||||
end: function () {
|
||||
$('.layuimini-select-bgcolor').removeClass('layui-this');
|
||||
}
|
||||
});
|
||||
layer.close(loading);
|
||||
});
|
||||
|
||||
$('body').on('click', '[data-select-bgcolor]', function () {
|
||||
var bgcolorId = $(this).attr('data-select-bgcolor');
|
||||
$('.layuimini-color .color-content ul .layui-this').attr('class', '');
|
||||
$(this).attr('class', 'layui-this');
|
||||
localStorage.setItem('layuiminiBgColorId', bgcolorId);
|
||||
miniTheme.render({
|
||||
bgColorDefault: bgcolorId,
|
||||
listen: false,
|
||||
});
|
||||
miniTheme.changeThemeMainColor()
|
||||
});
|
||||
$('body').on('click', '[data-select-style]', function () {
|
||||
var elemStyleName = $(this).attr('data-select-style');
|
||||
|
||||
$(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
|
||||
|
||||
var defaultColorConfig = $(this).attr('data-default-color-config');
|
||||
|
||||
if (defaultColorConfig && defaultColorConfig.length > 0) {
|
||||
localStorage.setItem('layuiminiBgColorId', defaultColorConfig);
|
||||
|
||||
}
|
||||
|
||||
localStorage.setItem('layuiminiElemStyleName', elemStyleName);
|
||||
miniTheme.render({
|
||||
listen: false,
|
||||
});
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
return miniTheme;
|
||||
})
|
||||
;
|
||||
40
public/static/plugs/lay-module/layuimini/miniTongji.js
Normal file
40
public/static/plugs/lay-module/layuimini/miniTongji.js
Normal file
@ -0,0 +1,40 @@
|
||||
/**
|
||||
* date:2020/03/01
|
||||
* author:Mr.Chung
|
||||
* version:2.0
|
||||
* description:layuimini 统计框架扩展
|
||||
*/
|
||||
define(["jquery"], function ($) {
|
||||
var $ = layui.$;
|
||||
|
||||
var miniTongji = {
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
* @param options
|
||||
*/
|
||||
render: function (options) {
|
||||
options.specific = options.specific || false;
|
||||
options.domains = options.domains || [];
|
||||
var domain = window.location.hostname;
|
||||
if (options.specific === false || (options.specific === true && options.domains.indexOf(domain) >=0)) {
|
||||
miniTongji.listen();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 监听统计代码
|
||||
*/
|
||||
listen: function () {
|
||||
var _hmt = _hmt || [];
|
||||
(function () {
|
||||
var hm = document.createElement("script");
|
||||
hm.src = "https://hm.baidu.com/hm.js?d97abf6d61c21d773f97835defbdef4e";
|
||||
var s = document.getElementsByTagName("script")[0];
|
||||
s.parentNode.insertBefore(hm, s);
|
||||
})();
|
||||
}
|
||||
};
|
||||
|
||||
return miniTongji;
|
||||
});
|
||||
98
public/static/plugs/lay-module/layuimini/themes/default.css
Normal file
98
public/static/plugs/lay-module/layuimini/themes/default.css
Normal file
@ -0,0 +1,98 @@
|
||||
/*头部右侧背景色 headerRightBg */
|
||||
.layui-layout-admin .layui-header {
|
||||
background-color: #ffffff !important;
|
||||
}
|
||||
|
||||
/*头部右侧选中背景色 headerRightBgThis */
|
||||
.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
|
||||
background-color: #e4e4e4 !important;
|
||||
}
|
||||
|
||||
/*头部右侧字体颜色 headerRightColor */
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item a {
|
||||
color: rgba(107, 107, 107, 0.7);
|
||||
}
|
||||
|
||||
/**头部右侧下拉字体颜色 headerRightChildColor */
|
||||
.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a {
|
||||
color: rgba(107, 107, 107, 0.7) !important;
|
||||
}
|
||||
|
||||
/*头部右侧鼠标选中 headerRightColorThis */
|
||||
.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a {
|
||||
color: #565656 !important;
|
||||
}
|
||||
|
||||
/*头部右侧更多下拉颜色 headerRightNavMore */
|
||||
.layui-header .layui-nav .layui-nav-more {
|
||||
border-top-color: rgba(160, 160, 160, 0.7) !important;
|
||||
}
|
||||
|
||||
/*头部右侧更多下拉颜色 headerRightNavMore */
|
||||
.layui-header .layui-nav .layui-nav-mored, .layui-header .layui-nav-itemed > a .layui-nav-more {
|
||||
border-color: transparent transparent rgba(160, 160, 160, 0.7) !important;
|
||||
}
|
||||
|
||||
/**头部右侧更多下拉配置色 headerRightNavMoreBg headerRightNavMoreColor */
|
||||
.layui-header .layui-nav .layui-nav-child dd.layui-this a, .layui-header .layui-nav-child dd.layui-this, .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a {
|
||||
background-color: #1E9FFF !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/*头部缩放按钮样式 headerRightToolColor */
|
||||
.layui-layout-admin .layui-header .layuimini-tool i {
|
||||
color: #565656;
|
||||
}
|
||||
|
||||
/*logo背景颜色 headerLogoBg */
|
||||
.layui-layout-admin .layuimini-logo {
|
||||
background-color: #192027 !important;
|
||||
}
|
||||
|
||||
/*logo字体颜色 headerLogoColor */
|
||||
.layui-layout-admin .layuimini-logo h1 {
|
||||
color: rgb(191, 187, 187);
|
||||
}
|
||||
|
||||
/*左侧菜单更多下拉样式 leftMenuNavMore */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-more {
|
||||
border-top-color: rgb(191, 187, 187);
|
||||
display: inline-block;
|
||||
margin: 0 auto !important;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/*左侧菜单更多下拉样式 leftMenuNavMore */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-mored, .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more {
|
||||
border-color: transparent transparent rgb(191, 187, 187) !important;
|
||||
}
|
||||
|
||||
/*左侧菜单背景 leftMenuBg */
|
||||
.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul, .layuimini-menu-left-zoom > ul {
|
||||
background-color: #28333E !important;
|
||||
}
|
||||
|
||||
/*左侧菜单选中背景 leftMenuBgThis */
|
||||
.layuimini-menu-left .layui-nav-tree .layui-this, .layuimini-menu-left .layui-nav-tree .layui-this > a, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left .layui-nav-tree .layui-nav-child dd.layui-this a, .layuimini-menu-left-zoom.layui-nav-tree .layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-this > a, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child dd.layui-this a {
|
||||
background-color: #1E9FFF !important
|
||||
}
|
||||
|
||||
/*左侧菜单子菜单背景 leftMenuChildBg */
|
||||
.layuimini-menu-left .layui-nav-itemed > .layui-nav-child {
|
||||
background-color: #0c0f13 !important;
|
||||
}
|
||||
|
||||
/*左侧菜单字体颜色 leftMenuColor */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a {
|
||||
color: rgb(191, 187, 187) !important;
|
||||
}
|
||||
|
||||
/*左侧菜单选中字体颜色 leftMenuColorThis */
|
||||
.layuimini-menu-left .layui-nav .layui-nav-item a:hover, .layuimini-menu-left .layui-nav .layui-this a, .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, .layuimini-menu-left-zoom.layui-nav .layui-this a {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/**tab选项卡选中颜色 tabActiveColor */
|
||||
.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
|
||||
background-color: #1e9fff;
|
||||
}
|
||||
79
public/static/plugs/lay-module/step-lay/step.css
Normal file
79
public/static/plugs/lay-module/step-lay/step.css
Normal file
@ -0,0 +1,79 @@
|
||||
.lay-step {
|
||||
font-size: 0;
|
||||
width: 400px;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
padding-left: 200px;
|
||||
}
|
||||
|
||||
.step-item {
|
||||
display: inline-block;
|
||||
line-height: 26px;
|
||||
position: relative;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.step-item-tail {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 13px;
|
||||
}
|
||||
|
||||
.step-item-tail i {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
vertical-align: top;
|
||||
background: #c2c2c2;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.step-item-tail .step-item-tail-done {
|
||||
background: #009688;
|
||||
}
|
||||
|
||||
.step-item-head {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
color: #009688;
|
||||
border: 1px solid #009688;
|
||||
border-radius: 50%;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.step-item-head.step-item-head-active {
|
||||
background: #009688;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.step-item-main {
|
||||
display: block;
|
||||
position: relative;
|
||||
margin-left: -50%;
|
||||
margin-right: 50%;
|
||||
padding-left: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.step-item-main-title {
|
||||
font-weight: bolder;
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
.step-item-main-desc {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.lay-step + [carousel-item]:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.lay-step + [carousel-item] > * {
|
||||
background-color: transparent;
|
||||
}
|
||||
101
public/static/plugs/lay-module/step-lay/step.js
Normal file
101
public/static/plugs/lay-module/step-lay/step.js
Normal file
@ -0,0 +1,101 @@
|
||||
layui.define(['layer', 'carousel'], function (exports) {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
var carousel = layui.carousel;
|
||||
|
||||
// 添加步骤条dom节点
|
||||
var renderDom = function (elem, stepItems, postion) {
|
||||
var stepDiv = '<div class="lay-step">';
|
||||
for (var i = 0; i < stepItems.length; i++) {
|
||||
stepDiv += '<div class="step-item">';
|
||||
// 线
|
||||
if (i < (stepItems.length - 1)) {
|
||||
if (i < postion) {
|
||||
stepDiv += '<div class="step-item-tail"><i class="step-item-tail-done"></i></div>';
|
||||
} else {
|
||||
stepDiv += '<div class="step-item-tail"><i class=""></i></div>';
|
||||
}
|
||||
}
|
||||
|
||||
// 数字
|
||||
var number = stepItems[i].number;
|
||||
if (!number) {
|
||||
number = i + 1;
|
||||
}
|
||||
if (i == postion) {
|
||||
stepDiv += '<div class="step-item-head step-item-head-active"><i class="layui-icon">' + number + '</i></div>';
|
||||
} else if (i < postion) {
|
||||
stepDiv += '<div class="step-item-head"><i class="layui-icon layui-icon-ok"></i></div>';
|
||||
} else {
|
||||
stepDiv += '<div class="step-item-head "><i class="layui-icon">' + number + '</i></div>';
|
||||
}
|
||||
|
||||
// 标题和描述
|
||||
var title = stepItems[i].title;
|
||||
var desc = stepItems[i].desc;
|
||||
if (title || desc) {
|
||||
stepDiv += '<div class="step-item-main">';
|
||||
if (title) {
|
||||
stepDiv += '<div class="step-item-main-title">' + title + '</div>';
|
||||
}
|
||||
if (desc) {
|
||||
stepDiv += '<div class="step-item-main-desc">' + desc + '</div>';
|
||||
}
|
||||
stepDiv += '</div>';
|
||||
}
|
||||
stepDiv += '</div>';
|
||||
}
|
||||
stepDiv += '</div>';
|
||||
|
||||
$(elem).prepend(stepDiv);
|
||||
|
||||
// 计算每一个条目的宽度
|
||||
var bfb = 100 / stepItems.length;
|
||||
$('.step-item').css('width', bfb + '%');
|
||||
};
|
||||
|
||||
var step = {
|
||||
// 渲染步骤条
|
||||
render: function (param) {
|
||||
param.indicator = 'none'; // 不显示指示器
|
||||
param.arrow = 'always'; // 始终显示箭头
|
||||
param.autoplay = false; // 关闭自动播放
|
||||
if (!param.stepWidth) {
|
||||
param.stepWidth = '400px';
|
||||
}
|
||||
|
||||
// 渲染轮播图
|
||||
carousel.render(param);
|
||||
|
||||
// 渲染步骤条
|
||||
var stepItems = param.stepItems;
|
||||
renderDom(param.elem, stepItems, 0);
|
||||
$('.lay-step').css('width', param.stepWidth);
|
||||
|
||||
//监听轮播切换事件
|
||||
carousel.on('change(' + param.filter + ')', function (obj) {
|
||||
$(param.elem).find('.lay-step').remove();
|
||||
renderDom(param.elem, stepItems, obj.index);
|
||||
$('.lay-step').css('width', param.stepWidth);
|
||||
});
|
||||
|
||||
// 隐藏左右箭头按钮
|
||||
$(param.elem).find('.layui-carousel-arrow').css('display', 'none');
|
||||
|
||||
// 去掉轮播图的背景颜色
|
||||
$(param.elem).css('background-color', 'transparent');
|
||||
},
|
||||
// 下一步
|
||||
next: function (elem) {
|
||||
$(elem).find('.layui-carousel-arrow[lay-type=add]').trigger('click');
|
||||
},
|
||||
// 上一步
|
||||
pre: function (elem) {
|
||||
$(elem).find('.layui-carousel-arrow[lay-type=sub]').trigger('click');
|
||||
}
|
||||
};
|
||||
|
||||
layui.link(layui.cache.base + 'step-lay/step.css');
|
||||
|
||||
exports('step', step);
|
||||
});
|
||||
44
public/static/plugs/lay-module/switchSelect/switchSelect.css
Normal file
44
public/static/plugs/lay-module/switchSelect/switchSelect.css
Normal file
@ -0,0 +1,44 @@
|
||||
.layui-switch-select {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.layui-switch-select .radio-container {
|
||||
border: 1px solid #eee;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.layui-switch-select .toggle-dots {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
z-index: 999;
|
||||
background: #e9e9e9;
|
||||
padding: 5px;
|
||||
border-radius: 25px;
|
||||
}
|
||||
|
||||
.layui-switch-select .dot {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.layui-switch-select .dot.active {
|
||||
background-color: #1E9FFF;
|
||||
}
|
||||
|
||||
.layui-switch-select .radio-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.layui-switch-select .toggle-hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.layui-form-pane .layui-switch-select .radio-container {
|
||||
padding: 0;
|
||||
}
|
||||
175
public/static/plugs/lay-module/switchSelect/switchSelect.js
Normal file
175
public/static/plugs/lay-module/switchSelect/switchSelect.js
Normal file
@ -0,0 +1,175 @@
|
||||
/**
|
||||
* @autho wolfcode
|
||||
* @description switchSelect.js
|
||||
* @time 2025年7月23日 16:07:06
|
||||
*/
|
||||
|
||||
layui.define(['form'], function (exports) {
|
||||
let form = layui.form, $ = layui.$;
|
||||
|
||||
// 构造函数
|
||||
let SwitchSelect = function (options) {
|
||||
this.config = $.extend({
|
||||
elem: null, // 容器选择器
|
||||
data: [], // 选项数据 {1:'正常',2:'禁用',3:'删除'} Key => Value 形式
|
||||
default: '', // 默认值
|
||||
target: '', // 默认显示形式
|
||||
name: '', // 表单 name
|
||||
onSwitch: null // 切换回调
|
||||
}, options);
|
||||
this.render();
|
||||
};
|
||||
|
||||
// 原型方法
|
||||
SwitchSelect.prototype = {
|
||||
// 渲染组件
|
||||
render: function () {
|
||||
let that = this;
|
||||
let elem = $(this.config.elem);
|
||||
if (!elem.length) return;
|
||||
let active, toggleHidden
|
||||
switch (this.config.target) {
|
||||
case 'radio':
|
||||
active = 'radio';
|
||||
toggleHidden = 'select';
|
||||
break;
|
||||
case 'select':
|
||||
active = 'select';
|
||||
toggleHidden = 'radio';
|
||||
break;
|
||||
default:
|
||||
active = 'select';
|
||||
toggleHidden = 'radio';
|
||||
}
|
||||
|
||||
// 创建HTML结构
|
||||
let html = `
|
||||
<div class="layui-switch-select">
|
||||
<div class="toggle-dots">
|
||||
<span class="dot ${active === 'radio' ? 'active' : ''}" data-target="radio"></span>
|
||||
<span class="dot ${active === 'select' ? 'active' : ''}" data-target="select"></span>
|
||||
</div>
|
||||
<div class="layui-input-block">
|
||||
<div class="radio-container ${toggleHidden === 'radio' ? 'toggle-hidden' : ''}">${this.generateRadioHtml()}</div>
|
||||
<div class="select-container ${toggleHidden === 'select' ? 'toggle-hidden' : ''}">
|
||||
<select name="${this.config.name}" lay-filter="switchSelectFilter_${this.config.name}" class="layui-select">
|
||||
${this.generateSelectHtml()}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
elem.html(html);
|
||||
form.render();
|
||||
this.bindEvents();
|
||||
},
|
||||
|
||||
// 生成单选框HTML
|
||||
generateRadioHtml: function () {
|
||||
let html = '';
|
||||
$.map(this.config.data, (item, index) => {
|
||||
let checked = index == this.config.default ? 'checked' : '';
|
||||
html += `\n<input type="radio" name="${this.config.name}" lay-filter="switchSelectFilter_${this.config.name}" value="${index}" title="${item}" ${checked}>\n`;
|
||||
});
|
||||
return html;
|
||||
},
|
||||
|
||||
// 生成下拉框HTML
|
||||
generateSelectHtml: function () {
|
||||
let html = '';
|
||||
$.map(this.config.data, (item, index) => {
|
||||
let selected = index == this.config.default ? 'selected' : '';
|
||||
html += `\n<option value="${index}" ${selected}>${item}</option>\n`;
|
||||
});
|
||||
return html;
|
||||
},
|
||||
|
||||
// 绑定事件
|
||||
bindEvents: function () {
|
||||
let that = this;
|
||||
let elem = $(this.config.elem);
|
||||
let radioContainer = elem.find('.radio-container');
|
||||
let selectContainer = elem.find('.select-container');
|
||||
let toggleDots = elem.find('.dot');
|
||||
|
||||
// 圆点切换事件
|
||||
toggleDots.on('click', function () {
|
||||
let target = $(this).data('target');
|
||||
if (target === 'radio') {
|
||||
radioContainer.removeClass('toggle-hidden');
|
||||
selectContainer.addClass('toggle-hidden');
|
||||
} else {
|
||||
radioContainer.addClass('toggle-hidden');
|
||||
selectContainer.removeClass('toggle-hidden');
|
||||
}
|
||||
|
||||
// 更新激活状态
|
||||
toggleDots.removeClass('active');
|
||||
$(this).addClass('active');
|
||||
|
||||
// 同步数据
|
||||
that.syncData(target);
|
||||
|
||||
// 触发回调
|
||||
if (typeof that.config.onSwitch === 'function') {
|
||||
that.config.onSwitch(target);
|
||||
}
|
||||
});
|
||||
|
||||
// 监听单选按钮变化
|
||||
form.on('radio', function (data) {
|
||||
let that = $(this);
|
||||
let name = $(data.elem).attr('name')
|
||||
if (that.attr('lay-filter') !== `switchSelectFilter_${name}`) return;
|
||||
let value = $(data.elem).val()
|
||||
elem.find(`select[name="${name}"]`).val(value);
|
||||
form.render('select');
|
||||
});
|
||||
|
||||
// 监听下拉框变化
|
||||
form.on('select', function (data) {
|
||||
let name = $(data.elem).attr('name')
|
||||
if ($(data.elem).attr('lay-filter') !== `switchSelectFilter_${name}`) return;
|
||||
let value = $(data.elem).val()
|
||||
elem.find(`input[name="${name}"][value="${value}"]`).prop('checked', true);
|
||||
form.render('radio');
|
||||
});
|
||||
},
|
||||
|
||||
// 同步数据
|
||||
syncData: function (target) {
|
||||
let elem = $(this.config.elem);
|
||||
if (target === 'radio') {
|
||||
let selectValue = elem.find(`select[name="${this.config.name}"]`).val();
|
||||
elem.find(`input[name="${this.config.name}"][value="` + selectValue + '"]').prop('checked', true);
|
||||
form.render('radio');
|
||||
} else {
|
||||
let radioValue = elem.find(`input[name="${this.config.name}"]:checked`).val();
|
||||
elem.find(`select[name="${this.config.name}"]`).val(radioValue);
|
||||
form.render('select');
|
||||
}
|
||||
},
|
||||
|
||||
// 获取当前值
|
||||
getValue: function () {
|
||||
return $(this.config.elem).find(`input[name="${this.config.name}"]:checked`).val();
|
||||
},
|
||||
|
||||
// 设置值
|
||||
setValue: function (value) {
|
||||
let elem = $(this.config.elem);
|
||||
elem.find(`input[name="${this.config.name}"][value="${value}"]`).prop('checked', true);
|
||||
elem.find(`select[name="${this.config.name}"]`).val(value);
|
||||
form.render();
|
||||
},
|
||||
};
|
||||
|
||||
// 暴露接口
|
||||
exports('switchSelect', function (options) {
|
||||
return new SwitchSelect(options);
|
||||
});
|
||||
});
|
||||
|
||||
let currentScriptPath = document.currentScript.src;
|
||||
const urlObj = new URL(currentScriptPath);
|
||||
layui.link(urlObj.pathname.replace('switchSelect.js', 'switchSelect.css'));
|
||||
273
public/static/plugs/lay-module/tableSelect/tableSelect.js
Normal file
273
public/static/plugs/lay-module/tableSelect/tableSelect.js
Normal file
@ -0,0 +1,273 @@
|
||||
layui.define(['table', 'jquery', 'form'], function (exports) {
|
||||
"use strict";
|
||||
|
||||
var MOD_NAME = 'tableSelect',
|
||||
$ = layui.jquery,
|
||||
table = layui.table,
|
||||
form = layui.form;
|
||||
var tableSelect = function () {
|
||||
this.v = '1.1.0';
|
||||
};
|
||||
|
||||
/**
|
||||
* 初始化表格选择器
|
||||
*/
|
||||
tableSelect.prototype.render = function (opt) {
|
||||
var elem = $(opt.elem);
|
||||
var tableDone = opt.table.done || function () {
|
||||
};
|
||||
|
||||
//默认设置
|
||||
opt.searchKey = opt.searchKey || 'keyword';
|
||||
opt.searchPlaceholder = opt.searchPlaceholder || '关键词搜索';
|
||||
opt.checkedKey = opt.checkedKey || '';
|
||||
opt.table.page = opt.table.page || true;
|
||||
opt.table.height = opt.height || 315;
|
||||
|
||||
//最小宽度
|
||||
opt.width = opt.width || '530';
|
||||
|
||||
//多搜索条件
|
||||
opt.searchType = opt.searchType || 'one';
|
||||
opt.searchList = opt.searchList || [{key: opt.searchKey, placeholder: opt.searchPlaceholder}];
|
||||
|
||||
elem.off('click').on('click', function (e) {
|
||||
e.stopPropagation();
|
||||
|
||||
if ($('div.tableSelect').length >= 1) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var t = elem.offset().top + elem.outerHeight() + "px";
|
||||
var l = elem.offset().left + "px";
|
||||
var tableName = "tableSelect_table_" + new Date().getTime();
|
||||
var tableBox = '<div class="tableSelect layui-anim layui-anim-upbit" style="left:' + l + ';top:' + t + ';border: 1px solid #d2d2d2;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.12);padding:10px 10px 0 10px;position: absolute;z-index:66666666;margin: 5px 0;border-radius: 2px;min-width:' + opt.width + 'px;">';
|
||||
tableBox += '<div class="tableSelectBar">';
|
||||
tableBox += '<form class="layui-form" action="" style="display:inline-block;">';
|
||||
|
||||
//判断是否多搜索条件
|
||||
if (opt.searchType == 'more') {
|
||||
$.each(opt.searchList, function (index, item) {
|
||||
tableBox += '<input style="display:inline-block;width:190px;height:30px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="' + item.searchKey + '" placeholder="' + item.searchPlaceholder + '" autocomplete="off" class="layui-input">';
|
||||
});
|
||||
} else {
|
||||
tableBox += '<input style="display:inline-block;width:190px;height:30px;vertical-align:middle;margin-right:-1px;border: 1px solid #C9C9C9;" type="text" name="' + opt.searchKey + '" placeholder="' + opt.searchPlaceholder + '" autocomplete="off" class="layui-input">';
|
||||
}
|
||||
|
||||
tableBox += '<button class="layui-btn layui-btn-sm layui-btn-primary tableSelect_btn_search" lay-submit lay-filter="tableSelect_btn_search"><i class="layui-icon layui-icon-search"></i></button>';
|
||||
tableBox += '</form>';
|
||||
tableBox += '<button style="float:right;" class="layui-btn layui-btn-sm tableSelect_btn_select">选择<span></span></button>';
|
||||
tableBox += '</div>';
|
||||
tableBox += '<table id="' + tableName + '" lay-filter="' + tableName + '"></table>';
|
||||
tableBox += '</div>';
|
||||
tableBox = $(tableBox);
|
||||
$('body').append(tableBox);
|
||||
|
||||
//数据缓存
|
||||
var checkedData = [];
|
||||
|
||||
//渲染TABLE
|
||||
opt.table.elem = "#" + tableName;
|
||||
opt.table.id = tableName;
|
||||
opt.table.done = function (res, curr, count) {
|
||||
defaultChecked(res, curr, count);
|
||||
setChecked(res, curr, count);
|
||||
tableDone(res, curr, count);
|
||||
};
|
||||
var tableSelect_table = table.render(opt.table);
|
||||
|
||||
//分页选中保存数组
|
||||
table.on('radio(' + tableName + ')', function (obj) {
|
||||
if (opt.checkedKey) {
|
||||
checkedData = table.checkStatus(tableName).data
|
||||
}
|
||||
updataButton(table.checkStatus(tableName).data.length)
|
||||
})
|
||||
table.on('checkbox(' + tableName + ')', function (obj) {
|
||||
if (opt.checkedKey) {
|
||||
if (obj.checked) {
|
||||
for (var i = 0; i < table.checkStatus(tableName).data.length; i++) {
|
||||
checkedData.push(table.checkStatus(tableName).data[i])
|
||||
}
|
||||
} else {
|
||||
if (obj.type == 'all') {
|
||||
for (var j = 0; j < table.cache[tableName].length; j++) {
|
||||
for (var i = 0; i < checkedData.length; i++) {
|
||||
if (checkedData[i][opt.checkedKey] == table.cache[tableName][j][opt.checkedKey]) {
|
||||
checkedData.splice(i, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
//因为LAYUI问题，操作到变化全选状态时获取到的obj为空，这里用函数获取未选中的项。
|
||||
var nu = function () {
|
||||
var noCheckedKey = '';
|
||||
for (var i = 0; i < table.cache[tableName].length; i++) {
|
||||
if (!table.cache[tableName][i].LAY_CHECKED) {
|
||||
noCheckedKey = table.cache[tableName][i][opt.checkedKey];
|
||||
}
|
||||
}
|
||||
return noCheckedKey
|
||||
};
|
||||
var noCheckedKey = obj.data[opt.checkedKey] || nu();
|
||||
for (var i = 0; i < checkedData.length; i++) {
|
||||
if (checkedData[i][opt.checkedKey] == noCheckedKey) {
|
||||
checkedData.splice(i, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
checkedData = uniqueObjArray(checkedData, opt.checkedKey);
|
||||
updataButton(checkedData.length)
|
||||
} else {
|
||||
updataButton(table.checkStatus(tableName).data.length)
|
||||
}
|
||||
});
|
||||
|
||||
//渲染表格后选中
|
||||
function setChecked(res, curr, count) {
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
for (var j = 0; j < checkedData.length; j++) {
|
||||
if (res.data[i][opt.checkedKey] == checkedData[j][opt.checkedKey]) {
|
||||
res.data[i].LAY_CHECKED = true;
|
||||
var index = res.data[i]['LAY_INDEX'];
|
||||
var checkbox = $('#' + tableName + '').next().find('tr[data-index=' + index + '] input[type="checkbox"]');
|
||||
checkbox.prop('checked', true).next().addClass('layui-form-checked');
|
||||
var radio = $('#' + tableName + '').next().find('tr[data-index=' + index + '] input[type="radio"]');
|
||||
radio.prop('checked', true).next().addClass('layui-form-radioed').find("i").addClass('layui-icon-radio');
|
||||
}
|
||||
}
|
||||
}
|
||||
var checkStatus = table.checkStatus(tableName);
|
||||
if (checkStatus.isAll) {
|
||||
$('#' + tableName + '').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
|
||||
$('#' + tableName + '').next().find('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
|
||||
}
|
||||
updataButton(checkedData.length)
|
||||
}
|
||||
|
||||
//写入默认选中值(puash checkedData)
|
||||
function defaultChecked(res, curr, count) {
|
||||
if (opt.checkedKey && elem.attr('ts-selected')) {
|
||||
var selected = elem.attr('ts-selected').split(",");
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
for (var j = 0; j < selected.length; j++) {
|
||||
if (res.data[i][opt.checkedKey] == selected[j]) {
|
||||
checkedData.push(res.data[i])
|
||||
}
|
||||
}
|
||||
}
|
||||
checkedData = uniqueObjArray(checkedData, opt.checkedKey);
|
||||
}
|
||||
}
|
||||
|
||||
//更新选中数量
|
||||
function updataButton(n) {
|
||||
tableBox.find('.tableSelect_btn_select span').html(n == 0 ? '' : '(' + n + ')')
|
||||
}
|
||||
|
||||
//数组去重
|
||||
function uniqueObjArray(arr, type) {
|
||||
var newArr = [];
|
||||
var tArr = [];
|
||||
if (arr.length == 0) {
|
||||
return arr;
|
||||
} else {
|
||||
if (type) {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (!tArr[arr[i][type]]) {
|
||||
newArr.push(arr[i]);
|
||||
tArr[arr[i][type]] = true;
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
} else {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (!tArr[arr[i]]) {
|
||||
newArr.push(arr[i]);
|
||||
tArr[arr[i]] = true;
|
||||
}
|
||||
}
|
||||
return newArr;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//FIX位置
|
||||
var overHeight = (elem.offset().top + elem.outerHeight() + tableBox.outerHeight() - $(window).scrollTop()) > $(window).height();
|
||||
var overWidth = (elem.offset().left + tableBox.outerWidth()) > $(window).width();
|
||||
overHeight && tableBox.css({'top': 'auto', 'bottom': '0px'});
|
||||
overWidth && tableBox.css({'left': 'auto', 'right': '5px'})
|
||||
|
||||
//关键词搜索
|
||||
form.on('submit(tableSelect_btn_search)', function (data) {
|
||||
tableSelect_table.reload({
|
||||
where: data.field,
|
||||
page: {
|
||||
curr: 1
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
//双击行选中
|
||||
table.on('rowDouble(' + tableName + ')', function (obj) {
|
||||
var checkStatus = {data: [obj.data]};
|
||||
selectDone(checkStatus);
|
||||
})
|
||||
|
||||
//按钮选中
|
||||
tableBox.find('.tableSelect_btn_select').on('click', function () {
|
||||
var checkStatus = table.checkStatus(tableName);
|
||||
if (checkedData.length > 1) {
|
||||
checkStatus.data = checkedData;
|
||||
}
|
||||
selectDone(checkStatus);
|
||||
})
|
||||
|
||||
//写值回调和关闭
|
||||
function selectDone(checkStatus) {
|
||||
if (opt.checkedKey) {
|
||||
var selected = [];
|
||||
for (var i = 0; i < checkStatus.data.length; i++) {
|
||||
selected.push(checkStatus.data[i][opt.checkedKey])
|
||||
}
|
||||
elem.attr("ts-selected", selected.join(","));
|
||||
}
|
||||
opt.done(elem, checkStatus);
|
||||
tableBox.remove();
|
||||
delete table.cache[tableName];
|
||||
checkedData = [];
|
||||
}
|
||||
|
||||
//点击其他区域关闭
|
||||
$(document).mouseup(function (e) {
|
||||
var userSet_con = $('' + opt.elem + ',.tableSelect');
|
||||
if (!userSet_con.is(e.target) && userSet_con.has(e.target).length === 0) {
|
||||
tableBox.remove();
|
||||
delete table.cache[tableName];
|
||||
checkedData = [];
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 隐藏选择器
|
||||
*/
|
||||
tableSelect.prototype.hide = function (opt) {
|
||||
$('.tableSelect').remove();
|
||||
}
|
||||
|
||||
//自动完成渲染
|
||||
var tableSelect = new tableSelect();
|
||||
|
||||
//FIX 滚动时错位
|
||||
if (window.top == window.self) {
|
||||
$(window).scroll(function () {
|
||||
tableSelect.hide();
|
||||
});
|
||||
}
|
||||
|
||||
exports(MOD_NAME, tableSelect);
|
||||
})
|
||||
18
public/static/plugs/lay-module/treetable-lay/treetable.css
Normal file
18
public/static/plugs/lay-module/treetable-lay/treetable.css
Normal file
@ -0,0 +1,18 @@
|
||||
.treeTable-empty {
|
||||
width: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.treeTable-icon {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.treeTable-icon .layui-icon-triangle-d:before {
|
||||
content: "\e623";
|
||||
}
|
||||
|
||||
.treeTable-icon.open .layui-icon-triangle-d:before {
|
||||
content: "\e625";
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
210
public/static/plugs/lay-module/treetable-lay/treetable.js
Normal file
210
public/static/plugs/lay-module/treetable-lay/treetable.js
Normal file
@ -0,0 +1,210 @@
|
||||
layui.define(['layer', 'table'], function (exports) {
|
||||
var $ = layui.jquery;
|
||||
var layer = layui.layer;
|
||||
var table = layui.table;
|
||||
|
||||
var treetable = {
|
||||
// 渲染树形表格
|
||||
render: function (param) {
|
||||
param.homdPid = param.homdPid || -1;
|
||||
// 检查参数
|
||||
if (!treetable.checkParam(param)) {
|
||||
return;
|
||||
}
|
||||
// 获取数据
|
||||
if (param.data) {
|
||||
treetable.init(param, param.data);
|
||||
} else {
|
||||
$.getJSON(param.url, param.where, function (res) {
|
||||
treetable.init(param, res.data);
|
||||
});
|
||||
}
|
||||
},
|
||||
// 渲染表格
|
||||
init: function (param, data) {
|
||||
var mData = [];
|
||||
var doneCallback = param.done;
|
||||
var tNodes = data;
|
||||
// 补上id和pid字段
|
||||
for (var i = 0; i < tNodes.length; i++) {
|
||||
var tt = tNodes[i];
|
||||
if (!tt.id) {
|
||||
if (!param.treeIdName) {
|
||||
layer.msg('参数treeIdName不能为空', {icon: 5});
|
||||
return;
|
||||
}
|
||||
tt.id = tt[param.treeIdName];
|
||||
}
|
||||
if (!tt.pid) {
|
||||
if (!param.treePidName) {
|
||||
layer.msg('参数treePidName不能为空', {icon: 5});
|
||||
return;
|
||||
}
|
||||
tt.pid = tt[param.treePidName];
|
||||
}
|
||||
if(tt.pid == param.homdPid){
|
||||
mData.push(tt);
|
||||
}
|
||||
}
|
||||
|
||||
// 对数据进行排序
|
||||
var sort = function (s_pid, data) {
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (data[i].pid == s_pid) {
|
||||
var len = mData.length;
|
||||
if (len > 0 && mData[len - 1].id == s_pid) {
|
||||
mData[len - 1].isParent = true;
|
||||
}
|
||||
mData.push(data[i]);
|
||||
sort(data[i].id, data);
|
||||
}
|
||||
}
|
||||
};
|
||||
sort(param.treeSpid, tNodes);
|
||||
|
||||
// 重写参数
|
||||
param.url = undefined;
|
||||
param.data = mData;
|
||||
param.page = {
|
||||
count: param.data.length,
|
||||
limit: param.data.length
|
||||
};
|
||||
param.cols[0][param.treeColIndex].templet = function (d) {
|
||||
var mId = d.id;
|
||||
var mPid = d.pid;
|
||||
var isDir = d.isParent;
|
||||
var emptyNum = treetable.getEmptyNum(mPid, mData, param.indent);
|
||||
var iconHtml = '';
|
||||
for (var i = 0; i < emptyNum; i++) {
|
||||
iconHtml += '<span class="treeTable-empty"></span>';
|
||||
}
|
||||
if (isDir) {
|
||||
iconHtml += '<i class="layui-icon layui-icon-triangle-d"></i> <i class="layui-icon layui-icon-layer"></i>';
|
||||
} else {
|
||||
iconHtml += '<i class="layui-icon layui-icon-file"></i>';
|
||||
}
|
||||
iconHtml += ' ';
|
||||
var ttype = isDir ? 'dir' : 'file';
|
||||
var vg = '<span class="treeTable-icon open" lay-tid="' + mId + '" lay-tpid="' + mPid + '" lay-ttype="' + ttype + '">';
|
||||
return vg + iconHtml + d[param.cols[0][param.treeColIndex].field] + '</span>'
|
||||
};
|
||||
|
||||
param.done = function (res, curr, count) {
|
||||
$(param.elem).next().addClass('treeTable');
|
||||
$('.treeTable .layui-table-page').css('display', 'none');
|
||||
$(param.elem).next().attr('treeLinkage', param.treeLinkage);
|
||||
// 绑定事件换成对body绑定
|
||||
/*$('.treeTable .treeTable-icon').click(function () {
|
||||
treetable.toggleRows($(this), param.treeLinkage);
|
||||
});*/
|
||||
if (param.treeDefaultClose) {
|
||||
treetable.foldAll(param.elem);
|
||||
}
|
||||
if (doneCallback) {
|
||||
doneCallback(res, curr, count);
|
||||
}
|
||||
};
|
||||
|
||||
// 渲染表格
|
||||
table.render(param);
|
||||
},
|
||||
// 计算缩进的数量
|
||||
getEmptyNum: function (pid, data, indent) {
|
||||
var num = 0;
|
||||
if (!pid) {
|
||||
return num;
|
||||
}
|
||||
var tPid;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (pid == data[i].id) {
|
||||
num += indent || 1;
|
||||
tPid = data[i].pid;
|
||||
break;
|
||||
}
|
||||
}
|
||||
return num + treetable.getEmptyNum(tPid, data, indent);
|
||||
},
|
||||
// 展开/折叠行
|
||||
toggleRows: function ($dom, linkage) {
|
||||
var type = $dom.attr('lay-ttype');
|
||||
if ('file' == type) {
|
||||
return;
|
||||
}
|
||||
var mId = $dom.attr('lay-tid');
|
||||
var isOpen = $dom.hasClass('open');
|
||||
if (isOpen) {
|
||||
$dom.removeClass('open');
|
||||
} else {
|
||||
$dom.addClass('open');
|
||||
}
|
||||
$dom.closest('tbody').find('tr').each(function () {
|
||||
var $ti = $(this).find('.treeTable-icon');
|
||||
var pid = $ti.attr('lay-tpid');
|
||||
var ttype = $ti.attr('lay-ttype');
|
||||
var tOpen = $ti.hasClass('open');
|
||||
if (mId == pid) {
|
||||
if (isOpen) {
|
||||
$(this).hide();
|
||||
if ('dir' == ttype && tOpen == isOpen) {
|
||||
$ti.trigger('click');
|
||||
}
|
||||
} else {
|
||||
$(this).show();
|
||||
if (linkage && 'dir' == ttype && tOpen == isOpen) {
|
||||
$ti.trigger('click');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 检查参数
|
||||
checkParam: function (param) {
|
||||
if (!param.treeSpid && param.treeSpid != 0) {
|
||||
layer.msg('参数treeSpid不能为空', {icon: 5});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!param.treeColIndex && param.treeColIndex != 0) {
|
||||
layer.msg('参数treeColIndex不能为空', {icon: 5});
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
// 展开所有
|
||||
expandAll: function (dom) {
|
||||
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
|
||||
var $ti = $(this).find('.treeTable-icon');
|
||||
var ttype = $ti.attr('lay-ttype');
|
||||
var tOpen = $ti.hasClass('open');
|
||||
if ('dir' == ttype && !tOpen) {
|
||||
$ti.trigger('click');
|
||||
}
|
||||
});
|
||||
},
|
||||
// 折叠所有
|
||||
foldAll: function (dom) {
|
||||
$(dom).next('.treeTable').find('.layui-table-body tbody tr').each(function () {
|
||||
var $ti = $(this).find('.treeTable-icon');
|
||||
var ttype = $ti.attr('lay-ttype');
|
||||
var tOpen = $ti.hasClass('open');
|
||||
if ('dir' == ttype && tOpen) {
|
||||
$ti.trigger('click');
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
// layui.link(layui.cache.base + '/treetable-lay/treetable.css');
|
||||
|
||||
// 给图标列绑定事件
|
||||
$('body').on('click', '.treeTable .treeTable-icon', function () {
|
||||
var treeLinkage = $(this).parents('.treeTable').attr('treeLinkage');
|
||||
if ('true' == treeLinkage) {
|
||||
treetable.toggleRows($(this), true);
|
||||
} else {
|
||||
treetable.toggleRows($(this), false);
|
||||
}
|
||||
});
|
||||
|
||||
exports('treetable', treetable);
|
||||
});
|
||||
Reference in New Issue
Block a user