Web には 163 メールボックスや 126 メールボックスなど、マルチタブ機能を使用する Web サイトがたくさんあります。似たようなプラグインがたくさんある中で、これを見つけました。デバッグに時間がかかりました。レンダリングをご覧ください。 このプラグインは jqueryMagicTabs と呼ばれ、タブの追加や指定したタブの選択などの基本的な機能を実装しています。追加したタブが一定の長さを超えると左右にスライドするボタンが表示され、マウスのスライドタブにも対応しています。 < %@ ページ言語="java"contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> MagicTabs の基本的な使い方</u><link href="./ css /default.css"type="text/css" rel="stylesheet"> </a><link href="./css/tabs.css"type="text/css" rel="stylesheet"> ; </span><script type="text/javascript"src="./js/jquery.js"></script> </span> </div><script type="text/javascript"src="./ js /cn.js"></script> <div class="codebody" id="code58950"><script type="text/javascript"src="./js/core.js"></script> <br><script type ="text/javascript"src="./js/ui.js"></script> <br><script type="text/javascript"src="./js/global.js"> ; </script> <br><script type="text/javascript"src="./js/mousewheel.js"><br><script type="text/javascript" src ="./js/tab/tabs.js"></script> <br><script type="text/javascript"src="./js/ga.js"></script> ; <br><script type="text/javascript"> <br>$(function(){ <br>var dd = [], i=0; <br>for(i=0; ivar a = { <br>コード: 'タブ' i, <br>タイトル: 'タブ' i, <br>閉じる可能: i>0, <br>el: 'タブ' i / / ここには何でも入力できます <br>}; <br>dd.push(a); <br>var tabs = $('.tabs'); { <br>tabWidth: 80, //固定幅を使用します <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: 'tab' i, <br>closeable: i>0, <br>el: 'tab' i // ここには何でも入力できます <br>} ); tabs.select('tab' i); <br>tnCbx.append('<optionvalue="tab' <BR> i '">tab' i '</option>') ; <br>}) <br>}); <br></script> <br>#demo{ <br> >幅: 600 ピクセル; <br>上: 50 ピクセル; <br>} <br><br></ヘッド>< ;body> <br><div id="demo"> <br><div class="item "id="txt "> </div><br><div class="item"><select id="tabNoCbx" style="margin: 2px;"></select></ div> ;div class="sqrt"></div> <br><div class="itembutton" id="addTabBtn">タブを追加<br>< ;/div> ;div class="clear"></div> <br><div class="tabs"style="height: 380px; margin: 4px;"</ div> div><br><br><br><br> <br>プロジェクト全体のディレクトリは次のとおりです: <br> <br><br><br> <br>このプラグインのダウンロード アドレスは http://boarsoft.com/cn/ です。興味があれば、ぜひ実践してみてください。 <br> </div>
