🚀 Layui v2.11.0

This commit is contained in:
wolfcode
2025-04-22 15:26:25 +08:00
parent 253379f0c6
commit 115573a88c
8 changed files with 115 additions and 103 deletions

View File

@@ -91,8 +91,8 @@
<div class="layuimini-site-mobile"><i class="layui-icon"></i></div>
<div class="layui-body">
<div class="layuimini-tab layui-tab-rollTool layui-tab" lay-filter="layuiminiTab" lay-allowclose="true">
<ul class="layui-tab-title">
<div class="layuimini-tab layui-tabs-rollTool layui-tabs" lay-filter="layuiminiTab" id="layuiminiTab">
<ul class="layui-tabs-header">
<li class="layui-this" id="layuiminiHomeTabId" lay-id=""></li>
</ul>
<div class="layui-tab-control">
@@ -111,8 +111,8 @@
</ul>
</li>
</div>
<div class="layui-tab-content">
<div id="layuiminiHomeTabIframe" class="layui-tab-item layui-show"></div>
<div class="layui-tabs-body">
<div id="layuiminiHomeTabIframe" class="layui-tab-item layui-tabs-item layui-show"></div>
</div>
</div>
</div>

View File

@@ -16,8 +16,8 @@
<span class="layui-badge layui-bg-cyan pull-right ">实时</span>
<div class="panel-content">
<h5>用户统计</h5>
<h1>1234</h1>
<h6>当前分类总记录数</h6>
<h2>1234</h2>
<h6>记录数</h6>
</div>
</div>
</div>
@@ -28,8 +28,8 @@
<span class="layui-badge layui-bg-purple pull-right ">实时</span>
<div class="panel-content">
<h5>商品统计</h5>
<h1>1234</h1>
<h6>当前分类总记录数</h6>
<h2>1234</h2>
<h6>记录数</h6>
</div>
</div>
</div>
@@ -40,8 +40,8 @@
<span class="layui-badge layui-bg-orange pull-right ">实时</span>
<div class="panel-content">
<h5>浏览统计</h5>
<h1>1234</h1>
<h6>当前分类总记录数</h6>
<h2>1234</h2>
<h6>记录数</h6>
</div>
</div>
</div>
@@ -52,8 +52,8 @@
<span class="layui-badge layui-bg-red pull-right ">实时</span>
<div class="panel-content">
<h5>订单统计</h5>
<h1>1234</h1>
<h6>当前分类总记录数</h6>
<h2>1234</h2>
<h6>记录数</h6>
</div>
</div>
</div>

View File

@@ -533,4 +533,8 @@ table样式
.layui-input:focus, .layui-textarea:focus {
border-color: var(--ea8-theme-main-color) !important;
}
.layui-tabs-item {
height: 100%;
}

View File

