jQuery学习笔记(3) - 用jquery(插件)实现多选项卡功能

在网中用到多选项卡功能的网站有很多，比如163和126邮箱，用过的人知道。本人在那么多的类似插件中，目前碰到这个比较好，花了点时间调试出来了，请看效果图

这款插件叫jqueryMagicTabs，上图实现了基本功能，如添加选项卡，选择指定的选项卡。当添加的选项卡超过一定长度时会出现左右滑动的按钮，同时支持鼠标滑动选项卡。这段代码如下所示：复制代码代码如下：%@页面语言=' Java '内容类型=' text/html；charset=UTF-8 '页面编码=' UTF-8 ' %！DOCTYPE html PUBLIC '-//W3C//DTDHTML 4.01 Transitional//EN ' ' http://www .w3。org/TR/html 4/loose。dtd ' html head meta http-equiv=' Content-Type ' Content=' text/html；charset=UTF-8' titleMagicTabs的基础用法/title link href=' ./CSS/默认值。CSS"type="text/CSS"rel="样式表链接./CSS/tab。' CSS '类型=' text/CSS ' rel='样式表'脚本类型=' text/JAVAScript ' src=' http :/js/jquery。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/cn。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/core。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/ui。js '/script脚本类型=' text/JavaScript ' src=' http :/js/global。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/鼠标滚轮。js/'脚本脚本类型=' text/JAVAScript ' src=' http :/js/tab/tab。js/脚本脚本类型=' text/JAVAScript ' src=' http :/js/ga。js '/script脚本类型=' text/JavaScript ' $(function(){ var DD=[]，I=0；for(I=0；i10i ){ var a={ code: 'tab' i，title: '选项卡我，可关闭： i0，el: '选项卡我//你可以在这里放任何东西};DD。推(一)；} var tabs=$(' .制表符');选项卡。MAC(' tab '，{ tabWidth:80//使用固定宽度项目： dd，onCloseTab:函数(me，c，a){ tnCbx.find('[value=' c ']').移除();返回真；} }).选择第一个()；var thd=tabs.children(' .head ')，thm=thd.children ' .main’)；thd.mousewheel(函数(e，，x，y){ thm。scroll ft(thm。scrolleft()-deltaY * 40)；返回false })；//切换选择的选项卡var tnCbx=$('#tabNoCbx ').change(function(){ tab。选择($(this)).val())；});App.options(tnCbx，{ data: dd，keyField: 'code '，render : function(r){ return r . title；} });//添加选项卡var atBtn=$('#addTabBtn ').单击(function(){ var a=tab。addtab({代码： ' tab ' I，title: '选项卡我，可关闭： i0，el: '选项卡我//你可以在这里放任何东西});选项卡。选择(' tab ' I)；tncbx。追加('选项值='标签' I ')选项卡I '/option ')；我；});});/script style type=' text/CSS ' # demo { position : absolute；宽度： 600像素；高度： 400像素；top : 50pxleft : 200px }/style/head body div id=' demo ' div class=' toolbar ' div class=' item ' id=' txt '请选择：/div class=' item ' select id=' tabNoCbx ' style=' margin : 2px；/select/div class=' sqrt '/div div class=' item button ' id=' addTabBtn '添加选项卡/div/div class=' clear '/div div class=' tab ' style=' height : 380 px；margin : 4px '/div/div/body/html整个工程的目录如下所示

本插件下载地址是http://boarsoft.com/cn/,里面还有很多优秀的插件，感兴趣可以自己练习下。