orga0063
/
BootstrapAdmin
4
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

修改BUG：多Tab样式 link #xxx 

#Issue
https://gitee.com/LongbowEnterprise/dashboard/issues?id=IVJMX
This commit is contained in:
Argo Zhang 2019-04-18 13:19:49 +08:00
parent 26eeb8cab8
commit 95eabfd1a0
11 changed files with 1915 additions and 1616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
Bootstrap.Admin/Views/Admin/Index.cshtml
View File

@ -1,24 +1,5 @@
@model ModelBase
@{
ViewBag.Title = "后台管理";
Layout = "_Frame";
}
@section css {
<style>
.main-content {
position: fixed;
}
.main-content h4 {
color: #fff;
margin-top: 0;
}
</style>
}
@section javascript {
<script>
$(function () {
$('#main-content').addClass('welcome-bg');
});
</script>
}
<h4>欢迎使用后台管理</h4>

2
Bootstrap.Admin/Views/Shared/Footer.cshtml
View File

@ -1,5 +1,5 @@
@model ModelBase
<footer class="position-fixed">
<footer>
<div><span id="websiteFooter">@Model.Footer</span><span asp-condition="@Model.IsDemo">（演示系统）</span></div>
<a id="gotoTop" href="#" class="go-top" title="返回顶部" data-toggle="tooltip" data-placement="left">
<i class="fa fa-angle-up"></i>

8
Bootstrap.Admin/Views/Shared/_Admin.cshtml
View File

@ -1,16 +1,14 @@
@{
@{
Layout = "_Bootstrap";
}
@section css {
<environment include="Development">
<link href="~/lib/toastr.js/toastr.css" rel="stylesheet" />
<link href="~/lib/nprogress/nprogress.css" rel="stylesheet" />
<link href="~/lib/bootstrap-sweetalert/sweetalert.css" rel="stylesheet" />
<link href="~/lib/scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link href="~/lib/toastr.js/toastr.min.css" rel="stylesheet" />
<link href="~/lib/nprogress/nprogress.min.css" rel="stylesheet" />
<link href="~/lib/bootstrap-sweetalert/sweetalert.min.css" rel="stylesheet" />
<link href="~/lib/scrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
</environment>
@ -23,7 +21,6 @@
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="~/lib/bootstrap-sweetalert/sweetalert.js"></script>
<script src="~/lib/nprogress/nprogress.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/scrollbar/jquery.mousewheel.min.js"></script>
@ -31,7 +28,6 @@
<script src="~/lib/signalr/dist/browser/signalr.min.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.dcjqaccordion.2.7.min.js"></script>
<script src="~/lib/bootstrap-sweetalert/sweetalert.min.js"></script>
<script src="~/lib/nprogress/nprogress.min.js"></script>
</environment>
<script src="~/lib/toastr.js/toastr.min.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.cookie.js"></script>
@ -39,10 +35,10 @@
@RenderSection("javascript", false)
<script src="~/js/log.js" asp-append-version="true"></script>
}
@await Html.PartialAsync("navigator")
<section id="main-content" class="main-content">
@RenderBody()
</section>
@await Html.PartialAsync("Footer")
@section modal {
@RenderSection("modal", false)
}

2
Bootstrap.Admin/Views/Shared/_Bootstrap.cshtml
View File

@ -31,7 +31,5 @@
<script src="~/lib/longbow/longbow.common.js" asp-append-version="true"></script>
@RenderSection("javascript", false)
}
@await Html.PartialAsync("Header")
@RenderBody()
@await Html.PartialAsync("Footer")
@RenderSection("modal", false)

85
Bootstrap.Admin/Views/Shared/_Frame.cshtml Normal file
View File

