通过本文主要向大家介绍了jQuery,TabPanel等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
如大量信息查看，当网页多窗口框架等都会用到，现在网上基于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行左右的代码，其实我换行比较勤快，实际的代码量其实还是比较少。