2014年9月1日 星期一

[小工具] jQuery 展開收合效果安裝懶人包

[小工具] jQuery 展開收合效果安裝懶人包

Wayne Fu 0 A+
「展開收合效果」是常見的網頁技巧,最早是在 +Mark X 的「留言版提示 - jQuery 展開收合效果」看到這個效果。

如果一個頁面只有一處需要用這個效果,那麼請直接參考 mark 這篇文章即可;如果同一網頁有多處需要展開收合時,這個功能在使用上會稍微麻煩一些,需要每一處個別設定 id、個別執行不同的 js 程式碼,對於不熟悉程式碼的讀者,可能會不知如何下手。

因此有這樣的需求時,可使用本文提供的懶人包,就能批次搞定多處的程式碼。第一次需要花點心思設計樣式,不過以後套用就非常方便。


<< 請注意!本篇文章含會員限定內容 >>



一、各種註腳的展現方式


首先介紹一下「展開收合效果」在部落格可運用於何種情境。

對於網站的熟客而言,可能比較有耐心閱讀站長的一字一句,文章內容過長不太會是問題;不過對於新訪客而言,主要目的可能是在網路上尋找資料,希望直接看到重點,廢話越少越好。對於這兩種極端類型的讀者,身為站長的你,會想選邊站呢?還是想兩種都討好呢?

討好所有人很困難、也不一定需要,但這件事的確有兩全其美的方法,就是在文章中使用「註腳」功能。重點的部份提供給沒時間的訪客閱讀,同時頁面也可比較簡潔;而進一步需要補充的部份,使用各種註腳的技巧,讓有時間想要深入了解的讀者點擊按鈕,才顯示隱藏內容。剛好目前就是一個絕佳的舉例──

下面內容是針對只想看重點的讀者,在文章中使用「註腳」大致有三種形式:

  • Footnote 註腳功能外掛
  • Fancybox 燈箱效果
  • jQuery 展開收合效果

想了解細節請點下面這個按鈕展開隱藏內容:

三種註腳型態詳細說明



二、準備動作


以下說明如何簡單安裝 jQuery 展開收合效果,第一部份是 jQuery 主程式碼及 CSS 樣式設計。

在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

請到後台「範本」→「編輯 HTML」,搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
/* 展開收合效果 */
.slide_toggle {
text-align: center;
cursor: pointer;
font-weight: bold;
/* 收合提示字串區塊, 還可加入自訂 CSS 效果 */
line-height: 170%;
background-color: #eed;
border-radius: 7px;
}
.slide_toggle + div {
display: none;
margin-top: 10px;
/* 隱藏註解文字區塊, 請加入自訂 CSS 效果 */
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

  1. .slide_toggle {...} 的區間為收合提示字串的按鈕區塊,可使用這些預設的 CSS 語法,或是自訂 CSS 樣式。
  2. .slide_toggle + div {...} 的區間為事先隱藏起來的註解文字區塊,這個區塊比較大,每個人喜好設計的樣式都不同,建議可參考「讓網頁使用各種特殊文字區塊」系列文,來加入自己的 CSS 樣式。
  3. 最後一行的藍色字串,請先檢查一下範本是否已經安裝過 jQuery,如果有的話,就不必重複安裝這一行。



三、擺放位置


如果要放在文章之中的話,請在文章中任何想要擺放提示文字按鈕、及隱藏註解的位置,安插以下 HTML:

<div class="slide_toggle">填入收合提示文字</div>
<div>填入隱藏的說明內容</div>

  1. 按照紅色字串的說明來置換自己的內容即可。
  2. 舉例來說,一篇文章有五個地方要放註腳,就擺放五組這樣的 HTML 內容。
  3. 如果「收合提示文字」想要放在行內(不要使用一整行的區塊),那麼第一行可改成 <span class="slide_toggle">填入收合提示文字</span>,不過 CSS 也要調整就是了。
  4. 如果按鈕跟隱藏區塊不想連在一起,想隔一段距離(中間穿插其他文字),也是沒問題,但兩行程式碼之間只能有文字,不可有其他 HTML 標籤,否則程式碼就失效了。



四、執行程式碼


最後,要將執行程式碼放在哪裡,端看這個功能的使用頻率。以下是執行的 js 程式碼:


  1. 如果常常使用這個功能的話,比較方便的作法,是將以上程式碼放在範本中 </body> 的前一行。
  2. 如果不常使用的話,那麼放在文章之中就行了,不過每篇要使用此功能的文章,都必須放這段程式碼。請放在文章的最底部。
  3. 如果不喜歡「滑進滑出」這樣的效果,那麼 "slideToggle" 這個字串可改成 "fadeToggle",會變成「淡入淡出」的效果。

想要看一篇文章之中,有多處開合效果,請見以下範例網頁:




五、常見 FAQ


日後若有常見問題,會持續補充在此。

Q1: +Lee Bruce 來信詢問,「展開收合按鈕」能否放在隱藏內容的後面,這樣收合的時候按按鈕比較方便?

Ans: 請依以下步驟修改:
  1. 「二、準備動作」→ </head> 之前的字串 ".slide_toggle + div" 請改為 ".slide_hide"
  2. 「三、擺放位置」→ 這兩行程式碼的位置請互換 → 字串 "<div>填入隱藏的說明內容</div>" 請改為 "<div class="slide_hide">填入隱藏的說明內容</div>"
  3. 「四、執行程式碼」→ 字串 "$(this).next().slideToggle();" 請改為 "$(this).prev().slideToggle();"


jQuery 相關網頁效果:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP