提一嘴
就眠仪式
parent
e02e5393b3
commit
5148d55bbd
|
|
@ -10,8 +10,8 @@
|
|||
}
|
||||
|
||||
.pear-admin .layui-header {
|
||||
left: 220px;
|
||||
width: calc(100% - 220px);
|
||||
left: 230px;
|
||||
width: calc(100% - 230px);
|
||||
background-color: white;
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
}
|
||||
|
|
@ -27,8 +27,9 @@
|
|||
}
|
||||
|
||||
.pear-admin .layui-logo {
|
||||
width: 220px;
|
||||
width: 230px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
position: relative;
|
||||
background-color: #28333E;
|
||||
|
||||
|
|
@ -54,7 +55,7 @@
|
|||
|
||||
.pear-admin .layui-side {
|
||||
top: 0px;
|
||||
width: 220px;
|
||||
width: 230px;
|
||||
box-shadow: 2px 0 6px rgba(0, 21, 41, .35);
|
||||
z-index: 9999;
|
||||
}
|
||||
|
|
@ -65,8 +66,9 @@
|
|||
}
|
||||
|
||||
.pear-admin .layui-side-scroll {
|
||||
height: calc(100% - 60px);
|
||||
height: calc(100% - 60px)!important;
|
||||
background-color: #28333E;
|
||||
width: 230px;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +78,7 @@
|
|||
}
|
||||
|
||||
.pear-admin .layui-body {
|
||||
left: 220px;
|
||||
left: 230px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
"icon": "layui-icon layui-icon-console",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/console/console1.html"
|
||||
"href": "view/console/console.html"
|
||||
}, {
|
||||
"id": 13,
|
||||
"title": "数据分析",
|
||||
|
|
@ -36,6 +36,14 @@
|
|||
},
|
||||
{
|
||||
"id": 202,
|
||||
"title": "表单",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/document/form.html"
|
||||
},
|
||||
{
|
||||
"id": 203,
|
||||
"title": "多选下拉",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
|
|
@ -43,7 +51,7 @@
|
|||
"href": "view/document/select.html"
|
||||
},
|
||||
{
|
||||
"id": 203,
|
||||
"id": 204,
|
||||
"title": "抽屉组件",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
|
|
@ -52,6 +60,40 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "chart",
|
||||
"title": "统计图表",
|
||||
"icon": "layui-icon layui-icon-auz",
|
||||
"type": 0,
|
||||
"href": "",
|
||||
"children": [{
|
||||
"id": 501,
|
||||
"title": "折线图",
|
||||
"icon": "layui-icon layui-icon-face-smile",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/chart/line.html"
|
||||
},
|
||||
{
|
||||
"id": 404,
|
||||
"title": "404",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/404.html"
|
||||
},
|
||||
|
||||
{
|
||||
"id": 500,
|
||||
"title": "500",
|
||||
"icon": "layui-icon layui-icon-face-cry",
|
||||
"type": 1,
|
||||
"openType": "_iframe",
|
||||
"href": "view/error/500.html"
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "error",
|
||||
"title": "错误页面",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
.top-panel {
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.top-panel>.layui-card-body {
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.top-panel-number {
|
||||
line-height: 60px;
|
||||
font-size: 30px;
|
||||
border-right: 1px solid #eceff9;
|
||||
}
|
||||
|
||||
.top-panel-tips {
|
||||
padding-left: 8px;
|
||||
padding-top: 16px;
|
||||
line-height: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.pear-container {
|
||||
background-color: whitesmoke;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
background-color: whitesmoke;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.card .header .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
margin: 20px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.card .header {
|
||||
color: dimgray;
|
||||
}
|
||||
|
||||
.card .body {
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.card .body {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.card .footer {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
margin-top: 20px;
|
||||
font-size: 13px;
|
||||
color: gray;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.list .list-item {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
color: gray;
|
||||
padding: 5px;
|
||||
padding-left: 15px;
|
||||
border-radius: 4px;
|
||||
margin-top: 5.2px;
|
||||
}
|
||||
|
||||
.custom-tab .layui-tab-title {
|
||||
border-bottom-width: 0px;
|
||||
border-bottom-style: none;
|
||||
}
|
||||
|
||||
.custom-tab .layui-tab-title li {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.list .list-item:hover {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.list .list-item .title {
|
||||
font-size: 13px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.list .list-item .footer {
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.top-panel-tips i {
|
||||
font-size: 33px;
|
||||
}
|
||||
|
|
@ -1,242 +0,0 @@
|
|||
layui.define(['table', 'jquery', 'element', 'form', 'pearTab', 'pearMenu', 'pearFrame'],
|
||||
function(exports) {
|
||||
"use strict";
|
||||
|
||||
var $ = layui.jquery,
|
||||
form = layui.form,
|
||||
element = layui.element,
|
||||
pearTab = layui.pearTab,
|
||||
pearMenu = layui.pearMenu,
|
||||
pearFrame = layui.pearFrame;
|
||||
|
||||
var bodyFrame;
|
||||
var sideMenu;
|
||||
var bodyTab;
|
||||
|
||||
var pearAdmin = new function() {
|
||||
|
||||
this.render = function(option) {
|
||||
this.menuRender(option);
|
||||
this.bodyRender(option);
|
||||
this.keepLoad(option);
|
||||
this.logoRender(option);
|
||||
}
|
||||
|
||||
this.logoRender = function(option) {
|
||||
|
||||
$(".layui-logo .logo").attr("src", option.logoImage);
|
||||
$(".layui-logo .title").html(option.logoTitle);
|
||||
}
|
||||
|
||||
this.menuRender = function(option) {
|
||||
sideMenu = pearMenu.render({
|
||||
elem: 'sideMenu', //依赖容器
|
||||
async: true, //数据形式
|
||||
theme: option.theme,
|
||||
height: '100%',
|
||||
control: option.control ? 'control' : false, // control
|
||||
defaultMenu: 1,
|
||||
defaultOpen: 0, //默认打开菜单
|
||||
accordion: true,
|
||||
url: option.data, //数据地址
|
||||
parseData: false, //请求后是否进行数据解析 函数
|
||||
change: option.change
|
||||
})
|
||||
sideMenu.selectItem(option.select);
|
||||
}
|
||||
|
||||
this.bodyRender = function(option) {
|
||||
if (option.muiltTab) {
|
||||
bodyTab = pearTab.render({
|
||||
elem: 'content',
|
||||
roll: true,
|
||||
tool: true,
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
index: 0,
|
||||
tabMax: 20,
|
||||
closeEvent: function(id) {
|
||||
sideMenu.selectItem(id);
|
||||
},
|
||||
data: [{
|
||||
id: '0',
|
||||
url: option.index,
|
||||
title: '首页',
|
||||
close: false
|
||||
}] //初始化数据
|
||||
});
|
||||
|
||||
bodyTab.click(function(id) {
|
||||
bodyTab.positionTab();
|
||||
sideMenu.selectItem(id);
|
||||
})
|
||||
|
||||
$("body").on("click", ".refresh", function() {
|
||||
|
||||
bodyTab.refresh(600);
|
||||
})
|
||||
|
||||
sideMenu.click(function(dom, data) {
|
||||
|
||||
bodyTab.addTabOnly({
|
||||
id: data.menuId,
|
||||
title: data.menuTitle,
|
||||
url: data.menuUrl,
|
||||
icon: data.menuIcon,
|
||||
close: true
|
||||
}, 300);
|
||||
compatible();
|
||||
})
|
||||
|
||||
} else {
|
||||
bodyFrame = pearFrame.render({
|
||||
elem: 'content',
|
||||
title: '工作空间 / 首页',
|
||||
url: option.index,
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
});
|
||||
|
||||
$("body").on("click", ".refresh", function() {
|
||||
|
||||
bodyFrame.refresh(600);
|
||||
})
|
||||
|
||||
sideMenu.click(function(dom, data) {
|
||||
bodyFrame.changePage(data.menuUrl, data.menuPath, true);
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.keepLoad = function(option) {
|
||||
setTimeout(function() {
|
||||
$(".loader-main").fadeOut(option.done);
|
||||
}, option.keepLoad)
|
||||
}
|
||||
};
|
||||
|
||||
$("body").on("click", ".collaspe,.pear-cover", function() {
|
||||
sideMenu.collaspe();
|
||||
if ($(".pear-admin").is(".pear-mini")) {
|
||||
$(".layui-icon-spread-left").addClass("layui-icon-shrink-right")
|
||||
$(".layui-icon-spread-left").removeClass("layui-icon-spread-left")
|
||||
$(".pear-admin").removeClass("pear-mini");
|
||||
} else {
|
||||
$(".layui-icon-shrink-right").addClass("layui-icon-spread-left")
|
||||
$(".layui-icon-shrink-right").removeClass("layui-icon-shrink-right")
|
||||
$(".pear-admin").addClass("pear-mini");
|
||||
}
|
||||
})
|
||||
|
||||
$("body").on("click", ".fullScreen", function() {
|
||||
if ($(this).hasClass("layui-icon-screen-restore")) {
|
||||
screenFun(2).then(function() {
|
||||
$(".fullScreen").eq(0).removeClass("layui-icon-screen-restore");
|
||||
});
|
||||
} else {
|
||||
screenFun(1).then(function() {
|
||||
$(".fullScreen").eq(0).addClass("layui-icon-screen-restore");
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/* function compatible() {
|
||||
if ($(window).width() <= 768) {
|
||||
sideMenu.collaspe();
|
||||
if ($(".pear-admin").is(".pear-mini")) {
|
||||
$(".layui-icon-spread-left").addClass("layui-icon-shrink-right")
|
||||
$(".layui-icon-spread-left").removeClass("layui-icon-spread-left")
|
||||
$(".pear-admin").removeClass("pear-mini");
|
||||
} else {
|
||||
$(".layui-icon-shrink-right").addClass("layui-icon-spread-left")
|
||||
$(".layui-icon-shrink-right").removeClass("layui-icon-shrink-right")
|
||||
$(".pear-admin").addClass("pear-mini");
|
||||
}
|
||||
}
|
||||
} */
|
||||
|
||||
function screenFun(num) {
|
||||
num = num || 1;
|
||||
num = num * 1;
|
||||
var docElm = document.documentElement;
|
||||
|
||||
switch (num) {
|
||||
case 1:
|
||||
if (docElm.requestFullscreen) {
|
||||
docElm.requestFullscreen();
|
||||
} else if (docElm.mozRequestFullScreen) {
|
||||
docElm.mozRequestFullScreen();
|
||||
} else if (docElm.webkitRequestFullScreen) {
|
||||
docElm.webkitRequestFullScreen();
|
||||
} else if (docElm.msRequestFullscreen) {
|
||||
docElm.msRequestFullscreen();
|
||||
}
|
||||
break;
|
||||
case 2:
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
} else if (document.mozCancelFullScreen) {
|
||||
document.mozCancelFullScreen();
|
||||
} else if (document.webkitCancelFullScreen) {
|
||||
document.webkitCancelFullScreen();
|
||||
} else if (document.msExitFullscreen) {
|
||||
document.msExitFullscreen();
|
||||
}
|
||||
break;
|
||||
}
|
||||
return new Promise(function(res, rej) {
|
||||
res("返回值");
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
$("body").on("click", ".setting", function() {
|
||||
|
||||
openRight("");
|
||||
|
||||
})
|
||||
|
||||
function openRight(html) {
|
||||
layer.open({
|
||||
type: 1,
|
||||
offset: 'r',
|
||||
area: ['340px', '100%'],
|
||||
title: false,
|
||||
shade: 0.1,
|
||||
closeBtn: 0,
|
||||
shadeClose: false,
|
||||
anim: -1,
|
||||
skin: 'layer-anim-right',
|
||||
move: false,
|
||||
content: html,
|
||||
success: function(layero, index) {
|
||||
|
||||
form.render();
|
||||
|
||||
var color = localStorage.getItem("theme-color");
|
||||
if (color != "null") {
|
||||
$(".select-color-item").removeClass("layui-icon")
|
||||
.removeClass("layui-icon-ok");
|
||||
|
||||
$(".select-color-item").each(function() {
|
||||
if ($(this).css("background-color") === color) {
|
||||
$(this).addClass("layui-icon").addClass("layui-icon-ok");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
$('#layui-layer-shade' + index).click(function() {
|
||||
var $layero = $('#layui-layer' + index);
|
||||
$layero.animate({
|
||||
left: $layero.offset().left + $layero.width()
|
||||
}, 200, function() {
|
||||
layer.close(index);
|
||||
});
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
exports('pearAdmin', pearAdmin);
|
||||
})
|
||||
|
|
@ -1,93 +0,0 @@
|
|||
layui.define(['table', 'jquery', 'element'], function (exports) {
|
||||
"use strict";
|
||||
|
||||
var MOD_NAME = 'pearFrame',
|
||||
$ = layui.jquery,
|
||||
element = layui.element;
|
||||
|
||||
var pearFrame = function (opt) {
|
||||
this.option = opt;
|
||||
};
|
||||
|
||||
pearFrame.prototype.render = function (opt) {
|
||||
//默认配置值
|
||||
var option = {
|
||||
elem:opt.elem,
|
||||
url:opt.url,
|
||||
title:opt.title,
|
||||
width:opt.width,
|
||||
height:opt.height,
|
||||
done:opt.done ? opt.done: function(){ console.log("菜单渲染成功");}
|
||||
}
|
||||
|
||||
|
||||
createFrameHTML(option);
|
||||
|
||||
$("#"+option.elem).width(option.width);
|
||||
$("#"+option.elem).height(option.height);
|
||||
|
||||
return new pearFrame(option);
|
||||
}
|
||||
|
||||
pearFrame.prototype.changePage = function(url,title,loading){
|
||||
|
||||
if(loading){
|
||||
var loading = $("#"+this.option.elem).find(".pear-frame-loading");
|
||||
|
||||
loading.css({display:'block'});
|
||||
}
|
||||
|
||||
$("#"+this.option.elem+" iframe").attr("src",url);
|
||||
|
||||
$("#"+this.option.elem+" .title").html(title);
|
||||
|
||||
if(loading){
|
||||
var loading = $("#"+this.option.elem).find(".pear-frame-loading");
|
||||
|
||||
setTimeout(function(){
|
||||
|
||||
loading.css({display:'none'});
|
||||
|
||||
},800)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
pearFrame.prototype.refresh = function (time) {
|
||||
|
||||
|
||||
// 刷 新 指 定 的 选 项 卡
|
||||
if(time!=false){
|
||||
|
||||
var loading = $("#"+this.option.elem).find(".pear-frame-loading");
|
||||
|
||||
loading.css({display:'block'});
|
||||
|
||||
if(time!=0){
|
||||
|
||||
setTimeout(function(){
|
||||
loading.css({display:'none'});
|
||||
},time)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
$("#"+this.option.elem).find("iframe")[0].contentWindow.location.reload(true);
|
||||
}
|
||||
|
||||
function createFrameHTML(option){
|
||||
|
||||
var iframe = "<iframe class='pear-frame-content' style='width:100%;height:100%;' scrolling='auto' frameborder='0' src='"+option.url+"' ></iframe>"
|
||||
|
||||
var loading = '<div class="pear-frame-loading">'+
|
||||
'<div class="ball-loader">'+
|
||||
'<span></span><span></span><span></span><span></span>'+
|
||||
'</div>'+
|
||||
'</div></div>'
|
||||
|
||||
$("#"+option.elem).html(iframe+loading);
|
||||
}
|
||||
|
||||
exports(MOD_NAME,new pearFrame());
|
||||
})
|
||||
|
|
@ -1,526 +0,0 @@
|
|||
layui.define(['table', 'jquery', 'element'], function(exports) {
|
||||
"use strict";
|
||||
|
||||
var MOD_NAME = 'pearMenu',
|
||||
$ = layui.jquery,
|
||||
element = layui.element;
|
||||
|
||||
var pearMenu = function(opt) {
|
||||
this.option = opt;
|
||||
};
|
||||
|
||||
pearMenu.prototype.render = function(opt) {
|
||||
//默认配置值
|
||||
var option = {
|
||||
elem: opt.elem,
|
||||
async: opt.async ? opt.async : false,
|
||||
parseData: opt.parseData,
|
||||
url: opt.url,
|
||||
defaultOpen: opt.defaultOpen,
|
||||
defaultSelect: opt.defaultSelect,
|
||||
control: opt.control,
|
||||
defaultMenu: opt.defaultMenu,
|
||||
accordion: opt.accordion,
|
||||
height: opt.height,
|
||||
theme: opt.theme,
|
||||
data: opt.data ? opt.data : [],
|
||||
change: opt.change ? opt.change : function() {
|
||||
console.log("切换")
|
||||
},
|
||||
done: opt.done ? opt.done : function() {
|
||||
console.log("菜单渲染成功");
|
||||
}
|
||||
}
|
||||
|
||||
// 根 据 请 求 方 式 获 取 数 据
|
||||
if (option.async) {
|
||||
option.data = getData(option.url);
|
||||
if (option.parseData != false) {
|
||||
option.parseData(option.data);
|
||||
}
|
||||
}
|
||||
|
||||
if(option.data.length > 0){
|
||||
if (option.control != false) {
|
||||
|
||||
createMenuAndControl(option);
|
||||
} else {
|
||||
createMenu(option);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// 渲 染 菜 单 结 束 并 完 成
|
||||
element.init();
|
||||
|
||||
downShow(option);
|
||||
|
||||
option.done();
|
||||
return new pearMenu(option);
|
||||
}
|
||||
|
||||
|
||||
/** 监听事件赋值 */
|
||||
pearMenu.prototype.click = function(clickEvent) {
|
||||
|
||||
var _this = this;
|
||||
$("#" + _this.option.elem + " .site-demo-active").parent().click(function() {
|
||||
var dom = $(this).children(".site-demo-active");
|
||||
var data = {
|
||||
menuId: dom.attr("menu-id"),
|
||||
menuTitle: dom.attr("menu-title"),
|
||||
menuPath: dom.attr("menu-title"),
|
||||
menuIcon: dom.attr("menu-icon"),
|
||||
menuUrl: dom.attr("menu-url")
|
||||
};
|
||||
|
||||
var doms = hash(dom);
|
||||
|
||||
if (doms.text() != '') {
|
||||
data['menuPath'] = doms.find("span").text() + " / " + data['menuPath'];
|
||||
|
||||
}
|
||||
var domss = hash(doms);
|
||||
|
||||
if (domss.text() != '') {
|
||||
|
||||
data['menuPath'] = domss.find("span").text() + " / " + data['menuPath'];
|
||||
|
||||
}
|
||||
|
||||
var domsss = hash(domss);
|
||||
|
||||
if (domsss.text() != '') {
|
||||
|
||||
data['menuPath'] = domsss.find("span").text() + " / " + data['menuPath'];
|
||||
|
||||
}
|
||||
|
||||
clickEvent(dom, data);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
function hash(dom) {
|
||||
|
||||
return dom.parent().parent().prev();
|
||||
}
|
||||
|
||||
|
||||
pearMenu.prototype.skin = function(skin) {
|
||||
|
||||
var menu = $(".pear-nav-tree[lay-filter='" + this.option.elem + "']").parent();
|
||||
|
||||
menu.removeClass("dark-theme");
|
||||
menu.removeClass("light-theme");
|
||||
|
||||
menu.addClass(skin);
|
||||
}
|
||||
|
||||
|
||||
pearMenu.prototype.selectItem = function(pearId) {
|
||||
|
||||
if (this.option.control != false) {
|
||||
|
||||
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-side-scroll ").find("ul").css({
|
||||
display: "none"
|
||||
});
|
||||
|
||||
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-side-scroll ").find(".layui-this").removeClass(
|
||||
"layui-this");
|
||||
|
||||
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("ul").css({
|
||||
display: "block"
|
||||
});
|
||||
|
||||
var controlId = $("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("ul").attr("pear-id");
|
||||
|
||||
$("#" + this.option.control).find(".layui-this").removeClass("layui-this");
|
||||
|
||||
$("#" + this.option.control).find("[pear-id='" + controlId + "']").addClass("layui-this");
|
||||
}
|
||||
|
||||
|
||||
// 根 据 菜 单 Id 选 中 菜 单 项 目
|
||||
|
||||
|
||||
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-nav-itemed").removeClass(
|
||||
"layui-nav-itemed");
|
||||
|
||||
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".pear-nav-tree").find(".layui-this").removeClass(
|
||||
"layui-this");
|
||||
|
||||
// 通 过 动 画 打 开 当 前 菜 单 项 layui-nav-child
|
||||
|
||||
if (!$("#" + this.option.elem).is(".pear-nav-mini")) {
|
||||
|
||||
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents(".layui-nav-item").addClass("layui-nav-itemed");
|
||||
|
||||
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parents("dd").addClass("layui-nav-itemed");
|
||||
|
||||
}
|
||||
|
||||
$("#" + this.option.elem + " a[menu-id='" + pearId + "']").parent().addClass("layui-this");
|
||||
}
|
||||
|
||||
|
||||
var activeMenus;
|
||||
|
||||
pearMenu.prototype.collaspe = function(time) {
|
||||
|
||||
var elem = this.option.elem;
|
||||
|
||||
var config = this.option;
|
||||
|
||||
if ($("#" + this.option.elem).is(".pear-nav-mini")) {
|
||||
|
||||
$.each(activeMenus, function(i, item) {
|
||||
$("#" + elem + " a[menu-id='" + $(this).attr("menu-id") + "']").parent().addClass("layui-nav-itemed");
|
||||
})
|
||||
|
||||
$("#" + this.option.elem).removeClass("pear-nav-mini");
|
||||
|
||||
$("#" + this.option.elem).animate({
|
||||
width: "220px"
|
||||
}, 150);
|
||||
|
||||
isHoverMenu(false, config);
|
||||
|
||||
} else {
|
||||
|
||||
activeMenus = $("#" + this.option.elem).find(".layui-nav-itemed>a");
|
||||
$("#" + this.option.elem).find(".layui-nav-itemed").removeClass("layui-nav-itemed");
|
||||
|
||||
$("#" + this.option.elem).addClass("pear-nav-mini");
|
||||
|
||||
$("#" + this.option.elem).animate({
|
||||
width: "60px"
|
||||
}, 400);
|
||||
isHoverMenu(true, config);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
/** 同 步 请 求 获 取 数 据 */
|
||||
function getData(url) {
|
||||
|
||||
$.ajaxSettings.async = false;
|
||||
var data = null;
|
||||
|
||||
$.get(url, function(result) {
|
||||
data = result;
|
||||
});
|
||||
|
||||
$.ajaxSettings.async = true;
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
function createMenu(option) {
|
||||
// 声 明 头 部
|
||||
var menuHtml = '<ul lay-filter="' + option.elem +
|
||||
'" class="layui-nav arrow pear-menu layui-nav-tree pear-nav-tree">'
|
||||
// 开 启 同 步 操 作
|
||||
$.each(option.data, function(i, item) {
|
||||
// 创 建 每 一 个 菜 单 项
|
||||
|
||||
var content = '<li class="layui-nav-item" >';
|
||||
|
||||
if (i == option.defaultOpen) {
|
||||
content = '<li class="layui-nav-item layui-nav-itemed" >';
|
||||
}
|
||||
|
||||
var href = "javascript:;";
|
||||
var target = "";
|
||||
var className = "site-demo-active"
|
||||
|
||||
if (item.openType == "_blank" && item.type == 1) {
|
||||
href = item.href;
|
||||
target = "target='_blank'";
|
||||
className = "";
|
||||
}
|
||||
|
||||
// 判 断 菜 单 类 型 0 是 不可跳转的目录 1 是 可 点 击 跳 转 的 菜 单
|
||||
if (item.type == 0) {
|
||||
// 创 建 目 录 结 构
|
||||
content += '<a href="javascript:;" menu-type="' + item.type + '" menu-id="' + item.id + '" href="' + href +
|
||||
'" ' + target + '><i class="' + item.icon + '"></i><span>' + item.title +
|
||||
'</span></a>';
|
||||
} else if (item.type == 1) {
|
||||
|
||||
// 创 建 菜 单 结 构
|
||||
content += '<a class="' + className + '" menu-type="' + item.type + '" menu-url="' + item.href + '" menu-id="' +
|
||||
item.id +
|
||||
'" menu-title="' + item.title + '" href="' + href + '" ' + target + '><i class="' + item.icon +
|
||||
'"></i><span>' + item.title + '</span></a>';
|
||||
}
|
||||
// 调 用 递 归 方 法 加 载 无 限 层 级 的 子 菜 单
|
||||
content += loadchild(item);
|
||||
// 结 束 一 个 根 菜 单 项
|
||||
content += '</li>';
|
||||
menuHtml += content;
|
||||
|
||||
});
|
||||
// 结 束 菜 单 结 构 的 初 始 化
|
||||
menuHtml += "</ul>";
|
||||
// 将 菜 单 拼 接 到 初 始 化 容 器 中
|
||||
|
||||
$("#" + option.elem).html(menuHtml);
|
||||
|
||||
}
|
||||
|
||||
|
||||
function createMenuAndControl(option) {
|
||||
|
||||
var control = '<ul class="layui-nav pear-nav-control">';
|
||||
// 声 明 头 部
|
||||
var menu = '<div class="layui-side-scroll ' + option.theme + '">'
|
||||
// 开 启 同 步 操 作
|
||||
|
||||
var index = 0;
|
||||
|
||||
$.each(option.data, function(i, item) {
|
||||
|
||||
var menuItem = '';
|
||||
|
||||
var controlItem = '';
|
||||
|
||||
|
||||
if (index === option.defaultMenu) {
|
||||
|
||||
controlItem = '<li pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +
|
||||
'" class="layui-this layui-nav-item"><a href="#">' + item.title + '</a></li>';
|
||||
|
||||
menuItem = '<ul pear-id="' + item.id + '" lay-filter="' + option.elem +
|
||||
'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
|
||||
|
||||
} else {
|
||||
|
||||
controlItem = '<li pear-href="' + item.href + '" pear-title="' + item.title + '" pear-id="' + item.id +
|
||||
'" class="layui-nav-item"><a href="#">' + item.title + '</a></li>';
|
||||
|
||||
menuItem = '<ul style="display:none" pear-id="' + item.id + '" lay-filter="' + option.elem +
|
||||
'" class="layui-nav arrow layui-nav-tree pear-nav-tree">';
|
||||
|
||||
}
|
||||
|
||||
index++;
|
||||
|
||||
$.each(item.children, function(i, note) {
|
||||
|
||||
// 创 建 每 一 个 菜 单 项
|
||||
var content = '<li class="layui-nav-item" >';
|
||||
|
||||
var href = "javascript:;";
|
||||
|
||||
var target = "";
|
||||
|
||||
var className = "site-demo-active";
|
||||
|
||||
if (note.openType == "_blank" && note.type == 1) {
|
||||
|
||||
href = note.href;
|
||||
target = "target='_blank'";
|
||||
className = "";
|
||||
}
|
||||
|
||||
|
||||
// 判 断 菜 单 类 型 0 是 不可跳转的目录 1 是 可 点 击 跳 转 的 菜 单
|
||||
if (note.type == 0) {
|
||||
// 创 建 目 录 结 构
|
||||
content += '<a href="' + href + '" ' + target + ' menu-type="' + note.type + '" menu-id="' + note.id +
|
||||
'" ><i class="' + note.icon + '"></i><span>' + note.title +
|
||||
'</span></a>';
|
||||
} else if (note.type == 1) {
|
||||
// 创 建 菜 单 结 构
|
||||
content += '<a ' + target + ' class="' + className + '" menu-type="' + note.type + '" menu-url="' + note.href +
|
||||
'" menu-id="' + note.id +
|
||||
'" menu-title="' + note.title + '" href="' + href + '"><i class="' + note.icon +
|
||||
'"></i><span>' + note.title + '</span></a>';
|
||||
}
|
||||
// 调 用 递 归 方 法 加 载 无 限 层 级 的 子 菜 单
|
||||
content += loadchild(note);
|
||||
// 结 束 一 个 根 菜 单 项
|
||||
content += '</li>';
|
||||
|
||||
menuItem += content;
|
||||
|
||||
})
|
||||
|
||||
|
||||
menu += menuItem + '</ul>';
|
||||
|
||||
control += controlItem;
|
||||
|
||||
})
|
||||
|
||||
|
||||
$("#" + option.control).html(control);
|
||||
|
||||
$("#" + option.elem).html(menu);
|
||||
|
||||
$("#" + option.control + " .pear-nav-control").on("click", "li", function() {
|
||||
|
||||
$("#" + option.elem).find(".pear-nav-tree").css({
|
||||
display: 'none'
|
||||
});
|
||||
|
||||
$("#" + option.elem).find(".pear-nav-tree[pear-id='" + $(this).attr("pear-id") + "']").css({
|
||||
display: 'block'
|
||||
});
|
||||
|
||||
option.change($(this).attr("pear-id"), $(this).attr("pear-title"), $(this).attr("pear-href"))
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
/** 加载子菜单 (递归)*/
|
||||
function loadchild(obj) {
|
||||
|
||||
// 判 单 是 否 是 菜 单， 如 果 是 菜 单 直 接 返 回
|
||||
if (obj.type == 1) {
|
||||
return "";
|
||||
}
|
||||
|
||||
// 创 建 子 菜 单 结 构
|
||||
var content = '<dl class="layui-nav-child">';
|
||||
|
||||
// 如 果 嵌 套 不 等 于 空
|
||||
if (obj.children != null && obj.children.length > 0) {
|
||||
// 遍 历 子 项 目
|
||||
$.each(obj.children, function(i, note) {
|
||||
// 创 建 子 项 结 构
|
||||
content += '<dd>';
|
||||
|
||||
var href = "javascript:;";
|
||||
|
||||
var target = "";
|
||||
|
||||
var className = "site-demo-active";
|
||||
|
||||
if (note.openType == "_blank" && note.type == 1) {
|
||||
href = note.href;
|
||||
target = "target='_blank'";
|
||||
className = "";
|
||||
}
|
||||
|
||||
// 判 断 子 项 类 型
|
||||
if (note.type == 0) {
|
||||
// 创 建 目 录 结 构
|
||||
content += '<a ' + target + ' href="' + href + '" menu-type="' + note.type + '" menu-id="' + note.id +
|
||||
'"><i class="' + note.icon + '"></i><span>' + note.title + '</span></a>';
|
||||
} else if (note.type == 1) {
|
||||
// 创 建 菜 单 结 构
|
||||
content += '<a ' + target + ' class="' + className + '" menu-type="' + note.type + '" menu-url="' + note.href +
|
||||
'" menu-id="' + note.id + '" menu-title="' + note.title + '" menu-icon="' + note.icon + '" href="' + href +
|
||||
'" ><i class="' + note.icon + '"></i><span>' + note.title + '</span></a>';
|
||||
}
|
||||
// 加 载 子 项 目 录
|
||||
content += loadchild(note);
|
||||
// 结 束 当 前 子 菜 单
|
||||
content += '</dd>';
|
||||
});
|
||||
// 封 装
|
||||
|
||||
} else {
|
||||
content += '<div class="toast"> 无 内 容 </div>';
|
||||
}
|
||||
|
||||
content += '</dl>';
|
||||
return content;
|
||||
}
|
||||
|
||||
function downShow(option) {
|
||||
$("body #" + option.elem).on("click", "a[menu-type='0']", function() {
|
||||
|
||||
if (!$("#" + option.elem).is(".pear-nav-mini")) {
|
||||
|
||||
var superEle = $(this).parent();
|
||||
var ele = $(this).next('.layui-nav-child');
|
||||
var height = ele.height();
|
||||
if ($(this).parent().is(".layui-nav-itemed")) {
|
||||
|
||||
if (option.accordion) {
|
||||
// 手 风 琴 实 现
|
||||
$(this).parent().parent().find(".layui-nav-itemed").removeClass("layui-nav-itemed");
|
||||
$(this).parent().addClass("layui-nav-itemed");
|
||||
}
|
||||
|
||||
ele.height(0);
|
||||
|
||||
ele.animate({
|
||||
height: height + "px"
|
||||
}, 200, function() {
|
||||
ele.css({
|
||||
height: "auto"
|
||||
});
|
||||
});
|
||||
|
||||
} else {
|
||||
|
||||
$(this).parent().addClass("layui-nav-itemed");
|
||||
|
||||
ele.animate({
|
||||
height: "0px"
|
||||
}, 200, function() {
|
||||
ele.css({
|
||||
height: "auto"
|
||||
});
|
||||
$(this).parent().removeClass("layui-nav-itemed");
|
||||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
}
|
||||
|
||||
/** 二 级 悬 浮 菜 单*/
|
||||
function isHoverMenu(b, option) {
|
||||
if (b) {
|
||||
$("#" + option.elem + ".pear-nav-mini .layui-nav-item,#" + option.elem + ".pear-nav-mini dd").hover(function() {
|
||||
|
||||
$(this).children(".layui-nav-child").addClass("layui-nav-hover");
|
||||
|
||||
var top = $(this).offset().top + 5;
|
||||
|
||||
|
||||
if (!$(this).is(".layui-nav-item")) {
|
||||
|
||||
var left = $(this).offset().left + 132;
|
||||
|
||||
$(this).children(".layui-nav-child").offset({
|
||||
left: left
|
||||
});
|
||||
|
||||
} else {
|
||||
var left = $(this).offset().left + 62;
|
||||
|
||||
$(this).children(".layui-nav-child").offset({
|
||||
left: left
|
||||
});
|
||||
|
||||
}
|
||||
$(this).children(".layui-nav-child").offset({
|
||||
top: top
|
||||
});
|
||||
|
||||
}, function() {
|
||||
|
||||
$(this).children(".layui-nav-child").removeClass("layui-nav-hover");
|
||||
|
||||
$(this).children(".layui-nav-child").css({
|
||||
left: '0px'
|
||||
});
|
||||
|
||||
$(this).children(".layui-nav-child").css({
|
||||
top: '0px'
|
||||
});
|
||||
})
|
||||
} else {
|
||||
$("#" + option.elem + " .layui-nav-item").off('mouseenter').unbind('mouseleave');
|
||||
$("#" + option.elem + " dd").off('mouseenter').unbind('mouseleave');
|
||||
}
|
||||
}
|
||||
exports(MOD_NAME, new pearMenu());
|
||||
})
|
||||
|
|
@ -1,569 +0,0 @@
|
|||
layui.define(['jquery', 'element'], function(exports) {
|
||||
"use strict";
|
||||
|
||||
var MOD_NAME = 'pearTab',
|
||||
$ = layui.jquery,
|
||||
element = layui.element;
|
||||
|
||||
var pearTab = function(opt) {
|
||||
this.option = opt;
|
||||
};
|
||||
|
||||
|
||||
pearTab.prototype.render = function(opt) {
|
||||
//默认配置值
|
||||
var option = {
|
||||
elem: opt.elem,
|
||||
data: opt.data,
|
||||
tool: opt.tool,
|
||||
roll: opt.roll,
|
||||
index: opt.index,
|
||||
width: opt.width,
|
||||
height: opt.height,
|
||||
tabMax: opt.tabMax,
|
||||
closeEvent: opt.closeEvent
|
||||
}
|
||||
|
||||
var tab = createTab(option);
|
||||
|
||||
$("#" + option.elem).html(tab);
|
||||
|
||||
$(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-prev").click(function() {
|
||||
rollPage("left", option);
|
||||
})
|
||||
|
||||
$(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-next").click(function() {
|
||||
rollPage("right", option);
|
||||
})
|
||||
|
||||
element.init();
|
||||
|
||||
toolEvent(option);
|
||||
|
||||
$("#" + option.elem).width(opt.width);
|
||||
$("#" + option.elem).height(opt.height);
|
||||
$("#" + option.elem).css({
|
||||
position: "relative"
|
||||
});
|
||||
|
||||
closeEvent(option);
|
||||
|
||||
return new pearTab(option);
|
||||
}
|
||||
|
||||
pearTab.prototype.click = function(callback) {
|
||||
|
||||
var elem = this.option.elem;
|
||||
|
||||
element.on('tab(' + this.option.elem + ')', function(data) {
|
||||
|
||||
var id = $("#" + elem + " .layui-tab-title .layui-this").attr("lay-id");
|
||||
|
||||
callback(id);
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
pearTab.prototype.positionTab = function() {
|
||||
var $tabTitle = $('.layui-tab[lay-filter=' + this.option.elem + '] .layui-tab-title');
|
||||
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);
|
||||
}
|
||||
|
||||
pearTab.prototype.addTab = function(opt) {
|
||||
|
||||
var title = '';
|
||||
|
||||
if (opt.close) {
|
||||
|
||||
title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
|
||||
} else {
|
||||
|
||||
title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
|
||||
}
|
||||
|
||||
element.tabAdd(this.option.elem, {
|
||||
title: title,
|
||||
content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
|
||||
opt.url + '" style="width:100%;height:100%;"></iframe>',
|
||||
id: opt.id
|
||||
});
|
||||
|
||||
|
||||
element.tabChange(this.option.elem, opt.id);
|
||||
|
||||
}
|
||||
|
||||
var index = 0;
|
||||
|
||||
pearTab.prototype.addTabOnlyByElem = function(elem, opt, time) {
|
||||
var title = '';
|
||||
if (opt.close) {
|
||||
title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
} else {
|
||||
title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
}
|
||||
if ($(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title li[lay-id]").length <= 0) {
|
||||
|
||||
if (time != false && time != 0) {
|
||||
|
||||
var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
|
||||
'<div class="ball-loader">' +
|
||||
'<span></span><span></span><span></span><span></span>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
|
||||
$("#" + elem).find(".pear-tab").append(load);
|
||||
|
||||
var pearLoad = $("#" + elem).find("#pear-tab-loading" + index);
|
||||
|
||||
pearLoad.css({
|
||||
display: "block"
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
pearLoad.fadeOut(500, function() {
|
||||
pearLoad.remove();
|
||||
});
|
||||
|
||||
}, time);
|
||||
|
||||
index++;
|
||||
}
|
||||
|
||||
element.tabAdd(elem, {
|
||||
title: title,
|
||||
content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
|
||||
opt.url + '" style="width:100%;height:100%;"></iframe>',
|
||||
id: opt.id
|
||||
});
|
||||
} else {
|
||||
|
||||
var isData = false;
|
||||
|
||||
$.each($(".layui-tab[lay-filter='" + elem + "'] .layui-tab-title li[lay-id]"), function() {
|
||||
|
||||
if ($(this).attr("lay-id") == opt.id) {
|
||||
|
||||
isData = true;
|
||||
}
|
||||
})
|
||||
|
||||
if (isData == false) {
|
||||
|
||||
if (time != false && time != 0) {
|
||||
|
||||
var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
|
||||
'<div class="ball-loader">' +
|
||||
'<span></span><span></span><span></span><span></span>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
|
||||
$("#" + elem).find(".pear-tab").append(load);
|
||||
|
||||
var pearLoad = $("#" + elem).find("#pear-tab-loading" + index);
|
||||
|
||||
pearLoad.css({
|
||||
display: "block"
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
pearLoad.fadeOut(500, function() {
|
||||
pearLoad.remove();
|
||||
});
|
||||
|
||||
}, time);
|
||||
|
||||
index++;
|
||||
}
|
||||
|
||||
element.tabAdd(elem, {
|
||||
title: title,
|
||||
content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
|
||||
opt.url + '" style="width:100%;height:100%;"></iframe>',
|
||||
id: opt.id
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
element.tabChange(elem, opt.id);
|
||||
}
|
||||
|
||||
|
||||
/** 添 加 唯 一 选 项 卡 */
|
||||
pearTab.prototype.addTabOnly = function(opt, time) {
|
||||
|
||||
var title = '';
|
||||
|
||||
if (opt.close) {
|
||||
|
||||
title += '<span class="pear-tab-active"></span><span class="able-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
|
||||
} else {
|
||||
|
||||
title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
|
||||
}
|
||||
|
||||
if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length <= 0) {
|
||||
|
||||
if (time != false && time != 0) {
|
||||
|
||||
var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
|
||||
'<div class="ball-loader">' +
|
||||
'<span></span><span></span><span></span><span></span>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
|
||||
$("#" + this.option.elem).find(".pear-tab").append(load);
|
||||
|
||||
var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index);
|
||||
|
||||
pearLoad.css({
|
||||
display: "block"
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
pearLoad.fadeOut(500, function() {
|
||||
pearLoad.remove();
|
||||
});
|
||||
|
||||
}, time);
|
||||
|
||||
index++;
|
||||
}
|
||||
|
||||
|
||||
element.tabAdd(this.option.elem, {
|
||||
title: title,
|
||||
content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
|
||||
opt.url + '" style="width:100%;height:100%;"></iframe>',
|
||||
id: opt.id
|
||||
});
|
||||
|
||||
|
||||
|
||||
} else {
|
||||
|
||||
var isData = false;
|
||||
|
||||
//查询当前选项卡数量
|
||||
if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length >= this.option.tabMax) {
|
||||
layer.msg("最多打开" + this.option.tabMax + "个标签页",{icon:3,time:1000});
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
$.each($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]"), function() {
|
||||
|
||||
if ($(this).attr("lay-id") == opt.id) {
|
||||
|
||||
isData = true;
|
||||
}
|
||||
})
|
||||
if (isData == false) {
|
||||
|
||||
if (time != false && time != 0) {
|
||||
|
||||
var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
|
||||
'<div class="ball-loader">' +
|
||||
'<span></span><span></span><span></span><span></span>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
|
||||
$("#" + this.option.elem).find(".pear-tab").append(load);
|
||||
|
||||
var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index);
|
||||
|
||||
pearLoad.css({
|
||||
display: "block"
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
pearLoad.fadeOut(500, function() {
|
||||
pearLoad.remove();
|
||||
});
|
||||
|
||||
}, time);
|
||||
|
||||
index++;
|
||||
}
|
||||
|
||||
element.tabAdd(this.option.elem, {
|
||||
title: title,
|
||||
content: '<iframe id="' + opt.id + '" data-frameid="' + opt.id + '" scrolling="auto" frameborder="0" src="' +
|
||||
opt.url + '" style="width:100%;height:100%;"></iframe>',
|
||||
id: opt.id
|
||||
});
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
element.tabChange(this.option.elem, opt.id);
|
||||
}
|
||||
|
||||
|
||||
// 刷 新 指 定 的 选 项 卡
|
||||
pearTab.prototype.refresh = function(time) {
|
||||
|
||||
|
||||
// 刷 新 指 定 的 选 项 卡
|
||||
if (time != false && time != 0) {
|
||||
|
||||
var load = '<div id="pear-tab-loading' + index + '" class="pear-tab-loading">' +
|
||||
'<div class="ball-loader">' +
|
||||
'<span></span><span></span><span></span><span></span>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
|
||||
$("#" + this.option.elem).find(".pear-tab").append(load);
|
||||
|
||||
var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index);
|
||||
|
||||
pearLoad.css({
|
||||
display: "block"
|
||||
});
|
||||
|
||||
setTimeout(function() {
|
||||
|
||||
pearLoad.fadeOut(500, function() {
|
||||
pearLoad.remove();
|
||||
});
|
||||
|
||||
}, time);
|
||||
|
||||
index++;
|
||||
}
|
||||
$(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow
|
||||
.location.reload(true);
|
||||
|
||||
}
|
||||
|
||||
// 重写 Tab Delete 删除 ， 源码存在 Bug 所以重写
|
||||
|
||||
function tabDelete(elem, id,callback) {
|
||||
|
||||
//根据 elem id 来删除指定的 layui title li
|
||||
|
||||
var tabTitle = $(".layui-tab[lay-filter='" + elem + "']").find(".layui-tab-title");
|
||||
|
||||
// 删除指定 id 的 title
|
||||
|
||||
var removeTab = tabTitle.find("li[lay-id='" + id + "']");
|
||||
|
||||
var nextNode = removeTab.next("li");
|
||||
|
||||
var currId ;
|
||||
|
||||
if (nextNode.length) {
|
||||
|
||||
nextNode.addClass("layui-this");
|
||||
|
||||
currId = nextNode.attr("lay-id");
|
||||
|
||||
$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
|
||||
|
||||
} else {
|
||||
|
||||
var prevNode = removeTab.prev("li");
|
||||
|
||||
prevNode.addClass("layui-this");
|
||||
|
||||
currId = prevNode.attr("lay-id");
|
||||
|
||||
$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
|
||||
|
||||
}
|
||||
|
||||
callback(currId);
|
||||
|
||||
removeTab.remove();
|
||||
|
||||
// 删除 content
|
||||
var tabContent = $(".layui-tab[lay-filter='" + elem + "']").find("iframe[id='" + id + "']").parent();
|
||||
|
||||
tabContent.remove();
|
||||
|
||||
}
|
||||
|
||||
|
||||
function createTab(option) {
|
||||
|
||||
var type = "";
|
||||
|
||||
if (option.roll == true) {
|
||||
|
||||
type = "layui-tab-roll";
|
||||
}
|
||||
|
||||
if (option.tool != false) {
|
||||
type = "layui-tab-tool";
|
||||
}
|
||||
|
||||
if (option.roll == true && option.tool != false) {
|
||||
type = "layui-tab-rollTool";
|
||||
}
|
||||
|
||||
var tab = '<div class="pear-tab ' + type + ' layui-tab" lay-filter="' + option.elem + '" lay-allowClose="true">';
|
||||
|
||||
var title = '<ul class="layui-tab-title">';
|
||||
|
||||
var content = '<div class="layui-tab-content">';
|
||||
|
||||
var control =
|
||||
'<div class="layui-tab-control"><li class="layui-tab-prev layui-icon layui-icon-left"></li><li class="layui-tab-next layui-icon layui-icon-right"></li><li class="layui-tab-tool layui-icon layui-icon-down"><ul class="layui-nav" lay-filter=""><li class="layui-nav-item"><a href="javascript:;"></a><dl class="layui-nav-child">';
|
||||
|
||||
// 处 理 选 项 卡 头 部
|
||||
|
||||
var index = 0;
|
||||
|
||||
$.each(option.data, function(i, item) {
|
||||
|
||||
var TitleItem = '';
|
||||
|
||||
if (option.index == index) {
|
||||
|
||||
TitleItem += '<li lay-id="' + item.id + '" class="layui-this"><span class="pear-tab-active"></span>';
|
||||
|
||||
} else {
|
||||
|
||||
TitleItem += '<li lay-id="' + item.id + '" ><span class="pear-tab-active"></span>';
|
||||
|
||||
}
|
||||
|
||||
if (item.close) {
|
||||
// 当 前 选 项 卡 可 以 关 闭
|
||||
TitleItem += '<span class="able-close">' + item.title + '</span>';
|
||||
} else {
|
||||
// 当 前 选 项 卡 不 允 许 关 闭
|
||||
TitleItem += '<span class="disable-close">' + item.title + '</span>';
|
||||
}
|
||||
|
||||
TitleItem += '<i class="layui-icon layui-unselect layui-tab-close">ဆ</i></li>';
|
||||
|
||||
title += TitleItem;
|
||||
|
||||
|
||||
if (option.index == index) {
|
||||
|
||||
// 处 理 显 示 内 容
|
||||
content += '<div class="layui-show layui-tab-item"><iframe id="' + item.id + '" data-frameid="' + item.id +
|
||||
'" src="' + item.url +
|
||||
'" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;"></iframe></div>'
|
||||
|
||||
} else {
|
||||
|
||||
// 处 理 显 示 内 容
|
||||
content += '<div class="layui-tab-item"><iframe id="' + item.id + '" data-frameid="' + item.id + '" src="' +
|
||||
item.url +
|
||||
'" frameborder="no" border="0" marginwidth="0" marginheight="0" style="width: 100%;height: 100%;"></iframe></div>'
|
||||
|
||||
}
|
||||
index++;
|
||||
});
|
||||
|
||||
title += '</ul>';
|
||||
content += '</div>';
|
||||
|
||||
// 处 理 工 具 栏
|
||||
|
||||
control += '<dd id="closeThis"><a href="#">关 闭 当 前</a></dd>'
|
||||
control += '<dd id="closeOther"><a href="#">关 闭 其 他</a></dd>'
|
||||
control += '<dd id="closeAll"><a href="#">关 闭 全 部</a></dd>'
|
||||
control += '</dl></li></ul></li></div>';
|
||||
|
||||
tab += title;
|
||||
tab += control;
|
||||
tab += content;
|
||||
tab += '</div>';
|
||||
tab += ''
|
||||
return tab;
|
||||
}
|
||||
|
||||
function rollPage(d, option) {
|
||||
var $tabTitle = $('#' + option.elem + ' .layui-tab-title');
|
||||
|
||||
var left = $tabTitle.scrollLeft();
|
||||
|
||||
if ('left' === d) {
|
||||
|
||||
$tabTitle.animate({
|
||||
scrollLeft: left - 450
|
||||
}, 200);
|
||||
|
||||
} else {
|
||||
|
||||
$tabTitle.animate({
|
||||
scrollLeft: left + 450
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
function closeEvent(option) {
|
||||
$(".layui-tab[lay-filter='" + option.elem + "']").on("click", ".layui-tab-close", function() {
|
||||
|
||||
var layid = $(this).parent().attr("lay-id");
|
||||
tabDelete(option.elem, layid,option.closeEvent);
|
||||
})
|
||||
}
|
||||
|
||||
function toolEvent(option) {
|
||||
|
||||
$("body .layui-tab[lay-filter='" + option.elem + "']").on("click", "#closeThis", function() {
|
||||
var currentTab = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this");
|
||||
if (currentTab.find("span").is(".able-close")) {
|
||||
var currentId = currentTab.attr("lay-id");
|
||||
tabDelete(option.elem, currentId,option.closeEvent);
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
$("body .layui-tab[lay-filter='" + option.elem + "']").on("click", "#closeOther", function() {
|
||||
var currentId = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this").attr("lay-id");
|
||||
var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
|
||||
$.each(tabtitle, function(i) {
|
||||
if ($(this).attr("lay-id") != currentId) {
|
||||
if ($(this).find("span").is(".able-close")) {
|
||||
tabDelete(option.elem, $(this).attr("lay-id"),option.closeEvent);
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
$("body .layui-tab[lay-filter='" + option.elem + "']").on("click", "#closeAll", function() {
|
||||
|
||||
var currentId = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this").attr("lay-id");
|
||||
var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
|
||||
$.each(tabtitle, function(i) {
|
||||
if ($(this).find("span").is(".able-close")) {
|
||||
tabDelete(option.elem, $(this).attr("lay-id"),option.closeEvent);
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
exports(MOD_NAME, new pearTab());
|
||||
})
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
.layui-input, .layui-textarea{
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
|
@ -1,4 +1,32 @@
|
|||
.pear-container{
|
||||
margin: 10px;
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-track {
|
||||
background: white;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb {
|
||||
background: #E6E6E6;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-thumb:hover {
|
||||
background: #E6E6E6;
|
||||
}
|
||||
|
||||
body::-webkit-scrollbar-corner {
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
.pear-nav-tree {
|
||||
width: 220px;
|
||||
width: 230px;
|
||||
border-radius: 0px;
|
||||
background-color: #28333E;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,6 +64,10 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.pear-tab .layui-tab-close{
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.pear-tab .layui-tab-control>li {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
|
|
|
|||
|
|
@ -6,4 +6,5 @@
|
|||
@import url("pear-module/frame.css");
|
||||
@import url("pear-module/menu.css");
|
||||
@import url("pear-module/form.css");
|
||||
@import url("pear-module/form.css");
|
||||
@import url("pear-module/tab.css");
|
||||
|
|
|
|||
|
|
@ -72,8 +72,19 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
|
|||
})
|
||||
|
||||
$("body").on("click", ".refresh", function() {
|
||||
|
||||
bodyTab.refresh(600);
|
||||
$(".refresh a").removeClass("layui-icon-refresh-1");
|
||||
$(".refresh a").addClass("layui-anim");
|
||||
$(".refresh a").addClass("layui-anim-rotate");
|
||||
$(".refresh a").addClass("layui-anim-loop");
|
||||
$(".refresh a").addClass("layui-icon-loading");
|
||||
bodyTab.refresh(400);
|
||||
setTimeout(function() {
|
||||
$(".refresh a").addClass("layui-icon-refresh-1");
|
||||
$(".refresh a").removeClass("layui-anim");
|
||||
$(".refresh a").removeClass("layui-anim-rotate");
|
||||
$(".refresh a").removeClass("layui-anim-loop");
|
||||
$(".refresh a").removeClass("layui-icon-loading");
|
||||
}, 600)
|
||||
})
|
||||
|
||||
sideMenu.click(function(dom, data) {
|
||||
|
|
@ -100,27 +111,35 @@ layui.define(['table', 'jquery', 'element', 'form', 'tab', 'menu', 'frame'],
|
|||
});
|
||||
|
||||
$("body").on("click", ".refresh", function() {
|
||||
|
||||
bodyFrame.refresh(600);
|
||||
$(".refresh a").removeClass("layui-icon-refresh-1");
|
||||
$(".refresh a").addClass("layui-anim");
|
||||
$(".refresh a").addClass("layui-anim-rotate");
|
||||
$(".refresh a").addClass("layui-anim-loop");
|
||||
$(".refresh a").addClass("layui-icon-loading");
|
||||
bodyFrame.refresh(400);
|
||||
setTimeout(function() {
|
||||
$(".refresh a").addClass("layui-icon-refresh-1");
|
||||
$(".refresh a").removeClass("layui-anim");
|
||||
$(".refresh a").removeClass("layui-anim-rotate");
|
||||
$(".refresh a").removeClass("layui-anim-loop");
|
||||
$(".refresh a").removeClass("layui-icon-loading");
|
||||
}, 600)
|
||||
})
|
||||
|
||||
sideMenu.click(function(dom, data) {
|
||||
bodyFrame.changePage(data.menuUrl, data.menuPath, true);
|
||||
|
||||
compatible()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.keepLoad = function(option) {
|
||||
|
||||
|
||||
compatible()
|
||||
|
||||
setTimeout(function() {
|
||||
$(".loader-main").fadeOut(option.done);
|
||||
}, option.keepLoad)
|
||||
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
|
|||
var domss = hash(doms);
|
||||
|
||||
if (domss.text() != '') {
|
||||
data['menuPath'] = domss.find("span").text() + " / " + data['menuPath'];
|
||||
data['menuPath'] = domss.find("span").text() + " / " + data['menuPath'];
|
||||
}
|
||||
|
||||
var domsss = hash(domss);
|
||||
|
|
@ -110,7 +110,6 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
|
|||
|
||||
menu.removeClass("dark-theme");
|
||||
menu.removeClass("light-theme");
|
||||
|
||||
menu.addClass(skin);
|
||||
}
|
||||
|
||||
|
|
@ -438,7 +437,6 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
|
|||
if ($(this).parent().is(".layui-nav-itemed")) {
|
||||
|
||||
if (option.accordion) {
|
||||
// 手 风 琴 实 现
|
||||
$(this).parent().parent().find(".layui-nav-itemed").removeClass("layui-nav-itemed");
|
||||
$(this).parent().addClass("layui-nav-itemed");
|
||||
}
|
||||
|
|
@ -481,7 +479,6 @@ layui.define(['table', 'jquery', 'element'], function(exports) {
|
|||
|
||||
var top = $(this).offset().top + 5;
|
||||
|
||||
|
||||
if (!$(this).is(".layui-nav-item")) {
|
||||
|
||||
var left = $(this).offset().left + 132;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
position: "relative"
|
||||
});
|
||||
|
||||
closeEvent(option);
|
||||
closeEvent(option);
|
||||
|
||||
return new pearTab(option);
|
||||
}
|
||||
|
|
@ -93,7 +93,6 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
|
||||
title += '<span class="pear-tab-active"></span><span class="disable-close">' + opt.title +
|
||||
'</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>'
|
||||
|
||||
}
|
||||
|
||||
element.tabAdd(this.option.elem, {
|
||||
|
|
@ -103,9 +102,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
id: opt.id
|
||||
});
|
||||
|
||||
|
||||
element.tabChange(this.option.elem, opt.id);
|
||||
|
||||
}
|
||||
|
||||
var index = 0;
|
||||
|
|
@ -265,7 +262,10 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
|
||||
//查询当前选项卡数量
|
||||
if ($(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-title li[lay-id]").length >= this.option.tabMax) {
|
||||
layer.msg("最多打开" + this.option.tabMax + "个标签页",{icon:3,time:1000});
|
||||
layer.msg("最多打开" + this.option.tabMax + "个标签页", {
|
||||
icon: 3,
|
||||
time: 1000
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -321,7 +321,6 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
// 刷 新 指 定 的 选 项 卡
|
||||
pearTab.prototype.refresh = function(time) {
|
||||
|
||||
|
||||
// 刷 新 指 定 的 选 项 卡
|
||||
if (time != false && time != 0) {
|
||||
|
||||
|
|
@ -349,17 +348,13 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
}, time);
|
||||
|
||||
index++;
|
||||
}else{
|
||||
} else {
|
||||
$(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow
|
||||
.location.reload(true);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
// 重写 Tab Delete 删除 ， 源码存在 Bug 所以重写
|
||||
|
||||
function tabDelete(elem, id,callback) {
|
||||
|
||||
function tabDelete(elem, id, callback) {
|
||||
|
||||
//根据 elem id 来删除指定的 layui title li
|
||||
|
||||
|
|
@ -370,15 +365,15 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
var removeTab = tabTitle.find("li[lay-id='" + id + "']");
|
||||
|
||||
var nextNode = removeTab.next("li");
|
||||
|
||||
var currId ;
|
||||
|
||||
var currId;
|
||||
|
||||
if (nextNode.length) {
|
||||
|
||||
|
||||
nextNode.addClass("layui-this");
|
||||
|
||||
currId = nextNode.attr("lay-id");
|
||||
|
||||
|
||||
$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
|
||||
|
||||
} else {
|
||||
|
|
@ -390,9 +385,9 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
currId = prevNode.attr("lay-id");
|
||||
|
||||
$("#" + elem + " [id='" + currId + "']").parent().addClass("layui-show");
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
callback(currId);
|
||||
|
||||
removeTab.remove();
|
||||
|
|
@ -521,7 +516,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
$(".layui-tab[lay-filter='" + option.elem + "']").on("click", ".layui-tab-close", function() {
|
||||
|
||||
var layid = $(this).parent().attr("lay-id");
|
||||
tabDelete(option.elem, layid,option.closeEvent);
|
||||
tabDelete(option.elem, layid, option.closeEvent);
|
||||
})
|
||||
}
|
||||
|
||||
|
|
@ -531,7 +526,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
var currentTab = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title .layui-this");
|
||||
if (currentTab.find("span").is(".able-close")) {
|
||||
var currentId = currentTab.attr("lay-id");
|
||||
tabDelete(option.elem, currentId,option.closeEvent);
|
||||
tabDelete(option.elem, currentId, option.closeEvent);
|
||||
}
|
||||
|
||||
})
|
||||
|
|
@ -542,7 +537,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
$.each(tabtitle, function(i) {
|
||||
if ($(this).attr("lay-id") != currentId) {
|
||||
if ($(this).find("span").is(".able-close")) {
|
||||
tabDelete(option.elem, $(this).attr("lay-id"),option.closeEvent);
|
||||
tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent);
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -554,7 +549,7 @@ layui.define(['jquery', 'element'], function(exports) {
|
|||
var tabtitle = $(".layui-tab[lay-filter='" + option.elem + "'] .layui-tab-title li");
|
||||
$.each(tabtitle, function(i) {
|
||||
if ($(this).find("span").is(".able-close")) {
|
||||
tabDelete(option.elem, $(this).attr("lay-id"),option.closeEvent);
|
||||
tabDelete(option.elem, $(this).attr("lay-id"), option.closeEvent);
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<title>Pear Admin Layui</title>
|
||||
<!-- 依 赖 样 式 -->
|
||||
<link rel="stylesheet" href="component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="admin/css/load.css" />
|
||||
|
|
@ -68,12 +69,12 @@
|
|||
|
||||
var config = {
|
||||
keepLoad: 2000, // 主 页 加 载 过 度 时 长 可为 false
|
||||
muiltTab: false, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
|
||||
muiltTab: true, // 是 否 开 启 多 标 签 页 true 开启 false 关闭
|
||||
control: false, // 是 否 开 启 多 系 统 菜 单 true 开启 false 关闭
|
||||
index: 'view/console/console1.html', // 默 认 加 载 主 页
|
||||
index: 'view/console/console.html', // 默 认 加 载 主 页
|
||||
data: 'admin/data/menu.json', // 菜 单 数 据 加 载 地 址
|
||||
select: '0', // 默 认 选 中 菜 单 项
|
||||
logoTitle: "Data Pipeline", // 网站标题
|
||||
logoTitle: "Pear Admin", // 网站标题
|
||||
logoImage: "admin/images/logo.png" // 网站Logo
|
||||
};
|
||||
admin.render(config);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,106 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header"></div>
|
||||
<div class="layui-card-body">
|
||||
<div id="echarts-line-1" style="min-height:400px;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['echarts'], function() {
|
||||
var echarts = layui.echarts;
|
||||
|
||||
var echartsLineOne = echarts.init(document.getElementById('echarts-line-1'));
|
||||
|
||||
var option1 = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999"
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
},
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#999"
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '课时',
|
||||
type: 'line',
|
||||
data: [23, 60, 20, 36, 23, 85],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 8,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#A9F387' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#48D8BF' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#A9F387"
|
||||
}
|
||||
},
|
||||
smooth: true
|
||||
}]
|
||||
};
|
||||
echartsLineOne.setOption(option1);
|
||||
|
||||
window.onresize = function() {
|
||||
echartsLineOne.resize();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>首页三</title>
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<link rel="stylesheet" href="../../component/pear/css/pear.css" />
|
||||
<link rel="stylesheet" href="../../assets/console.css" />
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div>
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">今日访问</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number">
|
||||
9,04,0
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<i class="layui-icon layui-icon-app" style="color: #4099FF;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">提交次数</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number">
|
||||
6,34,4
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<i class="layui-icon layui-icon-component" style="color: #DD4A68;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">下载数量</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number">
|
||||
1,34,1
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<i class="layui-icon layui-icon-carousel" style="color: #5FB878;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs6 layui-col-md3">
|
||||
<div class="layui-card top-panel">
|
||||
<div class="layui-card-header">流量统计</div>
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-row layui-col-space5">
|
||||
<div class="layui-col-xs8 layui-col-md8 top-panel-number">
|
||||
7,04,6
|
||||
</div>
|
||||
<div class="layui-col-xs4 layui-col-md4 top-panel-tips">
|
||||
<i class="layui-icon layui-icon-cart" style="color: #E6A23C;"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-row layui-col-space10">
|
||||
<div class="layui-col-md9">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-body">
|
||||
<div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
||||
<div id="echarts-records" style="background-color:#ffffff;min-height:400px;padding: 10px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md3">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">最近更新</div>
|
||||
<div class="layui-card-body">
|
||||
<ul class="list">
|
||||
<li class="list-item"><span class="title">优化代码格式</span><span class="footer">2020-06-04 11:28</span></li>
|
||||
<li class="list-item"><span class="title">新增消息组件</span><span class="footer">2020-06-01 04:23</span></li>
|
||||
<li class="list-item"><span class="title">移动端兼容</span><span class="footer">2020-05-22 21:38</span></li>
|
||||
<li class="list-item"><span class="title">系统布局优化</span><span class="footer">2020-05-15 14:26</span></li>
|
||||
<li class="list-item"><span class="title">兼容多系统菜单模式</span><span class="footer">2020-05-13 16:32</span></li>
|
||||
<li class="list-item"><span class="title">兼容多标签页切换</span><span class="footer">2019-12-9 14:58</span></li>
|
||||
<li class="list-item"><span class="title">扩展下拉组件</span><span class="footer">2019-12-7 9:06</span></li>
|
||||
<li class="list-item"><span class="title">扩展卡片样式</span><span class="footer">2019-12-1 10:26</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--</div>-->
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['layer', 'echarts', 'element'], function() {
|
||||
var $ = layui.jquery,
|
||||
layer = layui.layer,
|
||||
element = layui.element,
|
||||
echarts = layui.echarts;
|
||||
|
||||
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
|
||||
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: "#999"
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
type: 'value',
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
color: '#DDD'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
color: "#333"
|
||||
},
|
||||
},
|
||||
nameTextStyle: {
|
||||
color: "#999"
|
||||
},
|
||||
splitArea: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
name: '课时',
|
||||
type: 'line',
|
||||
data: [23, 60, 20, 36, 23, 85],
|
||||
lineStyle: {
|
||||
normal: {
|
||||
width: 8,
|
||||
color: {
|
||||
type: 'linear',
|
||||
|
||||
colorStops: [{
|
||||
offset: 0,
|
||||
color: '#A9F387' // 0% 处的颜色
|
||||
}, {
|
||||
offset: 1,
|
||||
color: '#48D8BF' // 100% 处的颜色
|
||||
}],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 10,
|
||||
shadowOffsetY: 20
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#fff',
|
||||
borderWidth: 10,
|
||||
/*shadowColor: 'rgba(72,216,191, 0.3)',
|
||||
shadowBlur: 100,*/
|
||||
borderColor: "#A9F387"
|
||||
}
|
||||
},
|
||||
smooth: true
|
||||
}]
|
||||
};
|
||||
echartsRecords.setOption(option);
|
||||
|
||||
window.onresize = function() {
|
||||
echartsRecords.resize();
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
<button class="drawer-right pear-btn pear-btn-danger">右</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">进阶</div>
|
||||
<div class="layui-card-body">
|
||||
|
|
@ -29,16 +28,13 @@
|
|||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">扩展</div>
|
||||
<div class="layui-card-body">
|
||||
<button class="drawer-auto-close pear-btn pear-btn-success">自动关闭</button>
|
||||
<button class="drawer-call-back pear-btn pear-btn-success">回调函数</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="wrap">
|
||||
<div class="layer-left">
|
||||
<br/>
|
||||
|
|
@ -64,7 +60,6 @@
|
|||
<div class="layer-close-mask">
|
||||
<button id="btnClose" class="pear-btn pear-btn-primary" style="position: absolute; bottom: 10px;left: 10px;">关闭抽屉</button>
|
||||
</div>
|
||||
|
||||
<div class="layer-auto-close">
|
||||
<br/>
|
||||
<h3>打开 2秒 后自动关闭...</h3>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,234 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<title>富文本编辑器</title>
|
||||
<link href="../../component/pear/css/pear.css" rel="stylesheet">
|
||||
</head>
|
||||
<body class="pear-container">
|
||||
<div class="layui-row layui-col-space15">
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">输入框</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="text" name="title" hover placeholder="用户名" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="password" name="title" hover placeholder="密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
|
||||
<div class="layui-col-md6">
|
||||
<input type="text" name="title" round placeholder="用户名" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="password" name="title" round placeholder="密码" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="text" name="title" success placeholder="成功" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<input type="text" name="title" failure placeholder="失败" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||
<div class="layui-card-header">下拉选择框</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md6">
|
||||
<select name="city" lay-verify="">
|
||||
<option value="">请选择一个城市</option>
|
||||
<option value="010">北京</option>
|
||||
<option value="021">上海</option>
|
||||
<option value="0571">杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select name="city" lay-verify="">
|
||||
<option value="010">北京</option>
|
||||
<option value="021" disabled>上海（禁用效果）</option>
|
||||
<option value="0571" selected>杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select name="quiz">
|
||||
<option value="">请选择</option>
|
||||
<optgroup label="城市记忆">
|
||||
<option value="你工作的第一个城市">你工作的第一个城市？</option>
|
||||
</optgroup>
|
||||
<optgroup label="学生时代">
|
||||
<option value="你的工号">你的工号？</option>
|
||||
<option value="你最喜欢的老师">你最喜欢的老师？</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<select name="city" lay-verify="required" lay-search>
|
||||
<option value="">带搜索的选择框</option>
|
||||
<option value="1">layer</option>
|
||||
<option value="2">form</option>
|
||||
<option value="3">layim</option>
|
||||
<option value="4">element</option>
|
||||
<option value="5">laytpl</option>
|
||||
<option value="6">upload</option>
|
||||
<option value="7">laydate</option>
|
||||
<option value="8">laypage</option>
|
||||
<option value="9">flow</option>
|
||||
<option value="10">util</option>
|
||||
<option value="11">code</option>
|
||||
<option value="12">tree</option>
|
||||
<option value="13">layedit</option>
|
||||
<option value="14">nav</option>
|
||||
<option value="15">tab</option>
|
||||
<option value="16">table</option>
|
||||
<option value="17">select</option>
|
||||
<option value="18">checkbox</option>
|
||||
<option value="19">switch</option>
|
||||
<option value="20">radio</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<select name="city" lay-verify="">
|
||||
<option value="">请选择一个城市</option>
|
||||
<option value="010">北京</option>
|
||||
<option value="021">上海</option>
|
||||
<option value="0571">杭州</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||
<div class="layui-card-header">复选框</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="checkbox" name="" title="写作" checked>
|
||||
<input type="checkbox" name="" title="发呆">
|
||||
<input type="checkbox" name="" title="禁用" disabled>
|
||||
</div>
|
||||
<div class="layui-col-md12">
|
||||
<input type="checkbox" name="" title="写作" lay-skin="primary" checked>
|
||||
<input type="checkbox" name="" title="发呆" lay-skin="primary">
|
||||
<input type="checkbox" name="" title="禁用" lay-skin="primary" disabled>
|
||||
<input type="checkbox" name="" lay-skin="primary">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||
<div class="layui-card-header">开关</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="checkbox" name="xxx" lay-skin="switch">
|
||||
<input type="checkbox" name="yyy" lay-skin="switch" lay-text="ON|OFF" checked>
|
||||
<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">
|
||||
<input type="checkbox" name="aaa" lay-skin="switch" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card layui-form" lay-filter="component-form-element">
|
||||
<div class="layui-card-header">单选框</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<input type="radio" name="sex" value="nan" title="男">
|
||||
<input type="radio" name="sex" value="nv" title="女" checked>
|
||||
<input type="radio" name="sex" value="" title="中性" disabled>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-md6">
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">文本域</div>
|
||||
<div class="layui-card-body layui-row layui-col-space10">
|
||||
<div class="layui-col-md12">
|
||||
<textarea name="" placeholder="请输入" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-card">
|
||||
<div class="layui-card-header">响应式组合</div>
|
||||
<div class="layui-card-body">
|
||||
<form class="layui-form" action="" lay-filter="component-form-element">
|
||||
<div class="layui-row layui-col-space10 layui-form-item">
|
||||
<div class="layui-col-lg6">
|
||||
<label class="layui-form-label">员工姓名：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="fullname" lay-verify="required" placeholder="" autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-lg6">
|
||||
<label class="layui-form-label">技术工种：</label>
|
||||
<div class="layui-input-block">
|
||||
<select name="type" lay-verify="required" lay-filter="aihao">
|
||||
<option value=""></option>
|
||||
<option value="0">前端工程师</option>
|
||||
<option value="1">Node.js工程师</option>
|
||||
<option value="2">PHP工程师</option>
|
||||
<option value="3">Java工程师</option>
|
||||
<option value="4">运维</option>
|
||||
<option value="4">视觉设计师</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">兴趣爱好：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="interest[write]" title="写作">
|
||||
<input type="checkbox" name="interest[read]" title="阅读">
|
||||
<input type="checkbox" name="interest[code]" title="代码" checked>
|
||||
<input type="checkbox" name="interest[dreaming]" title="做梦">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">是否婚姻：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="marriage" lay-skin="switch" lay-text="是|否">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">所属职称：</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="radio" name="role" value="" title="经理">
|
||||
<input type="radio" name="role" value="" title="主管">
|
||||
<input type="radio" name="role" value="" title="码农" checked>
|
||||
<input type="radio" name="role" value="" title="端水">
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">其它信息：</label>
|
||||
<div class="layui-input-block">
|
||||
<textarea name="other" placeholder="" class="layui-textarea"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label"> </label>
|
||||
<div class="layui-input-block">
|
||||
<input type="checkbox" name="agreement" title="同意" lay-skin="primary" checked>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-block">
|
||||
<button class="layui-btn" lay-submit lay-filter="component-form-element">立即提交</button>
|
||||
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="../../component/layui/layui.js"></script>
|
||||
<script src="../../component/pear/pear.js"></script>
|
||||
<script>
|
||||
layui.use(['form'], function() {
|
||||
var form = layui.form;
|
||||
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue