增加新增标签的方法Feng.newCrontab()

guns-admin/src/main/webapp/static/js/common/Feng.js

@@ -72,14 +72,14 @@ var Feng = {
             }
         };
 
-        if(leftOffset == undefined && rightOffset == undefined){
+        if (leftOffset == undefined && rightOffset == undefined) {
             var inputDiv = $("#" + inputId);
             var inputDivOffset = $("#" + inputId).offset();
             $("#" + inputTreeContentId).css({
                 left: inputDivOffset.left + "px",
                 top: inputDivOffset.top + inputDiv.outerHeight() + "px"
             }).slideDown("fast");
-        }else{
+        } else {
             $("#" + inputTreeContentId).css({
                 left: leftOffset + "px",
                 top: rightOffset + "px"
@@ -126,7 +126,7 @@ var Feng = {
             }
         });
     },
-    initValidator: function(formId,fields){
+    initValidator: function (formId, fields) {
         $('#' + formId).bootstrapValidator({
             feedbackIcons: {
                 valid: 'glyphicon glyphicon-ok',
@@ -145,5 +145,52 @@ var Feng = {
         }
         var result = strArr.join('');
         return result.charAt(0).toUpperCase() + result.substring(1);
+    },
+    randomNum: function (minNum, maxNum) {
+        switch (arguments.length) {
+            case 1:
+                return parseInt(Math.random() * minNum + 1, 10);
+                break;
+            case 2:
+                return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+                break;
+            default:
+                return 0;
+                break;
+        }
+    },
+    newCrontab: function (href, menuName) {
+        var dataUrl = href;
+        var needCreateCrontab = true;
+
+        // 轮询已有的标签，判断是否已经存在标签
+        parent.$('.J_menuTab').each(function () {
+            if ($(this).data('id') == dataUrl) {
+                if (!$(this).hasClass('active')) {
+                    $(this).addClass('active').siblings('.J_menuTab').removeClass('active');
+                    parent.MyCrontab.scrollToTab(this);
+                    parent.MyCrontab.$('.J_mainContent .J_iframe').each(function () {
+                        if ($(this).data('id') == dataUrl) {
+                            $(this).show().siblings('.J_iframe').hide();
+                            $(this).attr('src', $(this).attr('src'));
+                            return false;
+                        }
+                    });
+                }
+                needCreateCrontab = false;
+                return false;
+            }
+        });
+
+        //创建标签
+        if (needCreateCrontab) {
+            var tabLink = '<a href="javascript:;" class="active J_menuTab" data-id="' + dataUrl + '">' + menuName + ' <i class="fa fa-times-circle"></i></a>';
+            parent.$('.J_menuTab').removeClass('active');
+            parent.$('.J_menuTabs .page-tabs-content').append(tabLink);
+
+            var iframeContent = '<iframe class="J_iframe" name="iframe' + Feng.randomNum(100,999) + '" width="100%" height="100%" src="' + dataUrl + '" frameborder="0" data-id="' + dataUrl + '" seamless></iframe>';
+            parent.$('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(iframeContent);
+            parent.MyCrontab.scrollToTab($('.J_menuTab.active'));
+        }
     }
 };

guns-admin/src/main/webapp/static/js/contabs.js

+var MyCrontab = {};
 
-$(function () {
-    //计算元素集合的总宽度
-    function calSumWidth(elements) {
-        var width = 0;
-        $(elements).each(function () {
-            width += $(this).outerWidth(true);
-        });
-        return width;
-    }
-    //滚动到指定选项卡
-    function scrollToTab(element) {
-        var marginLeftVal = calSumWidth($(element).prevAll()), marginRightVal = calSumWidth($(element).nextAll());
+
+/**
+ * 滚动到指定选项卡
+ */
+MyCrontab.scrollToTab = function (element) {
+    var marginLeftVal = MyCrontab.calSumWidth($(element).prevAll()),
+        marginRightVal = MyCrontab.calSumWidth($(element).nextAll());
     // 可视区域非tab宽度
-        var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
+    var tabOuterWidth = MyCrontab.calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
     //可视区域tab宽度
     var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
     //实际滚动宽度
@@ -34,7 +30,33 @@ $(function () {
     $('.page-tabs-content').animate({
         marginLeft: 0 - scrollVal + 'px'
     }, "fast");
+};
+
+
+/**
+ * 计算元素集合的总宽度
+ */
+MyCrontab.calSumWidth = function (elements) {
+    var width = 0;
+    $(elements).each(function () {
+        width += $(this).outerWidth(true);
+    });
+    return width;
+};
+
+
+$(function () {
+
+    //计算元素集合的总宽度
+    function calSumWidth(elements) {
+        MyCrontab.calSumWidth(elements);
     }
+
+    //滚动到指定选项卡
+    function scrollToTab(element) {
+        MyCrontab.scrollToTab(element);
+    }
+
     //查看左侧隐藏的选项卡
     function scrollTabLeft() {
         var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
@@ -66,6 +88,7 @@ $(function () {
             marginLeft: 0 - scrollVal + 'px'
         }, "fast");
     }
+
     //查看右侧隐藏的选项卡
     function scrollTabRight() {
         var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
@@ -111,7 +134,7 @@ $(function () {
             dataIndex = $(this).data('index'),
             menuName = $.trim($(this).text()),
             flag = true;
-        if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false;
+        if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
 
         // 选项卡菜单已存在
         $('.J_menuTab').each(function () {
@@ -243,19 +266,21 @@ $(function () {
     $('.J_menuTabs').on('click', '.J_menuTab i', closeTab);
 
     //关闭其他选项卡
-    function closeOtherTabs(){
+    function closeOtherTabs() {
         $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function () {
             $('.J_iframe[data-id="' + $(this).data('id') + '"]').remove();
             $(this).remove();
         });
         $('.page-tabs-content').css("margin-left", "0");
     }
+
     $('.J_tabCloseOther').on('click', closeOtherTabs);
 
     //滚动到已激活的选项卡
-    function showActiveTab(){
+    function showActiveTab() {
         scrollToTab($('.J_menuTab.active'));
     }
+
     $('.J_tabShowActive').on('click', showActiveTab);