<!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>
管理系统首页模版(20160519)
猜你喜欢
转载自blog.csdn.net/low584710047/article/details/51385982
今日推荐
周排行