@ -0,0 +1,85 @@
@{
Layout = "_Layout";
ViewBag.Frame = "frame";
}
@section css {
<environment include="Development">
<link href="~/lib/twitter-bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="~/lib/toastr.js/toastr.css" rel="stylesheet" />
<link href="~/lib/nprogress/nprogress.css" rel="stylesheet" />
<link href="~/lib/bootstrap-sweetalert/sweetalert.css" rel="stylesheet" />
<link href="~/lib/scrollbar/jquery.mCustomScrollbar.css" rel="stylesheet" />
</environment>
<environment exclude="Development">
<link href="~/lib/twitter-bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
<link href="~/lib/toastr.js/toastr.min.css" rel="stylesheet" />
<link href="~/lib/nprogress/nprogress.min.css" rel="stylesheet" />
<link href="~/lib/bootstrap-sweetalert/sweetalert.min.css" rel="stylesheet" />
<link href="~/lib/scrollbar/jquery.mCustomScrollbar.min.css" rel="stylesheet" />
</environment>
@RenderSection("css", false)
<link href="~/css/theme.css" rel="stylesheet" asp-append-version="true" />
<link href="~/css/theme-responsive.css" rel="stylesheet" asp-append-version="true" />
<link href="~/css/site.css" rel="stylesheet" asp-append-version="true" />
<link href="~/css/site-responsive.css" rel="stylesheet" asp-append-version="true" />
@if (!string.IsNullOrEmpty(Model.ActiveCss))
{
<link href="~/css/@Model.ActiveCss" rel="stylesheet" asp-append-version="true" />
}
}
@section javascript {
<environment include="Development">
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.js"></script>
<script src="~/lib/scrollbar/jquery.mousewheel.js"></script>
<script src="~/lib/scrollbar/jquery.mCustomScrollbar.js"></script>
<script src="~/lib/signalr/dist/browser/signalr.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.dcjqaccordion.2.7.js"></script>
<script src="~/lib/bootstrap-sweetalert/sweetalert.js"></script>
<script src="~/lib/nprogress/nprogress.js"></script>
</environment>
<environment exclude="Development">
<script src="~/lib/twitter-bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/scrollbar/jquery.mousewheel.min.js"></script>
<script src="~/lib/scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="~/lib/signalr/dist/browser/signalr.min.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.dcjqaccordion.2.7.min.js"></script>
<script src="~/lib/bootstrap-sweetalert/sweetalert.min.js"></script>
<script src="~/lib/nprogress/nprogress.min.js"></script>
</environment>
<script src="~/lib/toastr.js/toastr.min.js"></script>
<script src="~/lib/dcjqaccordion/js/jquery.cookie.js"></script>
<script src="~/lib/longbow/longbow.common.js" asp-append-version="true"></script>
<script src="~/js/common-scripts.js" asp-append-version="true"></script>
@RenderSection("javascript", false)
<script src="~/js/log.js" asp-append-version="true"></script>
}
@await Html.PartialAsync("Header")
@await Html.PartialAsync("navigator")
<section class="main-content">
<div class="nav-ba">
<div class="nav-prev" data-method="prev">
<a class="nav-link" href="#"><i class="fa fa-chevron-circle-left"></i></a>
</div>
<div class="flex-fill" style="overflow: hidden;">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="~/html/index.html">
<span>后台管理</span>
</a>
<i class="nav-close fa fa-times-circle-o"></i>
</li>
<li class="nav-item flex-fill">
<a class="nav-link flex-fill" href="#">&nbsp;</a>
</li>
</ul>
</div>
<div class="nav-next" data-method="next">
<a class="nav-link" href="#"><i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<iframe frameborder="0" height="100%" width="100%" class="active" src="~/html/index.html"></iframe>
@RenderBody()
</section>
@await Html.PartialAsync("Footer")

2
Bootstrap.Admin/Views/Shared/_Layout.cshtml
View File

@ -13,7 +13,7 @@
<link href="../css/IE8.css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<body class="@ViewBag.Frame">
<!--[if lt IE 10 ]>
<div id="ieAlert" class="alert alert-danger alert-dismissible">
<div>当前浏览器版本太低，不支持本系统，请升级到至少IE10 <a href="../browser/IE10.exe" target="_blank">本地下载</a> <a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" target="_blank">微软下载</a>，或者使用Chrome浏览器 <a href="../browser/ChromeSetup.exe" target="_blank">本地下载</a></div>

46
Bootstrap.Admin/wwwroot/css/site-responsive.css
View File