@@ -123,43 +123,47 @@
/**tab选项卡 */
.layuimini-tab {
margin: 0px;
margin: 0;
overflow: hidden;
height: 100% !important;
}
.layuimini-tab .layui-tab-content {
.layuimini-tab .layui-tabs-scroll {
position: marker;
}
.layuimini-tab .layui-tabs-body {
height: calc(100% - 37px) !important;
}
.layuimini-tab .layui-tab-content .layui-tab-item {
.layuimini-tab .layui-tabs-body .layui-tabs-item {
height: 100%;
}
.layuimini-tab .layui-tab-content {
padding: 0px;
.layuimini-tab .layui-tabs-body {
padding: 0;
}
.layuimini-tab .layui-tab-title {
.layuimini-tab .layui-tabs-header {
border: none;
border: 1px solid whitesmoke;
background-color: white;
}
.layuimini-tab .layui-tab-title li {
.layuimini-tab .layui-tabs-header li {
border-right: 1px solid whitesmoke;
color: dimgray;
}
.layuimini-tab .layui-tab-title .layui-tab-bar {
.layuimini-tab .layui-tabs-header .layui-tab-bar {
display: none;
}
.layuimini-tab .layui-tab-title .layui-this:after {
.layuimini-tab .layui-tabs-header .layui-this:after {
display: none;
}
.layuimini-tab .layui-tab-title .layuimini-tab-active {
.layuimini-tab .layui-tabs-header .layuimini-tab-active {
display: inline-block;
background-color: lightgray;
width: 9px;
@@ -168,49 +172,49 @@
margin-right: 5px;
}
.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
background-color: #1aa094;
.layuimini-tab .layui-tabs-header .layui-this .layuimini-tab-active {
background-color: var(--ea8-theme-main-color);
}
.layuimini-tab > .layui-tab-title, .layuimini-tab > .close-box {
.layuimini-tab > .layui-tabs-header, .layuimini-tab > .close-box {
height: 35px !important;
}
.layuimini-tab > .layui-tab-title li, .layuimini-tab > .close-box li {
.layuimini-tab > .layui-tabs-header li, .layuimini-tab > .close-box li {
line-height: 35px !important;
}
.layuimini-tab .layui-tab-title span {
.layuimini-tab .layui-tabs-header span {
color: #acafb1;
}
.layuimini-tab .layui-tab-title .layui-this span {
.layuimini-tab .layui-tabs-header .layui-this span {
color: dimgray;
}
.layuimini-tab .layui-tab-title .layui-tab-close {
.layuimini-tab .layui-tabs-header .layui-tab-close {
font-size: 12px !important;
width: 14px !important;
height: 14px !important;
line-height: 16px !important;
}
.layuimini-tab .layui-tab-title .layui-tab-close:hover {
.layuimini-tab .layui-tabs-header .layui-tab-close:hover {
border-radius: 4em;
background: #ff5722;
}
.layuimini-tab .layui-tab-title .disable-close + .layui-tab-close {
.layuimini-tab .layui-tabs-header .disable-close + .layui-tab-close {
display: none;
}
.layuimini-tab .layui-tab-title .able-close + .layui-tab-close {
.layuimini-tab .layui-tabs-header .able-close + .layui-tab-close {
display: inline-block;
}
.layuimini-tab .layui-tab-control > li {
position: absolute;
top: 0px;
top: 0;
height: 35px;
line-height: 35px;
width: 35px;
@@ -221,7 +225,7 @@
}
.layuimini-tab .layuimini-tab-roll-left {
left: 0px;
left: 0;
border-right: whitesmoke 1px solid;
border-left: whitesmoke 1px solid;
}
@@ -232,7 +236,7 @@
}
.layuimini-tab .layui-tab-tool {
right: 0px;
right: 0;
border-left: 1px solid whitesmoke;
}
@@ -248,11 +252,11 @@
}
.layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-right {
right: 0px;
right: 0;
border-right: 1px solid whitesmoke;
}
.layuimini-tab.layui-tab-roll .layui-tab-title {
.layuimini-tab.layui-tab-roll .layui-tabs-header {
padding-left: 35px;
padding-right: 35px;
}
@@ -262,13 +266,13 @@
display: block;
}
.layuimini-tab.layui-tab-tool .layui-tab-title {
padding-left: 0px;
.layuimini-tab.layui-tab-tool .layui-tabs-header {
padding-left: 0;
padding-right: 35px;
}
.layuimini-tab.layui-tab-rollTool .layui-tab-title {
.layuimini-tab.layui-tab-rollTool .layui-tabs-header {
padding-left: 35px;
padding-right: 80px;
}
@@ -451,7 +455,7 @@
/**其它 */
.layui-tab-item {
.layui-tabs-item {
width: 100% !important;
height: 100% !important;
}
@@ -466,7 +470,7 @@
}
.layui-tab {
margin: 0 0 0 0;
margin: 0;
z-index: 99999;
}
@@ -640,26 +644,28 @@
color: #484545;
}
.layuimini-tab-make{
.layuimini-tab-make {
position: absolute;
top: 36px;
bottom: 0px;
bottom: 0;
width: 100%;
background: rgb(255, 255, 255,0);
padding: 0px;
background: rgb(255, 255, 255, 0);
padding: 0;
overflow: hidden;
}
/**
菜单缩放
*/
.popup-tips .layui-layer-TipsG{
.popup-tips .layui-layer-TipsG {
display: none;
}
.popup-tips.layui-layer-tips .layui-layer-content{
.popup-tips.layui-layer-tips .layui-layer-content {
padding: 0;
}
.popup-tips .layui-nav-tree{
.popup-tips .layui-nav-tree {
width: 150px;
border-radius: 10px;
}
@@ -670,13 +676,13 @@
}
/**头部菜单字体间距*/
.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-pc-show,.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-mobile-show {
.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 {
.layuimini-menu-left .layui-nav-more, .layuimini-menu-left-zoom .layui-nav-more {
font-family: layui-icon !important;
font-size: 12px;
font-style: normal;
@@ -695,10 +701,11 @@
margin-top: -6px !important;
}
.layuimini-menu-left .layui-nav-more:before,.layuimini-menu-left-zoom .layui-nav-more:before {
.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 {
.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);
@@ -706,10 +713,10 @@
-o-transform: rotate(180deg);
width: 12px;
text-align: center;
border-style:none;
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 {
.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;
@@ -717,7 +724,7 @@
}
/**修复左侧菜单字体不对齐的问题*/
.layuimini-menu-left .layui-nav-item a .fa,.layuimini-menu-left .layui-nav-item a .layui-icon{
.layuimini-menu-left .layui-nav-item a .fa, .layuimini-menu-left .layui-nav-item a .layui-icon {
width: 20px;
}
@@ -773,16 +780,18 @@
left: 95px !important;
}
.layuimini-pc-show{
.layuimini-pc-show {
display: block;
}
.layuimini-mobile-show{
.layuimini-mobile-show {
display: none;
}
/**菜单缩放*/
.layuimini-mini .layuimini-menu-left .layui-nav-more,.layuimini-mini .layuimini-menu-left .layui-nav-child{
display: none;!important;
.layuimini-mini .layuimini-menu-left .layui-nav-more, .layuimini-mini .layuimini-menu-left .layui-nav-child {
display: none;
!important;
}
}
@@ -794,29 +803,31 @@
/**
todo 修复低版本IOS不能滑动问题, 但还是有问题, 低版本IOS部分情况下子页面无法自适应
*/
.layuimini-tab .layui-tab-content .layui-tab-item{
.layuimini-tab .layui-tabs-body .layui-tabs-item {
-webkit-overflow-scrolling: touch;
overflow: scroll;
width:100%;
height:100%;
width: 100%;
height: 100%;
}
.layuimini-tab .layui-tab-content .layui-tab-item iframe {
.layuimini-tab .layui-tabs-body .layui-tabs-item iframe {
height: 100%;
width: 100%;
}
.layuimini-pc-show{
.layuimini-pc-show {
display: none;
}
.layuimini-mobile-show{
.layuimini-mobile-show {
display: block;
}
.layuimini-header-content {
left: 0;
}
.layui-layout-admin .layui-body .layui-tab-item.layui-show {
.layui-layout-admin .layui-body .layui-tabs-item.layui-show {
border-top: 1px solid #e2e2e2;
}
@@ -854,7 +865,7 @@
}
.layuimini-mini .layui-layout-admin .layui-body {
left: 0!important;
left: 0 !important;
transition: left .2s;
top: 0;
z-index: 998;
@@ -905,7 +916,7 @@
}
}
@media screen and (max-width: 550px){
@media screen and (max-width: 550px) {
/**头部右侧数据*/
.layuimini-multi-module.layuimini-mini .layuimini-header-content .layui-layout-right {

View File

@@ -6,6 +6,7 @@
*/
define(["jquery"], function ($) {
var element = layui.element,
tabs = layui.tabs,
$ = layui.$;
@@ -44,15 +45,14 @@ define(["jquery"], function ($) {
options.title = options.title || null;
options.isIframe = options.isIframe || false;
options.maxTabNum = options.maxTabNum || 20;
if ($(".layuimini-tab .layui-tab-title li").length >= options.maxTabNum) {
if ($(".layuimini-tab .layui-tabs-header li").length >= options.maxTabNum) {
layer.msg('Tab窗口已达到限定数量请先关闭部分Tab');
return false;
}
var ele = element;
if (options.isIframe) ele = parent.layui.element;
ele.tabAdd('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" marginwidth="0" marginheight="0" src="' + options.href + '"></iframe>'
if (options.isIframe) tabs = parent.layui.tabs;
tabs.add('layuiminiTab', {
title: `<span class="layuimini-tab-active"></span><span>${options.title}</span>`
, 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');
@@ -65,7 +65,7 @@ define(["jquery"], function ($) {
* @param tabId
*/
change: function (tabId) {
element.tabChange('layuiminiTab', tabId);
tabs.change('layuiminiTab', tabId);
},
/**
@@ -74,13 +74,10 @@ define(["jquery"], function ($) {
* @param isParent
*/
delete: function (tabId, isParent) {
// todo 未知BUG不知道是不是layui问题必须先删除元素
$(".layuimini-tab .layui-tab-title .layui-unselect.layui-tab-bar").remove();
if (isParent === true) {
parent.layui.element.tabDelete('layuiminiTab', tabId);
parent.layui.tabs.close('layuiminiTab', tabId);
} else {
element.tabDelete('layuiminiTab', tabId);
tabs.close('layuiminiTab', tabId);
}
},
@@ -101,7 +98,7 @@ define(["jquery"], function ($) {
isIframe: true,
});
}
parent.layui.element.tabChange('layuiminiTab', options.href);
parent.layui.tabs.change('layuiminiTab', options.href);
parent.layer.close(loading);
},
@@ -109,7 +106,7 @@ define(["jquery"], function ($) {
* 在iframe层关闭当前tab方法
*/
deleteCurrentByIframe: function () {
var ele = $(".layuimini-tab .layui-tab-title li.layui-this", parent.document);
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);
@@ -123,14 +120,14 @@ define(["jquery"], function ($) {
// 判断选项卡上是否有
var checkTab = false;
if (isIframe === undefined || isIframe === false) {
$(".layui-tab-title li").each(function () {
$(".layui-tabs-header li").each(function () {
var checkTabId = $(this).attr('lay-id');
if (checkTabId != null && checkTabId === tabId) {
checkTab = true;
}
});
} else {
parent.layui.$(".layui-tab-title li").each(function () {
parent.layui.$(".layui-tabs-header li").each(function () {
var checkTabId = $(this).attr('lay-id');
if (checkTabId != null && checkTabId === tabId) {
checkTab = true;
@@ -155,7 +152,7 @@ define(["jquery"], function ($) {
'</dl>\n' +
'</div>';
var makeHtml = '<div class="layuimini-tab-make"></div>';
$('.layuimini-tab .layui-tab-title').after(menuHtml);
$('.layuimini-tab .layui-tabs-header').after(menuHtml);
$('.layuimini-tab .layui-tab-content').after(makeHtml);
},
@@ -233,7 +230,7 @@ define(["jquery"], function ($) {
maxTabNum: options.maxTabNum,
});
}
element.tabChange('layuiminiTab', tabId);
tabs.change('layuiminiTab', tabId);
layer.close(loading);
});
@@ -262,14 +259,14 @@ define(["jquery"], function ($) {
maxTabNum: options.maxTabNum,
});
}
parent.layui.element.tabChange('layuiminiTab', tabId);
parent.layui.tabs.change('layuiminiTab', tabId);
parent.layer.close(loading);
});
/**
* 关闭选项卡
**/
$('body').on('click', '.layuimini-tab .layui-tab-title .layui-tab-close', function () {
$('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');
@@ -285,7 +282,7 @@ define(["jquery"], function ($) {
$('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-tab-title li").each(function () {
$(".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');
@@ -307,7 +304,7 @@ define(["jquery"], function ($) {
/**
* 禁用网页右键
*/
$(".layuimini-tab .layui-tab-title").unbind("mousedown").bind("contextmenu", function (e) {
$(".layuimini-tab .layui-tabs-header").unbind("mousedown").bind("contextmenu", function (e) {
e.preventDefault();
return false;
});
@@ -315,7 +312,7 @@ define(["jquery"], function ($) {
/**
* 注册鼠标右键
*/
$('body').on('mousedown', '.layuimini-tab .layui-tab-title li', function (e) {
$('body').on('mousedown', '.layuimini-tab .layui-tabs-header li', function (e) {
var left = $(this).offset().left - $('.layuimini-tab ').offset().left + ($(this).width() / 2),
tabId = $(this).attr('lay-id');
if (e.which === 3) {
@@ -337,7 +334,7 @@ define(["jquery"], 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-tab-title li").each(function () {
$(".layuimini-tab .layui-tabs-header li").each(function () {
var tabId = $(this).attr('lay-id');
var id = $(this).attr('id');
if (id !== 'layuiminiHomeTabId') {
@@ -403,10 +400,10 @@ define(["jquery"], function ($) {
options.menuList = options.menuList || [];
if (!options.urlHashLocation) return false;
var tabId = location.hash.replace(/^#/, '');
if (tabId === null || tabId === undefined || tabId ==='') return false;
if (tabId === null || tabId === undefined || tabId === '') return false;
// 判断是否为首页
if(tabId ===options.homeInfo.href) return false;
if (tabId === options.homeInfo.href) return false;
// 判断是否为右侧菜单
var menu = miniTab.searchMenu(tabId, options.menuList);
@@ -419,7 +416,7 @@ define(["jquery"], function ($) {
maxTabNum: options.maxTabNum,
});
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
element.tabChange('layuiminiTab', tabId);
tabs.change('layuiminiTab', tabId);
return false;
}
@@ -436,7 +433,7 @@ define(["jquery"], function ($) {
maxTabNum: options.maxTabNum,
});
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
element.tabChange('layuiminiTab', tabId);
tabs.change('layuiminiTab', tabId);
isSearchMenu = true;
return false;
}
@@ -452,7 +449,7 @@ define(["jquery"], function ($) {
isIframe: false,
maxTabNum: options.maxTabNum,
});
element.tabChange('layuiminiTab', tabId);
tabs.change('layuiminiTab', tabId);
return false;
},
@@ -543,7 +540,7 @@ define(["jquery"], function ($) {
* 自动定位
*/
rollPosition: function () {
var $tabTitle = $('.layuimini-tab .layui-tab-title');
var $tabTitle = $('.layuimini-tab .layui-tabs-header');
var autoLeft = 0;
$tabTitle.children("li").each(function () {
if ($(this).hasClass('layui-this')) {
@@ -562,7 +559,7 @@ define(["jquery"], function ($) {
* @param direction
*/
rollClick: function (direction) {
var $tabTitle = $('.layuimini-tab .layui-tab-title');
var $tabTitle = $('.layuimini-tab .layui-tabs-header');
var left = $tabTitle.scrollLeft();
if ('left' === direction) {
$tabTitle.animate({

View File

@@ -41,7 +41,7 @@ define(["jquery"], function ($) {
headerRightBg: '#23262e', //头部右侧背景色
headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
headerRightChildColor: 'rgba(255,255,255,.7)', //头部右侧下拉字体颜色,
headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
headerRightColorThis: 'rgba(255,255,255,.7)', //头部右侧鼠标选中,
headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long