在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>} <BR></> <BR><body> <BR><div id="demo"> <BR><div class="toolbar"> <BR><div class="item "id="txt">請選擇: 新增標籤