@ -1,4 +1,4 @@
@media (min-width: 568px) {
@media (min-width: 568px) {
.cache-item > :nth-child(2) {
flex: 0 0 144px;
}
@ -38,14 +38,9 @@
}
.main-content {
position: fixed;
overflow: auto;
-ms-overflow-style: auto;
}
.header, footer {
position: fixed;
}
}
@media (min-width: 769px) {
@ -53,6 +48,10 @@
transform: translate(-100%);
}
footer {
display: none;
}
.sidebar-open footer {
display: flex;
}
@ -62,17 +61,46 @@
transform: translate(0);
width: 210px;
overflow: hidden;
bottom: 40px;
}
.sidebar-open .main-content {
.sidebar-open .main-content, .sidebar-open.frame .main-content {
margin-left: 0;
display: block;
}
.main-content {
margin-left: 210px;
transition: none;
top: 0;
}
.frame .main-content {
overflow: hidden;
margin-left: 210px;
}
.frame .breadcrumb {
display: none;
}
.frame .nav-ba {
display: flex;
position: absolute;
top: 6px;
width: 100%;
}
.frame aside, .frame .main-content {
top: 58px;
bottom: 40px;
}
.frame footer {
position: fixed;
display: flex;
}
.frame iframe {
padding-top: 45px;
}
}

82
Bootstrap.Admin/wwwroot/css/site.css
View File

@ -1,4 +1,4 @@
/*Title*/
/*Title*/
.header {
padding: 0 15px;
background: #fff;
@ -175,11 +175,6 @@
}
/*end title*/
.welcome-bg {
background-image: url('../images/bg.jpg');
background-size: 100% 100%;
}
.card-cache {
margin-bottom: 15px;
}
@ -641,3 +636,78 @@ pre {
overflow: auto;
padding: 6px 0;
}
.frame.sidebar-open {
overflow: auto;
}
.frame {
overflow: hidden;
}
.frame .main-content {
position: absolute;
padding: 0;
bottom: 0;
}
.frame .nav-ba {
display: none;
}
.frame footer {
display: none;
}
.frame iframe:not(.active) {
display: none;
}
.nav-ba {
display: flex;
}
.nav-ba .nav, .nav-ba .nav-prev, .nav-ba .nav-next, .nav-ba .nav .nav-item .nav-link {
border-bottom: solid 1px #dee2e6;
}
.nav-ba .nav {
overflow: hidden;
flex-wrap: nowrap;
border: none;
overflow: hidden;
}
.nav-ba .nav .nav-item {
display: flex;
margin-bottom: auto;
position: relative;
}
.nav-ba .nav .nav-item .nav-link {
color: #797979;
padding-right: 32px;
white-space: nowrap;
}
.nav-ba .nav .nav-link.active {
background-color: transparent;
border-bottom-color: transparent;
color: #007bff;
}
.nav-ba .nav .nav-link:hover:not(.active), .nav-tabs .nav-link:focus:not(.active) {
border-color: transparent;
border-bottom: solid 1px #dee2e6;
}
.nav-ba .nav-item .nav-close {
position: absolute;
right: 6px;
top: 6px;
display: none;
}
.nav-ba .nav-item:hover .nav-close {
display: inline;
}

43
Bootstrap.Admin/wwwroot/html/index.html Normal file
View File

@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="apple-touch-icon" href="~/favicon.png" />
<title>后台管理</title>
<style>
.main-content {
background-image: url('../images/bg.jpg');
background-size: 100% 100%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
}
.main-content h4 {
color: #fff;
margin-top: 0;
}
</style>
<!--[if lt IE 10 ]>
<link href="../css/IE8.css" rel="stylesheet" />
<![endif]-->
</head>
<body>
<!--[if lt IE 10 ]>
<div id="ieAlert" class="alert alert-danger alert-dismissible">
<div>当前浏览器版本太低，不支持本系统，请升级到至少IE10 <a href="../browser/IE10.exe" target="_blank">本地下载</a> <a href="https://support.microsoft.com/zh-cn/help/17621/internet-explorer-downloads" target="_blank">微软下载</a>，或者使用Chrome浏览器 <a href="../browser/ChromeSetup.exe" target="_blank">本地下载</a></div>
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">关闭</span></button>
</div>
<![endif]-->
<div class="main-content">
<h4>欢迎使用后台管理</h4>
</div>
</body>
</html>

104
Bootstrap.Admin/wwwroot/js/common-scripts.js
View File

