easycapture2

不管是自己架設的BLOG或是免費空間的BLOG,
除了最重要的文章內容是吸睛主力外,
版型及版面的編排也是最容易引人注意的重點!
每看到新的外掛或功能,
總是想把它裝在自己的BLOG上,
但版面空間總是有限,
實在無法把所有想要的都加進去,
即使加入目前有的也導致版面有點凌亂… smile29
今天在敗家誌中看到有關JQuery的設定心得分享,
於是就現學現賣且馬上加進我的BLOG中,
老實講,
雖然不了JQuery是啥麼東東… smile2
但按圖索驥與說明設定後,
效果著實令人滿意喔! smile30

原文引用如下:

JQuery Tab控件篇

步驟一:導入jQuery程式庫及調用Tab控件語法

jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。
Tab控件語法於此處下載(1KB),將檔案解壓縮後放至於您主機上或方便運用的空間。
將下面語法複製貼於head開始與結束標籤之間的適當位置:




設置如下圖(請自行修改jquery.tabs.js檔案所放置的位置):
導入jQuery程式庫及調用Tab控件語法
導入jQuery程式庫及調用Tab控件語法

步驟二:加入Tab控件所使用的CSS語法

以WordPress為例,請於style.css內新增下列語法:

/* jquery-tabs格式 */

.jquery-tabs{background-color:#FAFAFA;}
.jquery-tabs p span{background-color:#EFEFEF;border:1px solid
#CCCCCC;cursor:pointer;margin-right:2px;padding:2px 3px;}
.jquery-tabs p span.current{background-color:#FAFAFA; border-bottom-color:#fafafa;}
.jquery-tabs p{border-bottom:1px solid #CCCCCC;font-weight:bold;padding:0 10px 2px;}
.jquery-tabs li{border-bottom:1px dotted #CCCCCC;padding-bottom:3px;margin:5px 0;}
.jquery-tabs .mhot,.jquery-tabs.allhot{display:none;}

步驟三:加入Tab控件語法

範例為三個頁籤,請自行依使用狀況增減。^_^



第一個頁籤標題 第二個頁籤標題 第三個頁籤標題
    第一個頁籤內容(圖片或文字)
    第二個頁籤內容(圖片或文字)
    第三個頁籤內容(圖片或文字)

OK,所有設置完畢,自行檢查試驗jQuery的效果吧。^_^

附註:

  1. jQuery具有跨瀏覽器平台的重要特性,各大瀏覽器均可正常呈現特效。
  2. 諾提供的jQuery檔案,語法部分均有詳細註解,如有需要可依使用需求自行修改。

隱藏迴響欄位篇


請比較上面兩張圖片的差異

通常在部落格要留下迴響時,都會被要求填入一些必填欄位。Ex:姓名(暱稱)、電子信箱、或網址等…
當訪客的瀏覽器有開啟cookies功能時,這些迴響欄位的值將紀錄在該台電腦的cookies中,於第二次再透過同一台電腦瀏覽時,這些「迴響欄位」將會預設進去。

利用這個特性,我們可將曾經留過遺言的訪客的迴響欄位「隱藏起來」,讓版面看起來更簡潔一點喔。^_^
要隱藏欄位的實現方法有很多種,其中諾認為「最簡單、改最少、特效又優」的,就是用jQuery的方式來實現囉。但是以諾對jQuery的程度要談教學不太可能,這篇是單純以調用jQuery特效來隱藏迴響欄位的實作分享,只要照著步驟一步一步做、把語法貼一貼,自然就能成功了

步驟一:導入jQuery程式庫及調用迴響隱藏語法

jQuery程式庫可從官方網站自行下載最新版本(1.3.2)或直接調用Google提供的API。
迴響隱藏語法於此處下載(1KB),將檔案解壓縮後放至於您主機上或方便運用的空間。
將下面語法複製貼於head開始與結束標籤之間的適當位置:




步驟二:加入隱藏及顯示語法

以WordPress為例,於comments.php內輸入訪客資料欄位表單的語法上方,新增下列語法:



%s。歡迎您發表迴響唷!'), $comment_author) ?>

步驟三:加入需執行隱藏及顯示的ID標籤

紅色框為需執行隱藏及顯示的「ID標籤」,藍色框為訪客資料「欄位表單」。

加入需執行隱藏及顯示的ID標籤

OK,所有設置完畢,自行檢查試驗jQuery的效果吧。^_^

附註:

  1. jQuery具有跨瀏覽器平台的重要特性,各大瀏覽器均可正常呈現特效。
  2. 諾提供的jQuery檔案,語法部分均有詳細註解,如有需要可依使用需求自行修改。

本篇文章引用網址: