[JavaScript] 纯文本查看 复制代码
(function () {
var $sidebar = $('#sidebar'),
$container = $('#container'),
$pages = $('#pages'),
$pageContent = $('#page-content'),
w = $pageContent.width(),
h = $(window).height() - parseInt($container.css('marginTop'));
var Layout = {
cache: ['home'],
urlCache: ['home'],
template: '<li>{text}<i class="icon small" data-page-off title="关闭"></i></li>',
activeIndex: 0,
togglePage: function (index) {
index = $.isNumeric(index) ? index : $pages.find('li').filter(function () {
return this.firstChild.nodeValue === index;
}).index();
$pageContent.children().hide().eq(index).show();
$pages.children().removeClass('active').find('i').css('color', '#999');
$pages.children().eq(index).addClass('active').find('i').css('color', '#f5694b');
this.activeIndex = index;
if (index === 0) {
$('html, body').css('overflow-y', 'auto');
} else {
$('html, body').css('overflow', 'hidden');
}
$pages.css('width', function () {
var w = 30;
$(this).find('li').each(function (index, el) {
w += $(el).outerWidth();
});
return w + 'px';
});
return index;
},
addPage: function (text, url) {
var index = this.hasUrl(url);
if (index === -1) {
var $fm = $('<iframe width="' + w + '" height="' + h + '" frameborder="0" src="' + url + '"></iframe>');
$pageContent.append($fm);
$fm.show().siblings().hide();
var win = $fm[0].contentWindow;
this.cache.push(win);
this.urlCache.push(url);
var $title = $(this.template.replace('{text}', text));
$pages.append($title);
index = $title.index();
}
return this.togglePage(index);
},
removePage: function (index) {
if (index === 0) {
return;
}
var $page = $pages.children().eq(index);
$sidebar.find('.sidebar-list a').filter(function () {
return this.innerHTML === $page[0].firstChild.nodeValue;
}).removeAttr('pageIndex');
$page.remove();
$pageContent.children().eq(index).remove();
this.cache.splice(index, 1);
this.urlCache.splice(index, 1);
this.togglePage(index - 1);
},
closeAll: function () {
$pages.children(':gt(0)').remove();
$pageContent.children(':gt(0)').remove();
$sidebar.find('.sidebar-list a').removeAttr('pageIndex');
$pages.children(':first').addClass('active');
$pageContent.children(':first').show();
this.cache = ['home'];
this.urlCache = ['home'];
},
getWindow: function (index) {
return this.cache[index || this.activeIndex];
},
load: function (index, url) {
this.getWindow(index).location = url;
},
reload: function (index) {
this.getWindow(index).location.reload();
},
hasUrl: function (url) {
return $.inArray(url, this.urlCache);
},
pagesMove: function (len) {
var w = parseInt($pages.css('width'));
var mw = parseInt($pages.css('min-width'));
if (w > mw) {
$pages.css('left', function () {
var left = parseInt($(this).css('left'));
return (len > 0 ? Math.max(left - len, mw - w) : Math.min(left - len, 0)) + 'px';
});
}
}
};
$sidebar.on('click', '.sidebar-handle', function () {
var $arrow = $(this).find('.arrow');
w = $('body').width();
if ($arrow.hasClass('r')) {
$sidebar.css('left', '-180px');
$container.css({
'margin-left': 0
});
$pages.css('margin-left', 0);
} else {
$sidebar.css('left', 0);
$container.css('margin-left', '181px');
$pages.css('margin-left', '181px');
w = w - 181;
}
$arrow.toggleClass('r l');
$('iframe').width(w);
}).on('click', '.sidebar-list a', function () {
var url = this.getAttribute('href'),
pageIndex = $(this).attr('pageIndex');
if ( Layout.hasUrl(url) === -1) {
var index = Layout.addPage(this.innerHTML, url);
$(this).attr('pageIndex', index);
} else {
Layout.togglePage(pageIndex || this.innerHTML);
Layout.reload(); //重新刷新当前页
}
return false;
});
$pages.on('click', '[data-page-off]', function () {
Layout.removePage($(this).parent().index());
return false;
}).on('click', 'li', function () {
Layout.togglePage($(this).index());
return false;
}).on('dblclick', 'li', function () {
Layout.removePage($(this).index());
return false;
});
$(document).on('click', '#closeAll', function () {
Layout.closeAll();
}).on('click', '#reloadPage', function () {
Layout.reload();
}).on('click', '[data-to-left]', function () {
Layout.pagesMove(100);
}).on('click', '[data-to-right]', function (event) {
Layout.pagesMove(-100);
});
$(window).load(function () {
$pages.css('min-width', (w - 70) + 'px');
})
$(window).resize(function () {
w = $container.width();
h = $(this).height() - parseInt($container.css('marginTop'));
$pages.css('min-width', (w - 70) + 'px');
$('iframe').width(w).height(h);
});
window.Layout = Layout;
} ());