作者 Karson

优化移动端下Tabs滚动

优化移动端下系统配置页面展示
@@ -20,6 +20,15 @@ @@ -20,6 +20,15 @@
20 .edit-form table > tbody > tr:hover td a.btn-delcfg { 20 .edit-form table > tbody > tr:hover td a.btn-delcfg {
21 visibility: visible; 21 visibility: visible;
22 } 22 }
  23 +
  24 + @media (max-width: 767px) {
  25 + .edit-form table tr th:nth-last-child(-n + 2), .edit-form table tr td:nth-last-child(-n + 2) {
  26 + display: none;
  27 + }
  28 + .edit-form table tr td .msg-box {
  29 + display: none;
  30 + }
  31 + }
23 </style> 32 </style>
24 <div class="panel panel-default panel-intro"> 33 <div class="panel panel-default panel-intro">
25 <div class="panel-heading"> 34 <div class="panel-heading">
@@ -36,6 +45,7 @@ @@ -36,6 +45,7 @@
36 45
37 <div class="panel-body"> 46 <div class="panel-body">
38 <div id="myTabContent" class="tab-content"> 47 <div id="myTabContent" class="tab-content">
  48 + <!--@formatter:off-->
39 {foreach $siteList as $index=>$vo} 49 {foreach $siteList as $index=>$vo}
40 <div class="tab-pane fade {$vo.active ? 'active in' : ''}" id="{$vo.name}"> 50 <div class="tab-pane fade {$vo.active ? 'active in' : ''}" id="{$vo.name}">
41 <div class="widget-body no-padding"> 51 <div class="widget-body no-padding">
@@ -316,6 +326,7 @@ value2|title2</textarea> @@ -316,6 +326,7 @@ value2|title2</textarea>
316 </form> 326 </form>
317 327
318 </div> 328 </div>
  329 + <!--@formatter:on-->
