在Web中用到多选项卡功能的网站有很多，比如163和126邮箱，用过的人知道。本人在那么多的类似插件中，目前碰到这个比较好，花了点时间调试出来了，请看效果图： 这款插件叫jqueryMagicTabs，上图实现了基本功能，如添加选项卡，选择指定的选项卡。当添加的选项卡超过一定长度时会出现左右滑动的按钮，同时支持鼠标滑动选项卡。 这段代码如下所示： 复制代码 代码如下: pageEncoding="UTF-8"%> MagicTabs的基础用法 <BR>$(function(){ <BR>var dd = [], i=0; <BR>for(i=0; i<10; i++){ <BR>var a = { <BR>code: 'tab' + i, <BR>title: '选项卡 ' + i, <BR>closeable: i>0, <BR>el: '选项卡 ' + i // You can put anything here <BR>}; <BR>dd.push(a); <BR>} <BR>var tabs = $('.tabs'); <BR>tabs.mac('tabs', { <BR>tabWidth: 80, //Use fix width <BR>items: dd, <BR>onCloseTab: function(me, c, a){ <BR>tnCbx.find('[value=' + c + ']').remove(); <BR>return true; <BR>} <BR>}).selectFirst(); <BR>var thd = tabs.children('.head'), thm = thd.children('.main'); <BR>thd.mousewheel(function(e, delta, deltaX, deltaY){ <BR>thm.scrollLeft(thm.scrollLeft() - deltaY * 40); <BR>return false; <BR>}); <BR>//切换选择的选项卡 <BR>var tnCbx = $('#tabNoCbx').change(function(){ <BR>tabs.select($(this).val()); <BR>}); <BR>App.options(tnCbx, { <BR>data: dd, <BR>keyField: 'code', <BR>render: function(r){ <BR>return r.title; <BR>} <BR>}); <BR>//添加选项卡 <BR>var atBtn = $('#addTabBtn').click(function(){ <BR>var a = tabs.addTab({ <BR>code: 'tab' + i, <BR>title: '选项卡 ' + i, <BR>closeable: i>0, <BR>el: '选项卡 ' + i // You can put anything here <BR>}); <BR>tabs.select('tab' + i); <BR>tnCbx.append('<optionvalue="tab' <BR>+ i + '">选项卡 ' + i + ''); <BR>i++; <BR>}); <BR>}); <BR> <BR>#demo{ <BR>position:absolute; <BR>width: 600px; <BR>height: 400px; <BR>top: 50px; <BR>left: 200px; <BR>} <BR> 请选择： 添加选项卡 整个工程的目录如下所示： 本插件下载地址是http://boarsoft.com/cn/，里面还有很多优秀的插件，感兴趣可以自己练习下。
