Bigfoot.js：以對話方塊顯示網頁文章註解的 jQuery Plugin

Bigfoot.js 是一個可以使用對話方塊顯示網頁文章註解的 jQuery Plugin，讓讀者在閱讀時不用捲動網頁即可即時閱讀註解。

一般在網頁或是部落格中撰寫文章時，有時後會遇到需要加入註解（註腳）的情況，而讀者在閱讀含有註解的文章時，通常會需要使用捲軸（或是以超連結的方式）往下捲動網頁到下方的註解處來閱讀，閱讀完註解再回到本文繼續閱讀。

如果遇到內容比較長的文章時，老是需要捲動網頁對於閱讀上並不是很方便，而 Bigfoot.js 就是一個可以解決這種困擾的 jQuery plugin，它可以讓文章的直接以對話方塊的方式呈現本文中¹（請用滑鼠點一下），大大改善了讀者的使用者經驗（user experience）。

使用 Bigfoot.js

若要在自己的網頁中使用 Bigfoot.js，首先從 GitHub 網站把 Bigfoot.js 函式庫下載下來（直接下載 Zip 格式的壓縮檔會比較方便），其中最重要的就是 bigfoot.min.js 這個 JavaScript 檔與 styles 目錄中的 CSS 設定檔，其餘的檔案在這裡是用不到的。

由於 Bigfoot.js 是以 jQuery 為基礎所發展的函式庫，在引入 Bigfoot.js 的 JavaScript 程式之前，要先引入 jQuery，然後再引入剛剛下載的 bigfoot.min.js：

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/bigfoot.min.js"></script>

如果是 Blogger 部落格的使用者，可以使用 Google 雲端硬碟來放置這些 JavaScript 檔，作法請參考使用 Google 雲端硬碟（Drive）放置 Blogger 部落格使用的 CSS 與 JavaScript 檔案。

接著再加上啟用 Bigfoot.js 的程式碼：

<script type="text/javascript">
  $.bigfoot();
</script>

在本文中需要加入註解的地方，使用這樣的語法：

這是本文中需要加入註解的地方。<sup id="fnref:1"><a href="#fn:1" rel="footnote">1</a></sup>

然後在原來文章放置註解地方，使用這樣的方式撰寫註解：

<div class="footnotes"><ol>
<li class="footnote" id="fn:1">
這是註解文字。<a href="#fnref:1" title="回到本文"> ↩</a><p>
</li>
</ol></div>

這裡我們還是有使用傳統的超連結，如果正常來說 Bigfoot.js 啟用之後，這些超連結是用不到的，只不過加入這些可以讓不支援 CSS 或 JavaScript 的瀏覽器直接顯示傳統型式的註解，雖然註解對話方塊的特效無法使用，但是至少閱讀上是沒問題的。

最後再引入自己喜歡的 CSS 樣式表：

<link href="style/bigfoot.css" rel="stylesheet"></link>

在 Bigfoot.js 的 Demo 網站可以讓你比較各種 CSS 設定的效果，你可以挑選自己喜歡的樣式後，在剛剛下載的 styles 目錄中找到對應名稱的 CSS 設定檔，將其引入後就可以使用了，例如 Bottom 這個樣式就引入 styles/bigfoot-bottom/bigfoot-bottom.css 這個 CSS 檔，其餘以此類推。當然你也可以以這些 CSS 設定檔為基礎，自行設計符合自己網站風格的樣式。

Bigfoot.js 也有提供一些選項讓使用者自訂：

<script type="text/javascript">
  var bigfoot = $.bigfoot(
    {
      deleteOnUnhover: false,
      preventPageScroll: false,
      hoverDelay: 250
    }
  );
</script>

而在呼叫 $.bigfoot() 函數時所傳回的物件（bigfoot）中也有一些方法函數可以使用。以下介紹各種選項與方法函數的使用方式。

選項

這裡列出所有 $.bigfoot() 函數可用的參數與使用方式。

actionOriginalFN: Bigfoot.js 會將註解的內容打包成對話方塊的形式，動態顯示在本文中，而這個參數則是指定原來文章底部的註解該怎麼處理，可用的選項有：hide（使用 display: none;）、delete 與 ignore（讓原來的註解也一併顯示出來），預設為 hide。
activateOnHover: 設定是否要在滑鼠移動到註解按鈕上時，自動顯示註解。預設為 false。
allowMultipleFN: 設定是否允許多條註解同時顯示。預設為 false。
appendPopoversTo: 指定註解文字要被安插在 DOM 的哪個位置，例如指定為 "body" 可以將註解直接加在 body 元素上，這樣的方式可以避免註解的 CSS 樣式設定與網頁中其餘的 CSS 樣式設定互相衝突的問題。如果指定為任何被視為 false 的值，則會將註解文字放在最接近註解按鈕的網頁元素上。預設為 undefined。
deleteOnUnhover: 設定由 activateOnHover 選項自動顯示的註解是否要在滑鼠移開之後就自動消失。預設為 false。
hoverDelay: 若啟用 deleteOnUnhover 選項，則可使用 hoverDelay 設定滑鼠移開多久之後，才讓註解消失，單位為毫秒（milliseconds）。預設為 250。
popoverDeleteDelay: 當註解消失時，這個選項指定在 active 這個 class 移除之後，要過多久才將註解真正從 DOM 移除。這個選項只有在自訂 CSS 的 transitions 時才會用到。
popoverCreateDelay: 設定在註解按鈕被按下（或是滑鼠移動到按鈕上），按鈕作用之後，間隔多久才讓註解顯示。預設為 100。
positionContent: 設定是否要讓 JavaScript 自動控制註解對話方塊跳出的位置。預設為 true。
preventPageScroll: 當註解文字很長的時候，使用者可以利用滑鼠的滾輪在註解對話方塊中上下捲動，而 preventPageScroll 是用來設定當註解的文字捲動到底部時，是否要將滑鼠捲動的事件轉送到瀏覽器的視窗上，讓整個網頁接著捲動。預設為 true。
scope: 以 CSS 的 class 來指定 Bigfoot.js 的套用範圍，例如若指定為 ".bigfoot-active"，則該 $.bigfoot() 就只會影響有指定為 bigfoot-active 這個 CSS class 的網頁元素。
contentMarkup: 指定註解對話方塊的樣板，這個部份一般建議不要更動，因為它會跟 Bigfoot.js 本身的 JavaScript 運作相關。
buttonMarkup: 指定註解按鈕的樣板，這個同樣也會跟 Bigfoot.js 本身的 JavaScript 運作相關，也不建議更動。

方法

$.bigfoot() 函數所傳回的物件中，有包含下列的方法函數可以用來控制註解按鈕與對話方塊：

close(footnotes, timeout): 關閉 footnotes 所指定的註解對話方塊，而 timeout 的作用類似 popoverDeleteDelay。
activate(button): 按下 button 所指定的註解按鈕。
reposition(): 重置所有的註解對話方塊。
getSetting(setting): 取得 setting 所指定的設定值。
updateSetting(setting, newValue): 更新設定值，並傳回舊的值。

這樣的註解對話方塊，對於使用者經驗有很大的改善！ ↩

Bigfoot.js：以對話方塊顯示網頁文章註解的 jQuery Plugin

使用 Bigfoot.js

選項

方法

沒有留言:

張貼留言

熱門文章