在E-Spacy看到了漂亮的Tab Pane，于是也給自己的BLOG裝了個(gè)。
安裝方法是參照E-Spacy做的，效果見(jiàn)側(cè)欄 。
到tabpane下載源代碼，解壓縮后，上傳到自己的網(wǎng)頁(yè)空間，推薦放到WP安裝目錄的wp-content\themes內(nèi)。
然后把此兩行代碼復(fù)制到模板文件的header.php內(nèi)，head之間：
1 2 | <script type="text/javascript" src="js/tabpane.js"></script> <link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" /> |
其中js/tabpane.js和css/tab.webfx.css部分改成自己的網(wǎng)絡(luò)鏈接地址，推薦使用
1 | <?php bloginfo('template_directory'); ?> |
這樣在更換空間時(shí)也不會(huì)出錯(cuò)。
之后便可以把自己的Sidebar的代碼按照它例子的格式（此例為顯示兩個(gè)Tab－General，Privacy）進(jìn)行改寫(xiě)。這里省去了原文的一 種簡(jiǎn)單的代碼加載方式，雖然簡(jiǎn)單的格式完全能實(shí)現(xiàn)了TabPane的功能，但為了更迅速更穩(wěn)定的加載各各Tab，請(qǐng)使用下面的代碼格式。
1 2 3 4 5 6 7 8 9 10 11 12 13 | <div class="tab-pane" id="tab-pane-1"> <script type="text/javascript">var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );</script> <div class="tab-page" id="tab-page-1"> <h2 class="tab">General</h2> <script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );</script> This is text of tab 1. This is text of tab 1. </div> <div class="tab-page" id="tab-page-2"> <h2 class="tab">Privacy</h2> <script type="text/javascript">tabPane1.addTabPage( document.getElementById( "tab-page-2" ) ); </script> This is text of tab 2. This is text of tab 2. </div> </div> |
注釋?zhuān)?/p>
1 | <h2 class="tab"></h2> |
之間的部分即為Tab的標(biāo)題
This is text of tab 1. This is text of tab 1.
This is text of tab 1. This is text of tab 1.
此部分為T(mén)ab的內(nèi)容。
在實(shí)現(xiàn)自己側(cè)邊欄的TabPane效果時(shí)只需要把這些代碼替換成sidebar.php里的各各內(nèi)容即可，添加更多Tab只需依照增加代碼即可，注意按次序改寫(xiě)。