目前位置在： 首頁 » 部落維護 » Blog article: 這裡│版面調整．新增Tab Pane效果
文章發表於： 九月 5th, 2007 06:29:58 │ 3,927 User Views
這幾天有來這裡的朋友，如果細心的話應該會發現我一點一點的細修這裡的版型吧^_*
截至目前為止做了最大的變化是增加了 Tab Pane 這個頁籤bar的效果，可以將整個版面變得更清爽，有許多小東西都可以收納起來，只在你有需要的時候再點選開來看。不知道大家對於這樣的改變有什麼感覺呢？喜歡、或不喜歡！？可以在此文留言回應喔^O^
現在就將我做的調整一一記錄於下：
Update→ 2007/09/05 am09:59 更換favicon.ico圖，大家可以看看網址列的小圖變囉^_*
01. 撤換掉右上方的AdSense for Search，改成Google Ajax Search的WP插件，大家可以試著搜尋站內文章，就能知道搜尋結果以何種樣貌呈現喔！
02. 將首頁的《關於我》改設為只在首頁和分頁顯示，其他頁面不顯示；《分頁》部份則改設為單篇頁面不顯示，其他頁面皆顯示。這兩部位原本是所有頁面都顯示的，但單篇頁面我想凸顯文章的各項資訊，於是就做了更動囉～
03. 接著就是最大的改變─ ─ Tab Pane 的JS效果，相信大家一看就知道和原來的版面最大的不同在哪兒，所以這裡我就不贅言了。
或許你會納悶，原本剛換Theme的時候不就已經很好看了，為甚麼還要多加這個JS效果呢？但其實是因為我想擺設的小東西太多，雖然版面是三欄的，可是如果擺上許多小玩意，那版面還是太過雜亂的，再加上我從很久以前在hhalloyy那裡看到他的介紹，就非常驚豔這種效果，所以就趁著這次機會一併加上囉：）
好啦，雖然hhalloyy和ED都曾介紹過這個效果，但既然我提到了它，也就不能免俗的為大家做個簡介囉，現在就來告訴大家這個名為Tab Pane 的JS效果該如何加載於個人網頁或部落格吧，前提是你是自架網站或部落格的，一般BSP無法達成喔！
我以下所講述的是專門給WP使用者看的，如果你是其他平台（MT、LT……）或個人網站使用者，就請你觀看原作者的使用說明囉！
首先當然就是先下載這個JS元件啦～ 請按此下載，或是直接去原作者網頁自行下載。
接著請你把下載回來的元件壓縮檔解壓、並以ftp上傳至你的主機空間或是個人網頁空間，請記得要放在WP安裝目錄的wp-content\themes裏喔，然後把你現在所使用的Theme的header.php檔找出來，在
- </head>
之前加上以下程式碼↓
- <script type="text/javascript" src="js/tabpane.js"></script>
- <link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />
記得把「src」和「href」之後的部份換成你這兩個檔案實際的存放路徑（URL），雖然hhalloyy說為了怕你在更換主機商或是網頁空間之後出錯，還得回頭修改，所以他推薦把這兩個部位改成
- <?php bloginfo('template_directory'); ?>
不過我在用了這個方法之後，反而無法顯示效果，所以我還是以存放路徑的URL做替換，你們可以自己試試看～
再來請你把以下程式碼放在你想添加 Tab Pane 的JS效果的地方，我是放在sidebar的地方。
- <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.
- 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.
- This is text of tab 2. This is text of tab 2.
- </div>
- </div>
這段程式碼你要修改的地方只有
- <h2 class="tab"></h2>
之間的部分，那裡填上你要使用的標題名稱。
至於
- This is text of tab 2. This is text of tab 2.
這段，則改成你想在 Tab Pane 顯示的內容，如果你想多加Tab，那就多加程式碼，不過要記得按次序加入喔！
文ｂｙ覺非／不斷的修改是為了越來越好啊～
相關文章
小史啊，寬度？這個版面會依據觀看者的螢幕寬度自動調整所視大小耶～
（就是因為這樣，所以我當初才會選用這個新的Theme，呵呵，我是懶人啦：P）
所以我不知道要修改哪裏，請問一下你的螢幕寬度多少？因為我的筆電也是寬螢幕的，並無橫向捲軸的情形產生呢！我的螢幕解析度為1280×768，你的是多少呢？
非也改版了耶,真好
不過寬度是不是要再修正一下…
因為我用寬螢幕,看了還是有橫捲軸耶,
如果是用百分比設定,那看文章區要不要再減小一點@@”
呵呵～我只是比較龜毛，想要把新的版面做到最符合自己的需求罷了，你的部落格版面比我還常換啊，怎會說荒廢呢^_*
真的很用心的經營，很棒喔。
向我自己都荒廢很久喔，哈哈。