最近需要使用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功能的人,或許可以試試看囉。
相關文章
1 則迴響 for jQuery Plugin Tabs
JQuery Newbie | 三月 30, 2009 at 5:34 下午



找好久了,感謝這位大大提供簡單清爽的 tag plug-in