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

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


如果遇到內容比較長的文章時，老是需要捲動網頁對於閱讀上並不是很方便，而 Bigfoot.js 就是一個可以解決這種困擾的 jQuery plugin，它可以讓文章的直接以對話方塊的方式呈現本文中1（請用滑鼠點一下），大大改善了讀者的使用者經驗（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)
更新設定值，並傳回舊的值。