前端js组件更新
This commit is contained in:
216
public/static/admin/js/page.js
Normal file
216
public/static/admin/js/page.js
Normal file
@@ -0,0 +1,216 @@
|
||||
;(function($){
|
||||
$.extend({
|
||||
page : {
|
||||
//计算元素集合的总宽度
|
||||
calSumWidth: function(elements) {
|
||||
var width = 0;
|
||||
$(elements).each(function() {
|
||||
width += $(this).outerWidth(true);
|
||||
});
|
||||
return width;
|
||||
},
|
||||
|
||||
// 激活指定选项卡
|
||||
setActiveTab: function(element) {
|
||||
if (!$(element).hasClass('active')) {
|
||||
var currentId = $(element).data('id');
|
||||
// 显示tab对应的内容区
|
||||
$('.sent_iframe').each(function() {
|
||||
if ($(this).data('id') == currentId) {
|
||||
$(this).show().siblings('.sent_iframe').hide();
|
||||
}
|
||||
});
|
||||
$(element).addClass('active').siblings('.menuTab').removeClass('active');
|
||||
this.scrollToTab(element);
|
||||
}
|
||||
},
|
||||
scrollToTab: function(element){
|
||||
var marginLeftVal = this.calSumWidth($(element).prevAll()),
|
||||
marginRightVal = this.calSumWidth($(element).nextAll()),
|
||||
tabItemVal = this.calSumWidth($('.page-tabs-content .menuTab')),
|
||||
visibleWidth = $(".tab-list").outerWidth(true);
|
||||
|
||||
//实际滚动宽度
|
||||
var scrollVal = 0;
|
||||
if (tabItemVal < visibleWidth || (tabItemVal > visibleWidth && marginLeftVal < visibleWidth)) {
|
||||
scrollVal = 0;
|
||||
}else if(tabItemVal > visibleWidth && marginLeftVal > visibleWidth){
|
||||
scrollVal = marginLeftVal - visibleWidth + $(element).outerWidth(true);
|
||||
}
|
||||
$('.page-tabs-content').animate({
|
||||
marginLeft: 0 - scrollVal + 'px'
|
||||
},
|
||||
"fast");
|
||||
|
||||
$('.page-tab .page-tabs-content a i').click(function(e){
|
||||
e.preventDefault();
|
||||
$.page.closeMenuItem($(this).parent('a').data('id'));
|
||||
})
|
||||
|
||||
$('.page-tab .page-tabs-content a span').click(function(e){
|
||||
e.preventDefault();
|
||||
$.page.setActiveTab($(this).parent('a'));
|
||||
})
|
||||
},
|
||||
|
||||
scrollToLeft: function(){
|
||||
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
|
||||
// 可视区域非tab宽度
|
||||
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
|
||||
//可视区域tab宽度
|
||||
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
|
||||
//实际滚动宽度
|
||||
var scrollVal = 0;
|
||||
if (($(".page-tabs-content").width()) < visibleWidth) {
|
||||
return false;
|
||||
} else {
|
||||
var tabElement = $(".menuTab:first");
|
||||
var offsetVal = 0;
|
||||
while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
|
||||
offsetVal += $(tabElement).outerWidth(true);
|
||||
tabElement = $(tabElement).next();
|
||||
}
|
||||
offsetVal = 0;
|
||||
if (calSumWidth($(tabElement).prevAll()) > visibleWidth) {
|
||||
while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
|
||||
offsetVal += $(tabElement).outerWidth(true);
|
||||
tabElement = $(tabElement).prev();
|
||||
}
|
||||
scrollVal = calSumWidth($(tabElement).prevAll());
|
||||
}
|
||||
}
|
||||
$('.page-tabs-content').animate({
|
||||
marginLeft: 0 - scrollVal + 'px'
|
||||
},
|
||||
"fast");
|
||||
},
|
||||
|
||||
scrollToRight: function(){
|
||||
var marginLeftVal = Math.abs(parseInt($('.page-tabs-content').css('margin-left')));
|
||||
// 可视区域非tab宽度
|
||||
var tabOuterWidth = calSumWidth($(".content-tabs").children().not(".menuTabs"));
|
||||
//可视区域tab宽度
|
||||
var visibleWidth = $(".content-tabs").outerWidth(true) - tabOuterWidth;
|
||||
//实际滚动宽度
|
||||
var scrollVal = 0;
|
||||
if ($(".page-tabs-content").width() < visibleWidth) {
|
||||
return false;
|
||||
} else {
|
||||
var tabElement = $(".menuTab:first");
|
||||
var offsetVal = 0;
|
||||
while ((offsetVal + $(tabElement).outerWidth(true)) <= marginLeftVal) { //找到离当前tab最近的元素
|
||||
offsetVal += $(tabElement).outerWidth(true);
|
||||
tabElement = $(tabElement).next();
|
||||
}
|
||||
offsetVal = 0;
|
||||
while ((offsetVal + $(tabElement).outerWidth(true)) < (visibleWidth) && tabElement.length > 0) {
|
||||
offsetVal += $(tabElement).outerWidth(true);
|
||||
tabElement = $(tabElement).next();
|
||||
}
|
||||
scrollVal = calSumWidth($(tabElement).prevAll());
|
||||
if (scrollVal > 0) {
|
||||
$('.page-tabs-content').animate({
|
||||
marginLeft: 0 - scrollVal + 'px'
|
||||
},
|
||||
"fast");
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
createMenuItem: function(dataUrl, menuName) {
|
||||
if ($(window.parent.document)) {
|
||||
var topWindow = $(window.parent.document);
|
||||
}else{
|
||||
var topWindow = $(window.document);
|
||||
}
|
||||
var flag = true;
|
||||
|
||||
// 选项卡菜单已存在
|
||||
$('.menuTab', topWindow).each(function() {
|
||||
if ($(this).data('id') == dataUrl) {
|
||||
if (!$(this).hasClass('active')) {
|
||||
$(this).addClass('active').siblings('.menuTab').removeClass('active');
|
||||
$('.page-tabs-content').animate({ marginLeft: ""}, "fast");
|
||||
// 显示tab对应的内容区
|
||||
$('.mainContent .sent_iframe', topWindow).each(function() {
|
||||
if ($(this).data('id') == dataUrl) {
|
||||
$(this).show().siblings('.sent_iframe').hide();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
}else{
|
||||
$.page.refreshTab();
|
||||
}
|
||||
flag = false;
|
||||
return false;
|
||||
}
|
||||
});
|
||||
dataIndex = $.common.random(1,100);
|
||||
|
||||
// 选项卡菜单不存在
|
||||
if (flag) {
|
||||
var tabHtml = '<a href="javascript:;" class="active menuTab" data-id="' + dataUrl + '" data-panel="' + dataUrl + '"><span>' + menuName + '</span> <i class="fa fa-times-circle"></i></a>';
|
||||
$('.menuTab', topWindow).removeClass('active');
|
||||
|
||||
// 添加选项卡
|
||||
$('.page-tab .page-tabs-content', topWindow).append(tabHtml);
|
||||
|
||||
// 添加选项卡对应的iframe
|
||||
var iframeHtml = $('<iframe/>', {
|
||||
'class':'sent_iframe',
|
||||
'name' : 'iframe_'+dataIndex,
|
||||
'width' : '100%',
|
||||
'src' : dataUrl,
|
||||
'frameborder' : 0,
|
||||
'data-id': dataUrl,
|
||||
'height':$(window).height() - 148,
|
||||
})
|
||||
$('.mainContent', topWindow).find('iframe.sent_iframe').hide();
|
||||
$('.mainContent', topWindow).append(iframeHtml);
|
||||
}
|
||||
this.scrollToTab($('.menuTab.active'));
|
||||
return false;
|
||||
},
|
||||
|
||||
closeMenuItem: function(dataId){
|
||||
if ($(window.parent.document)) {
|
||||
var topWindow = $(window.parent.document);
|
||||
}else{
|
||||
var topWindow = $(window.document);
|
||||
}
|
||||
if($('.menuTab[data-id="' + dataId + '"]', topWindow).hasClass('home')){
|
||||
$.model.msg('首页不能被关闭！');
|
||||
return;
|
||||
}
|
||||
if($.common.isNotEmpty(dataId)){
|
||||
if ($('.menuTab[data-id="' + dataId + '"]', topWindow).hasClass('active')) {
|
||||
if ($('.menuTab[data-id="' + dataId + '"]', topWindow).next('.menuTab').length > 0) {
|
||||
var activeId = $('.menuTab[data-id="' + dataId + '"]', topWindow).next('.menuTab:eq(0)').data('id');
|
||||
}else{
|
||||
var activeId = $('.menuTab[data-id="' + dataId + '"]', topWindow).prev('.menuTab:last').data('id');
|
||||
}
|
||||
$('.menuTab', topWindow).removeClass('active');
|
||||
$('.mainContent .sent_iframe', topWindow).hide();
|
||||
$('.menuTab[data-id="' + activeId + '"]', topWindow).addClass('active');
|
||||
$('.mainContent .sent_iframe[data-id="' + activeId + '"]', topWindow).show();
|
||||
};
|
||||
//window.parent.$.modal.closeLoading();
|
||||
// 根据dataId关闭指定选项卡
|
||||
$('.menuTab[data-id="' + dataId + '"]', topWindow).remove();
|
||||
// 移除相应tab对应的内容区
|
||||
$('.mainContent .sent_iframe[data-id="' + dataId + '"]', topWindow).remove();
|
||||
return;
|
||||
}
|
||||
},
|
||||
|
||||
// 刷新iframe
|
||||
refreshTab: function() {
|
||||
var currentId = $('.page-tabs-content').find('.active').attr('data-id');
|
||||
var target = $('.sent_iframe[data-id="' + currentId + '"]');
|
||||
var url = target.attr('src');
|
||||
target.attr('src', url).ready();
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
})(jQuery)
|
||||
Reference in New Issue
Block a user