@ -1,5 +1,5 @@
(function ($) {
var formatCategoryName = function(menu) {
(function ($) {
var formatCategoryName = function (menu) {
var ret = "";
if (menu.IsResource === 2) ret = "按钮";
else if (menu.IsResource === 1) ret = "资源";
@ -136,11 +136,35 @@ $(function () {
var arch = $sideMenu.find('a.active').last();
$breadNav.removeClass('d-none').text(arch.text() || $('title').text());
var resizeFrame = function () {
var $nav = $('.main-content .nav');
var parentWidth = $nav.parent().width();
var width = 0;
$nav.children().each(function (index, ele) {
if ($(ele).hasClass('flex-fill')) return true;
width = width + $(ele).width();
if ($(ele).find('.nav-link').hasClass('active')) {
if (index === 0) width = 0;
return false;
}
});
if (width > parentWidth) {
$nav.css({
"margin-left": parentWidth - width
});
}
else if (width === 0) {
$nav.css({
"margin-left": 0
});
}
};
$.fn.extend({
autoScrollSidebar: function (options) {
var option = $.extend({ target: null, offsetTop: 0 }, options);
var $navItem = option.target;
if ($navItem === null) return this;
if ($navItem === null || $navItem.length === 0) return this;
// sidebar scroll animate
var middle = this.outerHeight() / 2;
@ -171,6 +195,56 @@ $(function () {
this.mCustomScrollbar('destroy');
}
return this;
},
addFrame: function (options) {
var op = $.extend({ element: null, nav: '.main-content .nav' }, options);
var $element = op.element;
var li = $.format('<li class="nav-item"><a class="nav-link active" href="{1}"><span>{0}</span></a><i class="nav-close fa fa-times-circle-o"></i></li>', $element.text(), $element.attr('href'));
var $nav = $(op.nav);
$nav.find('.nav-link').removeClass('active');
$(li).insertBefore($nav.find(':last').parent());
$(this).find('iframe').removeClass('active');
$('<iframe frameborder="0" height="100%" width="100%" src="~/Admin/Index"></iframe>').attr('src', $element.attr('href')).addClass('active').appendTo($(this));
resizeFrame();
},
removeFrame: function (options) {
var op = $.extend({ element: null, nav: '.main-content .nav' }, options);
var $element = op.element;
var frame = $(this).find('iframe').filter(function (index, el) {
return $(el).attr('src') === $element.attr('href');
});
frame.remove();
var $nav = $(op.nav);
var nav = $nav.find('.nav-link').filter(function (index, el) {
return $(el).attr('href') === $element.attr('href');
});
// active other tab
var tab = null;
if (nav.hasClass('active')) {
tab = nav.parent().prev();
if (tab.length === 0) {
tab = nav.parent().next();
}
}
nav.parent().remove();
if (tab && tab.length === 1) {
tab.find('.nav-link').trigger('click');
return;
}
resizeFrame();
},
moveFrame: function (method) {
var $ele = $(this).find('.nav-tabs .nav-link.active');
if ($ele.length === 1) {
var target = $ele.parent()[method]();
if (target.length === 1) {
if (target.hasClass('flex-fill')) return;
target.find('.nav-link').trigger('click');
resizeFrame();
}
}
}
});
@ -195,6 +269,30 @@ $(function () {
$('body').toggleClass('sidebar-open');
});
$('.frame .sidebar').on('click', 'a', function (e) {
e.preventDefault();
$('.main-content').addFrame({ element: $(this) });
});
$('.nav-tabs').on('click', 'a', function (e) {
e.preventDefault();
if ($(this).hasClass('flex-fill')) return;
$('.nav-tabs').find('.nav-link').removeClass('active');
$(this).addClass('active');
var that = this;
$('.main-content iframe').removeClass('active').filter(function (index, ele) {
if ($(ele).attr('src') === $(that).attr('href')) $(ele).addClass('active');
});
}).on('click', '.nav-close', function (e) {
$('.main-content').removeFrame({ element: $(this).prev() });
});
$('.nav-prev, .nav-next').on('click', function (e) {
e.preventDefault();
$('.main-content').moveFrame($(this).attr('data-method'));
});
// Apps
window.App = {
url: 'api/Apps',

6
Bootstrap.Admin/wwwroot/lib/longbow/longbow.common.js
View File

@ -1,4 +1,4 @@
(function ($) {
(function ($) {
// 增加Array扩展
if (!$.isFunction(Array.prototype.filter)) {
Array.prototype.filter = function (callback, thisObject) {
@ -328,13 +328,13 @@
cardView: $(window).width() < 768, //是否显示详细视图
queryButton: '#btn_query',
onLoadSuccess: function (data) {
$.footer();
//$.footer();
if (data.IsSuccess === false) {
toastr.error(data.HttpResult.Message, data.HttpResult.Name);
}
},
onToggle: function () {
$.footer();
//$.footer();
}
}, options);
settings.url = $.formatUrl(settings.url);