目前位置在： 首頁 » 部落維護 » Blog article: 這裡│版面調整．新增Tab Pane效果

文章發表於： 九月 5th, 2007 06:29:58 │

　這幾天有來這裡的朋友，如果細心的話應該會發現我一點一點的細修這裡的版型吧^_*

　截至目前為止做了最大的變化是增加了 Tab Pane 這個頁籤bar的效果，可以將整個版面變得更清爽，有許多小東西都可以收納起來，只在你有需要的時候再點選開來看。不知道大家對於這樣的改變有什麼感覺呢？喜歡、或不喜歡！？可以在此文留言回應喔^O^

　現在就將我做的調整一一記錄於下：

　Update→ 2007/09/05 am09:59 更換favicon.ico圖，大家可以看看網址列的小圖變囉^_*

01.　撤換掉右上方的AdSense for Search，改成Google Ajax Search的插件，大家可以試著搜尋站內文章，就能知道搜尋結果以何種樣貌呈現喔！

　02.　將首頁的《關於我》改設為只在首頁和分頁顯示，其他頁面不顯示；《分頁》部份則改設為單篇頁面不顯示，其他頁面皆顯示。這兩部位原本是所有頁面都顯示的，但單篇頁面我想凸顯文章的各項資訊，於是就做了更動囉～

　03.　接著就是最大的改變─ ─ Tab Pane 的JS效果，相信大家一看就知道和原來的版面最大的不同在哪兒，所以這裡我就不贅言了。

　或許你會納悶，原本剛換的時候不就已經很好看了，為甚麼還要多加這個JS效果呢？但其實是因為我想擺設的小東西太多，雖然版面是三欄的，可是如果擺上許多小玩意，那版面還是太過雜亂的，再加上我從很久以前在hhalloyy那裡看到他的介紹，就非常驚豔這種效果，所以就趁著這次機會一併加上囉：）

　好啦，雖然hhalloyy和ED都曾介紹過這個效果，但既然我提到了它，也就不能免俗的為大家做個簡介囉，現在就來告訴大家這個名為Tab Pane 的JS效果該如何加載於個人網頁或部落格吧，前提是你是自架網站或部落格的，一般BSP無法達成喔！

　我以下所講述的是專門給使用者看的，如果你是其他平台（MT、LT……）或個人網站使用者，就請你觀看原作者的使用說明囉！

　首先當然就是先下載這個JS元件啦～ 請按此下載，或是直接去原作者網頁自行下載。

　接著請你把下載回來的元件壓縮檔解壓、並以ftp上傳至你的主機空間或是個人網頁空間，請記得要放在安裝目錄的-content\裏喔，然後把你現在所使用的的header.檔找出來，在

  1. </head>

之前加上以下程式碼↓

  1. <script type="text/javascript" src="js/tabpane.js"></script>
  2. <link type="text/css" rel="StyleSheet" href="css/tab.webfx.css" />

　記得把「src」和「href」之後的部份換成你這兩個檔案實際的存放路徑（URL），雖然hhalloyy說為了怕你在更換主機商或是網頁空間之後出錯，還得回頭修改，所以他推薦把這兩個部位改成

  1. <?php bloginfo('template_directory'); ?>

　不過我在用了這個方法之後，反而無法顯示效果，所以我還是以存放路徑的URL做替換，你們可以自己試試看～

　再來請你把以下程式碼放在你想添加 Tab Pane 的JS效果的地方，我是放在sidebar的地方。

  1. <div class="tab-pane" id="tab-pane-1">
  2. <script type="text/javascript">
  3. var tabPane1 = new WebFXTabPane( document.getElementById( "tab-pane-1" ) );
  4. </script>
  5.    <div class="tab-page" id="tab-page-1">
  6.   <h2 class="tab">General</h2>
  7.   <script type="text/javascript">
  8.   tabPane1.addTabPage( document.getElementById( "tab-page-1" ) );
  9.   </script>
  10.   This is text of tab 1. This is text of tab 1.
  11.   This is text of tab 1. This is text of tab 1.
  12.    </div>
  13.    <div class="tab-page" id="tab-page-2">
  14.   <h2 class="tab">Privacy</h2>
  15.   <script type="text/javascript">
  16.   tabPane1.addTabPage( document.getElementById( "tab-page-2" ) );
  17.   </script>
  18.   This is text of tab 2. This is text of tab 2.
  19.   This is text of tab 2. This is text of tab 2.
  20.    </div>
  21. </div>

　這段程式碼你要修改的地方只有

  1. <h2  class="tab"></h2>

之間的部分，那裡填上你要使用的標題名稱。

　至於

  1. This is text of tab 2. This is text of tab 2.

這段，則改成你想在 Tab Pane 顯示的內容，如果你想多加Tab，那就多加程式碼，不過要記得按次序加入喔！


　文ｂｙ覺非／不斷的修改是為了越來越好啊～

相關文章


留下評論 訂閱評論RSS | 引用網址 | 標籤：、、、、、、、、、 |

4 則迴響

  • At 2007.09.05 09:28, Andy Liu said:

    真的很用心的經營，很棒喔。
    向我自己都荒廢很久喔，哈哈。

    [Reply]
    • At 2007.09.05 09:32, Carrie said:

      呵呵～我只是比較龜毛，想要把新的版面做到最符合自己的需求罷了，你的部落格版面比我還常換啊，怎會說荒廢呢^_*

      [Reply]
      • At 2007.09.07 10:06, 史丹汀 said:

        非也改版了耶,真好 :) 不過寬度是不是要再修正一下…
        因為我用寬螢幕,看了還是有橫捲軸耶,
        如果是用百分比設定,那看文章區要不要再減小一點@@”

        [Reply]
        • At 2007.09.07 15:16, Carrie said:

          小史啊，寬度？這個版面會依據觀看者的螢幕寬度自動調整所視大小耶～
          （就是因為這樣，所以我當初才會選用這個新的Theme，呵呵，我是懶人啦：P）

          所以我不知道要修改哪裏，請問一下你的螢幕寬度多少？因為我的筆電也是寬螢幕的，並無橫向捲軸的情形產生呢！我的螢幕解析度為1280×768，你的是多少呢？

          [Reply]
          (Required)
          (Required, will not be published)
          （若看不到驗證碼，請重新整理網頁。）