[原创]自己封装了个Tab标签控件，效果和浏览器一样。

[原创]自己封装了个Tab标签控件，效果和浏览器一样。

很久没在Blog上写点东西了，最近因为项目需求，自己就写了个类似浏览器效果的Tab控件.
现在给大家分享下，呵呵。希望对大家有所帮助。如有问题欢迎EMAIL:[email protected]

效果图：



Demo和代码下载：

Tab源代码和DEMO下载 BUG FIXED 2010.04.08

使用实例：

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gbk"   />
< link  href ="tab.css"  rel ="stylesheet"  type ="text/css"   />
< script  type ="text/javascript"  src ="jquery-1.4.min.js" ></ script >
< script  type ="text/javascript"  src ="tab.js" ></ script >
< script  type ="text/javascript" >
//  测试数据
window.options  =  [
{id: " 1 " ,name: " BlogJava " ,lock: true ,url: " http://www.blogjava.net/fantasy " ,title: " BlogJava-中国最大的搜索引擎 " ,frame:{name:'BlogFrame',style:'width: 100 % ;height: 100 % '}},
{id: " 2 " ,name: " 爱问-中国最大的搜索引擎 " ,lock: false ,url: " http://iask.com/ " ,title: " 爱问-中国最大的搜索引擎 " },
{id: " 3 " ,name: " 搜乐-中国最大的搜索引擎 " ,lock: false ,url: " http://www.sooule.com/ " ,title: " 搜乐-中国最大的搜索引擎 " },
{id: " 4 " ,name: " 搜狗 " ,lock: false ,url: " http://www.sogou.cn " ,title: " 搜狗-中国最大的搜索引擎 " },
{id: " 5 " ,name: " 百度 " ,lock: true ,url: " http://www.baidu.com " ,title: " 百度-中国最大的搜索引擎 " },
{id: " 6 " ,name: " 谷歌 " ,lock: true ,url: " http://www.google.com " ,title: " 谷歌-中国最大的搜索引擎 " },
{id: " 7 " ,name: " 搜搜 " ,lock: false ,url: " http://www.soso.com " ,title: " 搜搜-中国最大的搜索引擎 " },
{id: " 8 " ,name: " 必应 " ,lock: true ,url: " http://cn.bing.com/ " ,title: " 必应-中国最大的搜索引擎 " }];
//  新增
var  add  =   function (i){
    tab.add(window.options[i]);
};
//  解锁与锁定
var  lock  =   function ( isLock ){
    tab.lock( " 1 " ,isLock);
};
//  关闭
var  remove  =   function ( id ){
    tab.close(id);
};

//  移动
var  move  =   function ( state ){
    tab.move({action:state});
};

jQuery(  function (){
     var  option  =  {tabID: " Tabs " ,frameID: " Frames " ,activeClass: " on " ,lockClass: " locked " ,leftID: " Left " ,
    rightID: " Right " ,resetID: " Reset " ,closeID: " Close " };
    window.tab  =  FantasyTab.create(option);
    window.tab.add(window.options[ 0 ]);
});
</ script >
</ head >
< body >
< fieldset >
测试按钮
< input  type ="button"  value ="爱问"  onclick ="add(1)"   />
< input  type ="button"  value ="搜乐"  onclick ="add(2)"   />
< input  type ="button"  value ="搜狗"  onclick ="add(3)"   />
< input  type ="button"  value ="百度"  onclick ="add(4)"   />
< input  type ="button"  value ="谷歌"  onclick ="add(5)"   />
< input  type ="button"  value ="搜搜"  onclick ="add(6)"   />
< input  type ="button"  value ="必应"  onclick ="add(7)"   />
< input  type ="button"  value ="解锁Blog"  onclick ="lock(false)"   />
< input  type ="button"  value ="锁定Blog"  onclick ="lock(true)"   />
< input  type ="button"  value ="关闭Blog"  onclick ="remove(1)"   />
< input  type ="button"  value ="左移"  onclick ="move('left')"   />
< input  type ="button"  value ="右移"  onclick ="move('right')"   />
< input  type ="button"  value ="复位"  onclick ="move('reset')"   />
</ fieldset >
< div  id ="TabMain" >
     < div  class ="c_tabNav" >< div  class ="tabNavWrapper" >
         < div  class ="tabTurner" >
             < ul >
                 < li >< a  id ="Left"  href ="#"  title ="左移标签组"  class ="left" ></ a ></ li >
                 < li >< a  id ="Right"  href ="#"  title ="右移标签组"  class ="right" ></ a ></ li >
                 < li >< a  id ="Reset"  href ="#"  title ="复位标签组"  class ="default" ></ a ></ li >
                 < li >< a  id ="Close"  href ="#"  title ="全部关闭"  class ="close" ></ a ></ li >
             </ ul >
         </ div >
         < div >< div  class ="tab" >< div  class ="maxWidth" >
             <!--  这里存放生成的Tab -->
             < ul  id ="Tabs" ></ ul >
         </ div ></ div ></ div >
     </ div >
     </ div >
</ div >
<!--  这里存放生成的IFrame 只要ID='Frames'就可以，可以根据布局自己定义 -->
< div  id ="Frames"  style ="height:768px" >
</ div >
</ body >
</ html >