319 </div> 330 </div>
320 </div> 331 </div>
321 </div> 332 </div>
@@ -275,7 +275,7 @@ return [ @@ -275,7 +275,7 @@ return [
275 'multiplenav' => false, 275 'multiplenav' => false,
276 //是否开启多选项卡(仅在开启多级菜单时起作用) 276 //是否开启多选项卡(仅在开启多级菜单时起作用)
277 'multipletab' => true, 277 'multipletab' => true,
278 - //后台皮肤,为空时表示使用skin-green 278 + //后台皮肤,为空时表示使用skin-black-green
279 'adminskin' => '', 279 'adminskin' => '',
280 //后台是否启用面包屑 280 //后台是否启用面包屑
281 'breadcrumb' => false, 281 'breadcrumb' => false,
@@ -271,6 +271,18 @@ form.form-horizontal .control-label { @@ -271,6 +271,18 @@ form.form-horizontal .control-label {
271 border-bottom-color: transparent; 271 border-bottom-color: transparent;
272 cursor: default; 272 cursor: default;
273 } 273 }
  274 +@media (max-width: 768px) {
  275 + .panel-intro > .panel-heading .nav-tabs {
  276 + white-space: nowrap;
  277 + overflow-x: auto;
  278 + overflow-y: hidden;
  279 + margin-bottom: -1px;
  280 + }
  281 + .panel-intro > .panel-heading .nav-tabs > li {
  282 + display: inline-block;
  283 + float: none;
  284 + }
  285 +}
274 /*单表格*/ 286 /*单表格*/
275 .panel-tabs .panel-heading { 287 .panel-tabs .panel-heading {
276 padding: 12px 15px 12px 15px; 288 padding: 12px 15px 12px 15px;
@@ -480,19 +492,16 @@ form.form-horizontal .control-label { @@ -480,19 +492,16 @@ form.form-horizontal .control-label {
480 color: #222e32; 492 color: #222e32;
481 } 493 }
482 .multiplenav .content-wrapper, 494 .multiplenav .content-wrapper,
483 -.multiplenav .right-side { 495 +.multiplenav .right-side,
  496 +.multiplenav .main-sidebar {
484 padding-top: 50px; 497 padding-top: 50px;
485 } 498 }
486 .multiplenav #firstnav .nav-addtabs { 499 .multiplenav #firstnav .nav-addtabs {
487 padding-right: 450px; 500 padding-right: 450px;
488 } 501 }
489 @media (max-width: 767px) { 502 @media (max-width: 767px) {
490 - .multipletab .fixed .content-wrapper,  
491 - .multipletab .fixed .right-side {  
492 - padding-top: 94px;  
493 - }  
494 - .multipletab .content-wrapper,  
495 - .multipletab .right-side { 503 + .multipletab.multiplenav .content-wrapper,
  504 + .multipletab.multiplenav .right-side {
496 padding-top: 94px; 505 padding-top: 94px;
497 } 506 }
498 } 507 }
@@ -1022,7 +1031,7 @@ table.table-nowrap thead > tr > th { @@ -1022,7 +1031,7 @@ table.table-nowrap thead > tr > th {
1022 .left-side { 1031 .left-side {
1023 padding-top: 50px; 1032 padding-top: 50px;
1024 } 1033 }
1025 - .multiplenav .main-sidebar { 1034 + .multipletab.multiplenav .main-sidebar {
1026 padding-top: 95px; 1035 padding-top: 95px;
1027 } 1036 }
1028 .n-bootstrap .n-right { 1037 .n-bootstrap .n-right {
@@ -55,10 +55,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'adminlte', 'form'], functi @@ -55,10 +55,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'adminlte', 'form'], functi
55 //切换左侧sidebar显示隐藏 55 //切换左侧sidebar显示隐藏
56 $(document).on("click fa.event.toggleitem", ".sidebar-menu li > a", function (e) { 56 $(document).on("click fa.event.toggleitem", ".sidebar-menu li > a", function (e) {
57 var nextul = $(this).next("ul"); 57 var nextul = $(this).next("ul");
58 - if (nextul.length > 0) {  
59 - return;  
60 - }  
61 - if (!$(this).parent("li").hasClass("treeview") || ($("body").hasClass("multiplenav") && $(this).parent().parent().hasClass("sidebar-menu"))) { 58 + if (nextul.length == 0 && (!$(this).parent("li").hasClass("treeview") || ($("body").hasClass("multiplenav") && $(this).parent().parent().hasClass("sidebar-menu")))) {
62 $(".sidebar-menu li").removeClass("active"); 59 $(".sidebar-menu li").removeClass("active");
63 } 60 }
64 //当外部触发隐藏的a时,触发父辈a的事件 61 //当外部触发隐藏的a时,触发父辈a的事件
@@ -338,6 +338,20 @@ form.form-horizontal .control-label { @@ -338,6 +338,20 @@ form.form-horizontal .control-label {
338 border-bottom-color: transparent; 338 border-bottom-color: transparent;
339 cursor: default; 339 cursor: default;
340 } 340 }
  341 +
  342 + @media (max-width: @screen-tablet) {
  343 + .nav-tabs {
  344 + white-space: nowrap;
  345 + overflow-x: auto;
  346 + overflow-y: hidden;
  347 + margin-bottom: -1px;
  348 +
  349 + > li {
  350 + display: inline-block;
  351 + float: none;
  352 + }
  353 + }
  354 + }
341 } 355 }
342 } 356 }
343 357
@@ -595,7 +609,7 @@ form.form-horizontal .control-label { @@ -595,7 +609,7 @@ form.form-horizontal .control-label {
595 } 609 }
596 610
597 .multiplenav { 611 .multiplenav {
598 - .content-wrapper, .right-side { 612 + .content-wrapper, .right-side, .main-sidebar {
599 padding-top: 50px; 613 padding-top: 50px;
600 } 614 }
601 615
@@ -606,14 +620,12 @@ form.form-horizontal .control-label { @@ -606,14 +620,12 @@ form.form-horizontal .control-label {
606 620
607 @media (max-width: 767px) { 621 @media (max-width: 767px) {
608 .multipletab { 622 .multipletab {
609 - .fixed .content-wrapper, .fixed .right-side {  
610 - padding-top: 94px;  
611 - }  
612 - 623 + &.multiplenav {
613 .content-wrapper, .right-side { 624 .content-wrapper, .right-side {
614 padding-top: 94px; 625 padding-top: 94px;
615 } 626 }
616 } 627 }
  628 + }
617 } 629 }
618 630
619 .multipletab { 631 .multipletab {
@@ -1266,7 +1278,7 @@ table.table-nowrap { @@ -1266,7 +1278,7 @@ table.table-nowrap {
1266 padding-top: 50px; 1278 padding-top: 50px;
1267 } 1279 }
1268 1280
1269 - .multiplenav { 1281 + .multipletab.multiplenav {
1270 .main-sidebar { 1282 .main-sidebar {
1271 padding-top: 95px; 1283 padding-top: 95px;
1272 } 1284 }