2023年7月9日发(作者：)
如大量信息查看，当网页多窗口框架等都会用到，现在网上基于jquery Tab控件，其实也蛮多了，我以前用过的idtabs，就比较简单实用，也是比较灵活，但是对于复杂情况就要编码多些，太简单了些。还有就是jquery UI的里面的tab控件（没用过，我对jquery ui不太感冒），另外就是近期有点小火的easyui 中的tab控件，最早在javaeye上面看到的，界面还算漂亮，因为之前没开源，所以一直没跟进（好像最近开源了，前几天下载了看看，编码风格有点像prototype,看不出jquery的影子，不知道为什么叫jquery easyui呵呵，因为没太深入去学习，也不好做其他评价）。说了那么多，我们还是回到主题，因为种种原因不得不想着自己开发一个吧。于是就有了这篇，先来看看效果吧。
下图是单网页多窗口框架的效果图
下图是文末提供调用示例的效果截图。
大家可以看到了还是使用ExtJs的效果。其实CSS基本上是直接copy它的。我觉得它那个就非常好看，当然实际使用的时候大家有能力完全可以自己样子
第一 我们还是从HTML开始吧
注：我先控件的思路始终是先确定HTML结构，其次是样式，最终才是js实现的事件方法等。
其实看图我们就可以基本确定，tab控件主要有两个部分的html 一个是头，用于放tab选项卡的；另外一个是体，是内容的容器。那么就是两个Div容器，讲tab控件分成了header和body两部分。
其中header部分因为包含多选项卡 所以很容易想到ul +li的配合。来看一下header中的实际html结构
通过通过其中li即是一个选项卡，第一个a是关闭按钮，第二个a才是实际内容 通过嵌套标签来实现 左右中的背景图片设置（这个做法比较多见的）。当然能够有个好的效果，还是要靠CSS支持。必须对CSS有一定的了解。
Body的结构则更简单就是div嵌套div就就结束了。
第二 CSS样式表
因为CSS是copy EXTJS的我也就不多介绍了。大家可以看代码下载里面的实际代码，如果有问题可以再沟通交流
第三：开始编写JS了
老规矩先来一段完整的JS代码，大概有500行左右的代码，其实我换行比较勤快，实际的代码量其实还是比较少。
复制代码 代码如下:
; (function ($) {
$.el =function(option){
var dfop ={
items:[], //选项卡数据项 {id,text,classes,disabled,closeable,content,url,cuscall,onactive}
width:500,
height:400,
scrollwidth:100,//如果存在滚动条，点击按钮次每次滚动的距离
autoscroll:true //当选项卡宽度大于容器时自动添加滚动按钮
};
var headerheight=28;
$.extend(dfop, option);
var me =$(this).addClass("x-tab-panel").width();
innerwidth = -2;
//构建Tab的Html
var tcs= roll?"x-tab-scrolling-top":"";
var header = $("
style='width:"+innerwidth+"px;MozUserSelect:none;KhtmlUserSelect:none;'>
var stripwrap = $("
");var scrollerright = $("
");var scrollerleft = $("
");var ulwrap = $("
var stripspacer = $("
");var litemp =[];
for(var i=0,l=; i { var item =[i]; builditemlihtml(item,litemp); } ("
((""));
litemp =null;
(ulwrap);
if(roll)
{
(scrollerright).append(scrollerleft); }
(stripwrap).append(stripspacer);
var bodyheight=-headerheight;
var bodywrap = $("
");var body = $("
x-tab-panel-body-top'/>").css({width:innerwidth,height:bodyheight});
var bodytemp=[];
for(var i=0,l=; i var item =[i]; builditembodyhtml(item,bodytemp); } (("")).appendTo(bodywrap); (header).append(bodywrap); initevents(); function builditemlihtml(item,parray) { (" class='",ve?"x-tab-strip-active":"",ed?"x-tab-strip-disabled":"",ble?" x-tab-strip-closable":"",s?" x-tab-with-icon":"","'>"); (""); ("",,""); ("
}
function builditembodyhtml(item,parray)
{
("
("
("
if(){
("