tab关闭按钮调整，点击左侧菜单选中

js/bootstrap-multitabs/multitabs.js

@@ -340,6 +340,7 @@ if (typeof jQuery === "undefined") {
             self._fixTabContentLayout($tabPane);
             //fill tab pane
             self._fillTabPane($tabPane, navTabParam);
+            
             return self;
         },
         /**
@@ -467,9 +468,11 @@ if (typeof jQuery === "undefined") {
                 //if ($nextLi.size()) {
                 if ($nextLi.length) {
                     self.active($nextLi);
+                    self.activeMenu($nextLi.find('a'));
                 //} else if ($prevLi.size()) {
                 } else if ($prevLi.length) {
                     self.active($prevLi);
+                    self.activeMenu($prevLi.find('a'));
                 }
             }
             self._delStorage($navTab.attr('data-id')); //remove tab from session storage
@@ -501,7 +504,10 @@ if (typeof jQuery === "undefined") {
                 self._getTabPane($navTab).remove(); //remove tab-content
                 $navTab.parent('li').remove(); //remove navtab
             });
-            retainTab && self.active($el.navPanelList.find('a[data-index="' + retainTab + '"]'));
+            if (retainTab) {
+                self.active($el.navPanelList.find('a[data-index="' + retainTab + '"]'));
+                self.activeMenu($el.navPanelList.find('a[data-index="' + retainTab + '"]'));
+            }
             $el.navPanelList.css("margin-left", "0");
             return self;
         },
@@ -532,8 +538,71 @@ if (typeof jQuery === "undefined") {
                 $navTab.parent('li').remove(); //remove navtab
             });
             self.active($el.navPanelList.find('a[data-type="main"]:first').parent('li'));
+            self.activeMenu($el.navPanelList.find('a[data-type="main"]:first'));
             return self;
         },
+        
+        /**
+         * 左侧导航变化
+         */
+        activeMenu: function(navTab) {
+            // 点击选项卡时，左侧菜单栏跟随变化
+            var $navObj       = $("a[href$='" + $(navTab).data('url') + "']"),   // 当前url对应的左侧导航对象
+                $navHasSubnav = $navObj.parents('.nav-item'),
+                $viSubHeight  = $navHasSubnav.siblings().find('.nav-subnav:visible').outerHeight();
+            
+            $('.nav-item').each(function(i){
+                if ($(this).hasClass('active') && !$navObj.parents('.nav-item').last().hasClass('active')) {
+                    $(this).removeClass('active').removeClass('open');
+                    $(this).find('.nav-subnav:visible').slideUp(500);
+                    if (window.innerWidth > 1024 && $('body').hasClass('lyear-layout-sidebar-close')) {
+                        $(this).find('.nav-subnav').hide();
+                    }
+                }
+            });
+            
+            $('.nav-drawer').find('li').removeClass('active');
+            $navObj.parent('li').addClass('active');
+            $navHasSubnav.first().addClass('active');
+            
+            // 当前菜单无子菜单
+            if (!$navObj.parents('.nav-item').first().is('.nav-item-has-subnav')) {
+                var hht = 48 * ( $navObj.parents('.nav-item').first().prevAll().length - 1 );
+                $('.lyear-layout-sidebar-scroll').animate({scrollTop: hht}, 300);
+            }
+            
+            if ($navObj.parents('ul.nav-subnav').last().is(':hidden')) {
+                $navObj.parents('ul.nav-subnav').last().slideDown(500, function(){
+                    $navHasSubnav.last().addClass('open');
+		            var scrollHeight  = 0,
+                        $scrollBox    = $('.lyear-layout-sidebar-scroll'),
+		                pervTotal     = $navHasSubnav.last().prevAll().length,
+		                boxHeight     = $scrollBox.outerHeight(),
+	                    innerHeight   = $('.sidebar-main').outerHeight(),
+                        thisScroll    = $scrollBox.scrollTop(),
+                        thisSubHeight = $(this).outerHeight(),
+                        footHeight    = 121;
+		            
+		            if (footHeight + innerHeight - boxHeight >= (pervTotal * 48)) {
+		                scrollHeight = pervTotal * 48;
+		            }
+                    if ($navHasSubnav.length == 1) {
+                        $scrollBox.animate({scrollTop: scrollHeight}, 300);
+                    } else {
+                        // 子菜单操作
+                        if (typeof($viSubHeight) != 'undefined' && $viSubHeight != null) {
+                            scrollHeight = thisScroll + thisSubHeight - $viSubHeight;
+                            $scrollBox.animate({scrollTop: scrollHeight}, 300);
+                        } else {
+                            if ((thisScroll + boxHeight - $scrollBox[0].scrollHeight) == 0) {
+                                scrollHeight = thisScroll - thisSubHeight;
+                                $scrollBox.animate({scrollTop: scrollHeight}, 300);
+                            }
+                        }
+                    }
+                });
+            }
+        },
 
         /**
          * init function
@@ -627,6 +696,7 @@ if (typeof jQuery === "undefined") {
             //active tab
             handler($el.nav, 'click', '.mt-nav-tab', function () {
                 self.active(this);
+                self.activeMenu(this);
             });
 
             //drag tab
@@ -684,16 +754,31 @@ if (typeof jQuery === "undefined") {
             // 右键菜单
             handler($el.nav, 'contextmenu', '.mt-nav-tab', function (event) {
                 event.preventDefault();
-                var menu    = $('<ul class="dropdown-menu" role="menu" id="contextify-menu"/>'),
-                    $this   = $(this),
-                    $nav    = $this.closest('li'),
-                    $navTab = self._getNavTab($nav);
+                var menu     = $('<ul class="dropdown-menu" role="menu" id="contextify-menu"/>'),
+                    $this    = $(this),
+                    $nav     = $this.closest('li'),
+                    $navTab  = self._getNavTab($nav),
+                    $tabPane = self._getTabPane($navTab),
+                    param    = $navTab.length ? self._getParam($navTab) : {};
                 
                 var menuData = [
                   {text: '刷新', onclick: function(){
-                      var $tabPane = self._getTabPane($navTab);
+                      var tempTabPane = $($tabPane);
                       
-                      $tabPane.attr('src', $tabPane.attr('src'));
+                      if (tempTabPane.is('iframe')) {
+                          tempTabPane.attr('src', param.url);
+                      } else {
+                          $.ajax({
+                              url: param.url,
+                              dataType: "html",
+                              success: function (callback) {
+                                  tempTabPane.html(self.options.content.ajax.success(callback));
+                              },
+                              error: function (callback) {
+                                  tempTabPane.html(self.options.content.ajax.error(callback));
+                              }
+                          });
+                      }
                       menu.hide();
                       
                       return false;
@@ -1111,7 +1196,7 @@ if (typeof jQuery === "undefined") {
             layout: 'default', //it can be 'default', 'classic' (all hidden tab in dropdown list), and simple
             maxTabs: 15, //Max tabs number (without counting main tab), when is 1, hide the whole nav
             maxTitleLength: 25, //Max title length of tab
-            showCloseOnHover: true, //while is true, show close button in hover, if false, show close button always
+            showCloseOnHover: false, //while is true, show close button in hover, if false, show close button always
             style: 'nav-tabs' //can be nav-tabs or nav-pills
         },
         content: {

js/bootstrap-multitabs/multitabs.min.css

@@ -26,11 +26,29 @@
 .mt-close-tab {
     position: absolute;
     font-size: 10px;
-    top: 2px;
-    right: 0px;
-    color: #94A6B0;
+    width: 16px;
+    height: 16px;
+    top: 16px;
+    right: 10px;
+    color: #c2c2c2;
     cursor: pointer;
     display: none;
+    line-height: 16px;
+    text-align: center;
+    vertical-align: 2px;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    -webkit-transition: all .3s cubic-bezier(.645,.045,.355,1);
+    transition: all .3s cubic-bezier(.645,.045,.355,1);
+    -webkit-transform-origin: 100% 50%;
+    transform-origin: 100% 50%;
+}
+.mt-close-tab:before {
+    -webkit-transform: scale(.8);
+    transform: scale(.8);
+    display: inline-block;
+    /*vertical-align: -1px;*/
 }
 li:hover .mt-close-tab {
     display: inline;
@@ -41,6 +59,7 @@ li:hover .mt-close-tab {
 .mt-nav-bar a {
     cursor: pointer !important;
     line-height: 1.95!important;
+    max-height: 48px;
 }
 @media (max-width: 767px){
     .mt-tab-content{
@@ -77,4 +96,15 @@ li:hover .mt-close-tab {
 }
 #contextify-menu {
     min-width: 80px!important;
+}
+.mt-close-tab:hover {
+    background-color: #f96868;
+    color: #fff;
+}
+.mt-nav .nav-tabs a:not([data-type="main"]) {
+    padding-right: 40px;
+}
+.mt-nav-tools-left li a,
+.mt-nav-tools-right li a {
+    padding-right: 15px!important;
 }