<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style>
html,body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
min-width: 800px;
min-height: 600px;
background-color: #e7eff7;
}
.head{
height: 40px;
background-color: #536ea7;
}
.foot{
height: 20px;
background-color: #f5f5f5;
}
.content{
position: relative;
}
.left-content{
width: 200px;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.right-content{
height: 100%;
position: absolute;
top: 0;
right: 0;
}
.left-content-tree{
width: 199px;
height: 100%;
border-right: 1px solid #95B8E7;
}
.foot-content{
height: 19px;
line-height: 19px;
border-top: 1px solid #95B8E7;
}
.EasyLib-Ctl-Tab-Title-Container{
background-color: #E0ECFF;
position: relative;
top: 0;
left: 0;
border-bottom: 1px solid #95B8E7;
}
.EasyLib-Ctl-Tab-Title-Close{
font-size: 12px;
font-weight: 500;
color: #8A2BE2;
position: absolute;
top: 8px;
right: 20px;
}
.EasyLib-Ctl-Tab-Title-Close:hover{
cursor: pointer;
}
.EasyLib-Ctl-Tab-Title{
background-color: #e7eff7;
display: inline-block;
border: 1px solid #95B8E7;
border-bottom-width: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 30px;
line-height: 30px;
padding: 0 5px;
margin: 1px 1px 0 1px;
}
.EasyLib-Ctl-Tab-Title:hover{
cursor: pointer;
}
.EasyLib-Ctl-Tab-Title-Select{
background-color: #fff;
border-bottom-style: none;
}
.EasyLib-Ctl-Tab-Content{
background-color: #FFF5EE;
width: 100%;
}
</style>
</head>
<body>
<div class="head"></div>
<div class="content">
<div class="left-content">
<div class="left-content-tree">
<input type="button" class="btnTab" value="打开tab" />
</div>
</div>
<div class="right-content"></div>
</div>
<div class="foot">
<div class="foot-content"></div>
</div>
<script src="http://cloud.xingfa.com/Cloud/Statics/js/jquery-1.8.0.min.js"></script>
<script>
(function($) {
$.fn.addTab = function(dict) {
var config = {
tabCT: "EasyLib-Ctl-Tab-Container",
tabTitleCT: "EasyLib-Ctl-Tab-Title-Container",
tabContentCT: "EasyLib-Ctl-Tab-Content-Container",
tabTitle: "EasyLib-Ctl-Tab-Title",
tabContent: "EasyLib-Ctl-Tab-Content",
tabTitleClose: "EasyLib-Ctl-Tab-Title-Close",
tabTitleSelect: "EasyLib-Ctl-Tab-Title-Select",
tabContentSelect: "EasyLib-Ctl-Tab-Content-Select"
}
var _this = $(this);
var tabIndex = 0;
if(!_this.find("." + config.tabCT).length){
tabIndex = 0;
}
else{
var $tmp = _this.find("." + config.tabTitle);
var maxNum = dict.maxNum ? dict.maxNum : 3;
if($tmp.length >= maxNum){
alert("已超出tab的最大数量,请先关闭部分tab再进行操作!");
return;
}
tabIndex = Number($tmp.last().attr("data-index")) + 1;
}
if(!tabIndex){
var str = [];
str.push("<div class='" + config.tabCT + "'>");
str.push("<div class='" + config.tabTitleCT + "'><div class='" + config.tabTitleClose + "'>[关闭tab]</div></div>");
str.push("<div class='" + config.tabContentCT + "'></div>");
str.push("</div>")
_this.append(str.join(""));
}
$("." + config.tabTitleCT).append("<div class='" + config.tabTitle + "' data-index='" + tabIndex + "''>" + dict.title + "</div>");
$("." + config.tabContentCT).append("<div class='" + config.tabContent + "' data-index='" + tabIndex + "''>" + dict.content + "</div>");
var $tabTitle = _this.find("." + config.tabTitle);
var $tabContent = _this.find("." + config.tabContent);
var setWH = function(){
$tabContent.css({
"width": _this.width() + "px",
"height": _this.height() - _this.find("." + config.tabTitleCT).height() - 1 + "px"//titleCt border-bottom
}).hide();
$tabContent.last().show();
$tabTitle.removeClass(config.tabTitleSelect);
$tabTitle.last().addClass(config.tabTitleSelect);
$tabContent.removeClass(config.tabContentSelect);
$tabContent.last().addClass(config.tabContentSelect);
};
setWH();
$(window).resize(function(){
setWH();
});
$tabTitle.unbind("click").click(function(){
$tabTitle.removeClass(config.tabTitleSelect);
$(this).addClass(config.tabTitleSelect);
$tabContent.hide();
$tabContent.removeClass(config.tabContentSelect);
var curIndex = $(this).index() - 1;
$tabContent.eq(curIndex).show();
$tabContent.eq(curIndex).addClass(config.tabContentSelect);
});
$("." + config.tabTitleClose).unbind("click").click(function(){
$("." + config.tabTitleSelect).remove();
$("." + config.tabContentSelect).remove();
var $tabTitle = _this.find("." + config.tabTitle);
var $tabContent = _this.find("." + config.tabContent);
$tabTitle.last().addClass(config.tabTitleSelect);
$tabContent.last().addClass(config.tabContentSelect);
$tabContent.hide();
$tabContent.last().show();
if(!$tabTitle.length){
_this.find("." + config.tabCT).remove();
}
});
dict.success && dict.success();
};
$.fn.getTabWidth = function(){
var _this = $(this);
var $obj = _this.find(".EasyLib-Ctl-Tab-Title");
var w = 0;
for(var i=0; i<$obj.length; i++){
var $tmp = $obj.eq(i);
w += $tmp.width() + 4;
}
return w;
};
})(jQuery);
(function(){
$(function(){
setH();
});
$(window).resize(function(){
setH();
});
var TABINDEX = 0;
$("body").on("click", ".btnTab", function(){
var $obj = $(".right-content");
var w = $obj.width();
var tabW = $obj.getTabWidth();
if(tabW >= w - 400){
alert("已超出tab的最大数量,请先关闭部分tab再进行操作!");
return;
}
$obj.addTab({
maxNum: 100,
title: "tab-" + (++TABINDEX),
// content: "<iframe class='tabIframe' src='http://baidu.com' style='width:100%;height:100%;margin:0;padding:0;border-style:none;' frameborder='0'></iframe>"
content: TABINDEX
});
});
function setH(){
var h = $(window).height();
var minH = parseInt($("body").css("min-height"));//最小高度
if(h < minH){
h = minH;
}
$(".content").css({
"height": h - $(".head").height() - $(".foot").height() + "px"
});
var w = $(window).width();
var minW = parseInt($("body").css("min-width"));//最小宽度
if(w < minW){
w = minW;
}
$(".right-content").css({
"width": w - $(".left-content").width() + "px"
});
};
})();
</script>
</body>
</html>
1587
02-18
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
