最近需要使用tabs(頁籤)的功能，原本是使用 jqueryUI 裡面所提供的tabs，但是一直覺得它實在是太肥大了， 使用它必須載入 ui.core.js(14KB) 、ui.tabs.js(19KB)，我只是要tabs功能而已卻要載入好肥大的javascript， 雖然可以在官網選擇這二個檔案並壓縮過後下載，但是也要19KB這麼大，所以...乾脆自己寫一個好囉

範例

badongo下載 (662Byte)

使用範例

<div name="tabs" style="width:500px;">
        <ul>
            <li><a href="fragment_1">頁籤1</a></li>
            <li><a href="fragment_2">頁籤2</a></li>
            <li><a href="fragment_3">頁籤3</a></li>
        </ul>
        
        <div id="fragment_1">

            頁籤1頁籤1頁籤1頁籤1頁籤1頁籤1<br/>
            頁籤1頁籤1頁籤1頁籤1頁籤1頁籤1頁籤1頁籤1
        </div>
        <div id="fragment_2">
            頁籤2頁籤2頁籤2頁籤2頁籤2頁籤2<br/>
            頁籤2頁籤2頁籤2頁籤2頁籤2頁籤2頁籤2頁籤2
        </div>
        <div id="fragment_3">
            頁籤3頁籤3頁籤3頁籤3頁籤3頁籤3<br/>
            頁籤3頁籤3頁籤3頁籤3頁籤3頁籤3頁籤3頁籤3
        </div>
    </div>

<script>
$(function(){
    $('div[name="tabs"]').tabs();
});
</script>

後記

這個 tabs plugin 只是個很簡單的頁籤功能，沒有其它特殊功能像是 mousemove、Ajax load 的功能，往後有需要的話就再增加囉。對於跟我一樣只是需要簡單的tabs功能的人，或許可以試試看囉。

相關文章

• ajax upload uploadify (0)
• jQuery plugin- ClickMenu (0)
• jQuery 手冊 – 選擇器(Selectors) (3)
• [小技巧] jQuery serialize (2)
• [Plugin] jQuery Autocomplete (2)

jQuery, plugin