优化menuTabs

src/main/resources/static/css/style.css

@@ -3323,7 +3323,7 @@ nav.page-tabs .page-tabs-content {
     cursor: pointer;
 }
 
-.roll-right.J_tabRight {
+.roll-right.tabRight {
     right: 140px;
 }
 
@@ -7231,7 +7231,7 @@ body.skin-3 {
     background-color: #fff;
 }
 
-.J_menuTab {
+.menuTab {
     -webkit-transition: all .3s ease-out 0s;
     transition: all .3s ease-out 0s;
 }

src/main/resources/static/ruoyi/js/index.js

@@ -88,7 +88,7 @@ $(function() {
         var marginLeftVal = calSumWidth($(element).prevAll()),
         marginRightVal = calSumWidth($(element).nextAll());
         // 可视区域非tab宽度
-        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
+        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
         //可视区域tab宽度
         var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
         //实际滚动宽度
@@ -117,7 +117,7 @@ $(function() {
     function scrollTabLeft() {
         var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
         // 可视区域非tab宽度
-        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
+        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
         //可视区域tab宽度
         var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
         //实际滚动宽度
@@ -125,7 +125,7 @@ $(function() {
         if ($(".page-tabs-content").width() < visibleWidth) {
             return false;
         } else {
-            var tabElement = $(".J_menuTab:first");
+            var tabElement = $(".menuTab:first");
             var offsetVal = 0;
             while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
                 offsetVal += $(tabElement).outerWidth(true);
@@ -150,7 +150,7 @@ $(function() {
     function scrollTabRight() {
         var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
         // 可视区域非tab宽度
-        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
+        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
         //可视区域tab宽度
         var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
         //实际滚动宽度
@@ -158,7 +158,7 @@ $(function() {
         if ($(".page-tabs-content").width() < visibleWidth) {
             return false;
         } else {
-            var tabElement = $(".J_menuTab:first");
+            var tabElement = $(".menuTab:first");
             var offsetVal = 0;
             while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
                 offsetVal += $(tabElement).outerWidth(true);
@@ -180,7 +180,7 @@ $(function() {
     }
 
     //通过遍历给菜单项加上data-index属性
-    $(".J_menuItem").each(function(index) {
+    $(".menuItem").each(function(index) {
         if (!$(this).attr('data-index')) {
             $(this).attr('data-index', index);
         }
@@ -195,15 +195,15 @@ $(function() {
         if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
 
         // 选项卡菜单已存在
-        $('.J_menuTab').each(function() {
+        $('.menuTab').each(function() {
             if ($(this).data('id') == dataUrl) {
                 if (!$(this).hasClass('active')) {
-                    $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
+                    $(this).addClass('active').siblings('.menuTab').removeClass('active');
                     scrollToTab(this);
                     // 显示tab对应的内容区
-                    $('.J_mainContent .J_iframe').each(function() {
+                    $('.mainContent .RuoYi_iframe').each(function() {
                         if ($(this).data('id') == dataUrl) {
-                            $(this).show().siblings('.J_iframe').hide();
+                            $(this).show().siblings('.RuoYi_iframe').hide();
                             return false;
                         }
                     });
@@ -215,39 +215,39 @@ $(function() {
 
         // 选项卡菜单不存在
         if (flag) {
-            var str = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
+            var str = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
-            $('.J_menuTab').removeClass('active');
+            $('.menuTab').removeClass('active');
 
             // 添加选项卡对应的iframe
-            var str1 = '<iframe class="J_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
+            var str1 = '<iframe class="RuoYi_iframe" name="iframe' + dataIndex + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
-            $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
+            $('.mainContent').find('iframe.RuoYi_iframe').hide().parents('.mainContent').append(str1);
 
             // 添加选项卡
-            $('.J_menuTabs .page-tabs-content').append(str);
+            $('.menuTabs .page-tabs-content').append(str);
-            scrollToTab($('.J_menuTab.active'));
+            scrollToTab($('.menuTab.active'));
         }
         return false;
     }
 
-    $('.J_menuItem').on('click', menuItem);
+    $('.menuItem').on('click', menuItem);
 
     // 关闭选项卡菜单
     function closeTab() {
-        var closeTabId = $(this).parents('.J_menuTab').data('id');
+        var closeTabId = $(this).parents('.menuTab').data('id');
-        var currentWidth = $(this).parents('.J_menuTab').width();
+        var currentWidth = $(this).parents('.menuTab').width();
 
         // 当前元素处于活动状态
-        if ($(this).parents('.J_menuTab').hasClass('active')) {
+        if ($(this).parents('.menuTab').hasClass('active')) {
 
             // 当前元素后面有同辈元素，使后面的一个元素处于活动状态
-            if ($(this).parents('.J_menuTab').next('.J_menuTab').size()) {
+            if ($(this).parents('.menuTab').next('.menuTab').size()) {
 
-                var activeId = $(this).parents('.J_menuTab').next('.J_menuTab:eq(0)').data('id');
+                var activeId = $(this).parents('.menuTab').next('.menuTab:eq(0)').data('id');
-                $(this).parents('.J_menuTab').next('.J_menuTab:eq(0)').addClass('active');
+                $(this).parents('.menuTab').next('.menuTab:eq(0)').addClass('active');
 
-                $('.J_mainContent .J_iframe').each(function() {
+                $('.mainContent .RuoYi_iframe').each(function() {
                     if ($(this).data('id') == activeId) {
-                        $(this).show().siblings('.J_iframe').hide();
+                        $(this).show().siblings('.RuoYi_iframe').hide();
                         return false;
                     }
                 });
@@ -261,10 +261,10 @@ $(function() {
                 }
 
                 //  移除当前选项卡
-                $(this).parents('.J_menuTab').remove();
+                $(this).parents('.menuTab').remove();
 
                 // 移除tab对应的内容区
-                $('.J_mainContent .J_iframe').each(function() {
+                $('.mainContent .RuoYi_iframe').each(function() {
                     if ($(this).data('id') == closeTabId) {
                         $(this).remove();
                         return false;
@@ -273,21 +273,21 @@ $(function() {
             }
 
             // 当前元素后面没有同辈元素，使当前元素的上一个元素处于活动状态
-            if ($(this).parents('.J_menuTab').prev('.J_menuTab').size()) {
+            if ($(this).parents('.menuTab').prev('.menuTab').size()) {
-                var activeId = $(this).parents('.J_menuTab').prev('.J_menuTab:last').data('id');
+                var activeId = $(this).parents('.menuTab').prev('.menuTab:last').data('id');
-                $(this).parents('.J_menuTab').prev('.J_menuTab:last').addClass('active');
+                $(this).parents('.menuTab').prev('.menuTab:last').addClass('active');
-                $('.J_mainContent .J_iframe').each(function() {
+                $('.mainContent .RuoYi_iframe').each(function() {
                     if ($(this).data('id') == activeId) {
-                        $(this).show().siblings('.J_iframe').hide();
+                        $(this).show().siblings('.RuoYi_iframe').hide();
                         return false;
                     }
                 });
 
                 //  移除当前选项卡
-                $(this).parents('.J_menuTab').remove();
+                $(this).parents('.menuTab').remove();
 
                 // 移除tab对应的内容区
-                $('.J_mainContent .J_iframe').each(function() {
+                $('.mainContent .RuoYi_iframe').each(function() {
                     if ($(this).data('id') == closeTabId) {
                         $(this).remove();
                         return false;
@@ -298,79 +298,84 @@ $(function() {
         // 当前元素不处于活动状态
         else {
             //  移除当前选项卡
-            $(this).parents('.J_menuTab').remove();
+            $(this).parents('.menuTab').remove();
 
             // 移除相应tab对应的内容区
-            $('.J_mainContent .J_iframe').each(function() {
+            $('.mainContent .RuoYi_iframe').each(function() {
                 if ($(this).data('id') == closeTabId) {
                     $(this).remove();
                     return false;
                 }
             });
-            scrollToTab($('.J_menuTab.active'));
+            scrollToTab($('.menuTab.active'));
         }
         return false;
     }
 
-    $('.J_menuTabs').on('click', '.J_menuTab i', closeTab);
+    $('.menuTabs').on('click', '.menuTab i', closeTab);
 
     //关闭其他选项卡
     function closeOtherTabs() {
         $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function() {
-            $('.J_iframe[data-id="' + $(this).data('id') + '"]').remove();
+            $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
             $(this).remove();
         });
         $('.page-tabs-content').css("margin-left", "0");
     }
-    $('.J_tabCloseOther').on('click', closeOtherTabs);
+    $('.tabCloseOther').on('click', closeOtherTabs);
 
     //滚动到已激活的选项卡
     function showActiveTab() {
-        scrollToTab($('.J_menuTab.active'));
+        scrollToTab($('.menuTab.active'));
     }
-    $('.J_tabShowActive').on('click', showActiveTab);
+    $('.tabShowActive').on('click', showActiveTab);
 
     // 点击选项卡菜单
     function activeTab() {
         if (!$(this).hasClass('active')) {
             var currentId = $(this).data('id');
             // 显示tab对应的内容区
-            $('.J_mainContent .J_iframe').each(function() {
+            $('.mainContent .RuoYi_iframe').each(function() {
                 if ($(this).data('id') == currentId) {
-                    $(this).show().siblings('.J_iframe').hide();
+                    $(this).show().siblings('.RuoYi_iframe').hide();
                     return false;
                 }
             });
-            $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
+            $(this).addClass('active').siblings('.menuTab').removeClass('active');
             scrollToTab(this);
         }
     }
 
-    $('.J_menuTabs').on('click', '.J_menuTab', activeTab);
+    $('.menuTabs').on('click', '.menuTab', activeTab);
 
     //刷新iframe
     function refreshTab() {
-        var target = $('.J_iframe[data-id="' + $(this).data('id') + '"]');
+    	var currentId = $('.page-tabs-content').find('.active').attr('data-id');
+    	var target = $('.RuoYi_iframe[data-id="' + currentId + '"]');
         var url = target.attr('src');
+        target.attr('src', url).ready();
     }
+    
+    // 刷新按钮
+    $('.tabReload').on('click', refreshTab);
 
-    $('.J_menuTabs').on('dblclick', '.J_menuTab', refreshTab);
+    $('.menuTabs').on('dblclick', '.menuTab', refreshTab);
 
     // 左移按扭
-    $('.J_tabLeft').on('click', scrollTabLeft);
+    $('.tabLeft').on('click', scrollTabLeft);
 
     // 右移按扭
-    $('.J_tabRight').on('click', scrollTabRight);
+    $('.tabRight').on('click', scrollTabRight);
 
     // 关闭全部
-    $('.J_tabCloseAll').on('click',
+    $('.tabCloseAll').on('click',
     function() {
         $('.page-tabs-content').children("[data-id]").not(":first").each(function() {
-            $('.J_iframe[data-id="' + $(this).data('id') + '"]').remove();
+            $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').remove();
             $(this).remove();
         });
         $('.page-tabs-content').children("[data-id]:first").each(function() {
-            $('.J_iframe[data-id="' + $(this).data('id') + '"]').show();
+            $('.RuoYi_iframe[data-id="' + $(this).data('id') + '"]').show();
             $(this).addClass("active");
         });
         $('.page-tabs-content').css("margin-left", "0");

src/main/resources/templates/index.html

@@ -42,7 +42,7 @@
                  <li class="active">
                     <a href="index.html"><i class="fa fa-home"></i> <span class="nav-label">主页</span> <span class="fa arrow"></span></a>
                     <ul class="nav nav-second-level">
-                        <li class="active"><a class="J_menuItem" th:href="@{/system/main}">了解若依</a></li>
+                        <li class="active"><a class="menuItem" th:href="@{/system/main}">了解若依</a></li>
                     </ul>
                 </li>
                 <li th:each="menu : ${menus}">
@@ -53,7 +53,7 @@
                 	</a>
                    <ul class="nav nav-second-level collapse">
                         <li th:each="cmenu : ${menu.children}">
-                        	<a class="J_menuItem" th:text="${cmenu.menuName}" th:href="${cmenu.url}">二级菜单</a>
+                        	<a class="menuItem" th:text="${cmenu.menuName}" th:href="${cmenu.url}">二级菜单</a>
                         </li>
                     </ul>
                 </li>
@@ -87,32 +87,31 @@
             </nav>
         </div>
         <div class="row content-tabs">
-            <button class="roll-nav roll-left J_tabLeft">
+            <button class="roll-nav roll-left tabLeft">
                 <i class="fa fa-backward"></i>
             </button>
-            <nav class="page-tabs J_menuTabs">
+            <nav class="page-tabs menuTabs">
                 <div class="page-tabs-content">
-                    <a href="javascript:;" class="active J_menuTab">首页</a>
+                    <a href="javascript:;" class="active menuTab">首页</a>
                 </div>
             </nav>
-            <button class="roll-nav roll-right J_tabRight">
+            <button class="roll-nav roll-right tabRight">
                 <i class="fa fa-forward"></i>
             </button>
             <div class="btn-group roll-nav roll-right">
                 <button class="dropdown J_tabClose" data-toggle="dropdown">
-                    	关闭操作<span class="caret"></span>
+                    	页签操作<span class="caret"></span>
                 </button>
                 <ul role="menu" class="dropdown-menu dropdown-menu-right">
-                    <li class="J_tabShowActive"><a>定位当前选项卡</a></li>
+                    <li class="tabReload"><a>刷新</a></li>
-                    <li class="divider"></li>
+                    <li class="tabCloseAll"><a>全部关闭</a></li>
-                    <li class="J_tabCloseAll"><a>关闭全部选项卡</a></li>
+                    <li class="tabCloseOther"><a>关闭其他</a></li>
-                    <li class="J_tabCloseOther"><a>关闭其他选项卡</a></li>
                 </ul>
             </div>
             <a href="/logout" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
         </div>
-        <div class="row J_mainContent" id="content-main">
+        <div class="row mainContent" id="content-main">
-            <iframe class="J_iframe" name="iframe0" width="100%" height="100%"
+            <iframe class="RuoYi_iframe" name="iframe0" width="100%" height="100%"
                     th:src="@{/system/main}" frameborder="0" seamless></iframe>
         </div>
         <div class="footer">