Commit edbc0533 by stylefeng

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

parent 51ce5183
...@@ -72,14 +72,14 @@ var Feng = { ...@@ -72,14 +72,14 @@ var Feng = {
} }
}; };
if(leftOffset == undefined && rightOffset == undefined){ if (leftOffset == undefined && rightOffset == undefined) {
var inputDiv = $("#" + inputId); var inputDiv = $("#" + inputId);
var inputDivOffset = $("#" + inputId).offset(); var inputDivOffset = $("#" + inputId).offset();
$("#" + inputTreeContentId).css({ $("#" + inputTreeContentId).css({
left: inputDivOffset.left + "px", left: inputDivOffset.left + "px",
top: inputDivOffset.top + inputDiv.outerHeight() + "px" top: inputDivOffset.top + inputDiv.outerHeight() + "px"
}).slideDown("fast"); }).slideDown("fast");
}else{ } else {
$("#" + inputTreeContentId).css({ $("#" + inputTreeContentId).css({
left: leftOffset + "px", left: leftOffset + "px",
top: rightOffset + "px" top: rightOffset + "px"
...@@ -126,7 +126,7 @@ var Feng = { ...@@ -126,7 +126,7 @@ var Feng = {
} }
}); });
}, },
initValidator: function(formId,fields){ initValidator: function (formId, fields) {
$('#' + formId).bootstrapValidator({ $('#' + formId).bootstrapValidator({
feedbackIcons: { feedbackIcons: {
valid: 'glyphicon glyphicon-ok', valid: 'glyphicon glyphicon-ok',
...@@ -145,5 +145,52 @@ var Feng = { ...@@ -145,5 +145,52 @@ var Feng = {
} }
var result = strArr.join(''); var result = strArr.join('');
return result.charAt(0).toUpperCase() + result.substring(1); 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'));
}
} }
}; };
var MyCrontab = {};
/**
* 滚动到指定选项卡
*/
MyCrontab.scrollToTab = function (element) {
var marginLeftVal = MyCrontab.calSumWidth($(element).prevAll()),
marginRightVal = MyCrontab.calSumWidth($(element).nextAll());
// 可视区域非tab宽度
var tabOuterWidth = MyCrontab.calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
//可视区域tab宽度
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
//实际滚动宽度
var scrollVal = 0;
if ($(".page-tabs-content").outerWidth() < visibleWidth) {
scrollVal = 0;
} else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
scrollVal = marginLeftVal;
var tabElement = element;
while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
scrollVal -= $(tabElement).prev().outerWidth();
tabElement = $(tabElement).prev();
}
}
} else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
}
$('.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 () {
//计算元素集合的总宽度 //计算元素集合的总宽度
function calSumWidth(elements) { function calSumWidth(elements) {
var width = 0; MyCrontab.calSumWidth(elements);
$(elements).each(function () {
width += $(this).outerWidth(true);
});
return width;
} }
//滚动到指定选项卡 //滚动到指定选项卡
function scrollToTab(element) { function scrollToTab(element) {
var marginLeftVal = calSumWidth($(element).prevAll()), marginRightVal = calSumWidth($(element).nextAll()); MyCrontab.scrollToTab(element);
// 可视区域非tab宽度
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".J_menuTabs"));
//可视区域tab宽度
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
//实际滚动宽度
var scrollVal = 0;
if ($(".page-tabs-content").outerWidth() < visibleWidth) {
scrollVal = 0;
} else if (marginRightVal <= (visibleWidth - $(element).outerWidth(true) - $(element).next().outerWidth(true))) {
if ((visibleWidth - $(element).next().outerWidth(true)) > marginRightVal) {
scrollVal = marginLeftVal;
var tabElement = element;
while ((scrollVal - $(tabElement).outerWidth()) > ($(".page-tabs-content").outerWidth() - visibleWidth)) {
scrollVal -= $(tabElement).prev().outerWidth();
tabElement = $(tabElement).prev();
}
}
} else if (marginLeftVal > (visibleWidth - $(element).outerWidth(true) - $(element).prev().outerWidth(true))) {
scrollVal = marginLeftVal - $(element).prev().outerWidth(true);
}
$('.page-tabs-content').animate({
marginLeft: 0 - scrollVal + 'px'
}, "fast");
} }
//查看左侧隐藏的选项卡 //查看左侧隐藏的选项卡
function scrollTabLeft() { function scrollTabLeft() {
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left'))); var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
...@@ -66,6 +88,7 @@ $(function () { ...@@ -66,6 +88,7 @@ $(function () {
marginLeft: 0 - scrollVal + 'px' marginLeft: 0 - scrollVal + 'px'
}, "fast"); }, "fast");
} }
//查看右侧隐藏的选项卡 //查看右侧隐藏的选项卡
function scrollTabRight() { function scrollTabRight() {
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left'))); var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
...@@ -111,7 +134,7 @@ $(function () { ...@@ -111,7 +134,7 @@ $(function () {
dataIndex = $(this).data('index'), dataIndex = $(this).data('index'),
menuName = $.trim($(this).text()), menuName = $.trim($(this).text()),
flag = true; flag = true;
if (dataUrl == undefined || $.trim(dataUrl).length == 0)return false; if (dataUrl == undefined || $.trim(dataUrl).length == 0) return false;
// 选项卡菜单已存在 // 选项卡菜单已存在
$('.J_menuTab').each(function () { $('.J_menuTab').each(function () {
...@@ -143,12 +166,12 @@ $(function () { ...@@ -143,12 +166,12 @@ $(function () {
$('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1); $('.J_mainContent').find('iframe.J_iframe').hide().parents('.J_mainContent').append(str1);
//显示loading提示 //显示loading提示
var loading = layer.load(); var loading = layer.load();
$('.J_mainContent iframe:visible').load(function () { $('.J_mainContent iframe:visible').load(function () {
//iframe加载完成后隐藏loading提示 //iframe加载完成后隐藏loading提示
layer.close(loading); layer.close(loading);
}); });
// 添加选项卡 // 添加选项卡
$('.J_menuTabs .page-tabs-content').append(str); $('.J_menuTabs .page-tabs-content').append(str);
scrollToTab($('.J_menuTab.active')); scrollToTab($('.J_menuTab.active'));
...@@ -243,19 +266,21 @@ $(function () { ...@@ -243,19 +266,21 @@ $(function () {
$('.J_menuTabs').on('click', '.J_menuTab i', closeTab); $('.J_menuTabs').on('click', '.J_menuTab i', closeTab);
//关闭其他选项卡 //关闭其他选项卡
function closeOtherTabs(){ function closeOtherTabs() {
$('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function () { $('.page-tabs-content').children("[data-id]").not(":first").not(".active").each(function () {
$('.J_iframe[data-id="' + $(this).data('id') + '"]').remove(); $('.J_iframe[data-id="' + $(this).data('id') + '"]').remove();
$(this).remove(); $(this).remove();
}); });
$('.page-tabs-content').css("margin-left", "0"); $('.page-tabs-content').css("margin-left", "0");
} }
$('.J_tabCloseOther').on('click', closeOtherTabs); $('.J_tabCloseOther').on('click', closeOtherTabs);
//滚动到已激活的选项卡 //滚动到已激活的选项卡
function showActiveTab(){ function showActiveTab() {
scrollToTab($('.J_menuTab.active')); scrollToTab($('.J_menuTab.active'));
} }
$('.J_tabShowActive').on('click', showActiveTab); $('.J_tabShowActive').on('click', showActiveTab);
...@@ -282,12 +307,12 @@ $(function () { ...@@ -282,12 +307,12 @@ $(function () {
function refreshTab() { function refreshTab() {
var target = $('.J_iframe[data-id="' + $(this).data('id') + '"]'); var target = $('.J_iframe[data-id="' + $(this).data('id') + '"]');
var url = target.attr('src'); var url = target.attr('src');
//显示loading提示 //显示loading提示
// var loading = layer.load(); // var loading = layer.load();
// target.attr('src', url).load(function () { // target.attr('src', url).load(function () {
// //关闭loading提示 // //关闭loading提示
// layer.close(loading); // layer.close(loading);
// }); // });
} }
$('.J_menuTabs').on('dblclick', '.J_menuTab', refreshTab); $('.J_menuTabs').on('dblclick', '.J_menuTab', refreshTab);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment