Bigfoot.js 是一個可以使用對話方塊顯示網頁文章註解的 jQuery Plugin,讓讀者在閱讀時不用捲動網頁即可即時閱讀註解。
一般在網頁或是部落格中撰寫文章時,有時後會遇到需要加入註解(註腳)的情況,而讀者在閱讀含有註解的文章時,通常會需要使用捲軸(或是以超連結的方式)往下捲動網頁到下方的註解處來閱讀,閱讀完註解再回到本文繼續閱讀。
若要在自己的網頁中使用 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
hide
(使用 display: none;
)、delete
與 ignore
(讓原來的註解也一併顯示出來),預設為 hide
。activateOnHover
false
。allowMultipleFN
false
。appendPopoversTo
"body"
可以將註解直接加在 body
元素上,這樣的方式可以避免註解的 CSS 樣式設定與網頁中其餘的 CSS 樣式設定互相衝突的問題。如果指定為任何被視為 false
的值,則會將註解文字放在最接近註解按鈕的網頁元素上。預設為 undefined
。deleteOnUnhover
activateOnHover
選項自動顯示的註解是否要在滑鼠移開之後就自動消失。預設為 false
。hoverDelay
deleteOnUnhover
選項,則可使用 hoverDelay
設定滑鼠移開多久之後,才讓註解消失,單位為毫秒(milliseconds)。預設為 250
。popoverDeleteDelay
active
這個 class 移除之後,要過多久才將註解真正從 DOM 移除。這個選項只有在自訂 CSS 的 transitions 時才會用到。popoverCreateDelay
100
。positionContent
true
。preventPageScroll
preventPageScroll
是用來設定當註解的文字捲動到底部時,是否要將滑鼠捲動的事件轉送到瀏覽器的視窗上,讓整個網頁接著捲動。預設為 true
。scope
".bigfoot-active"
,則該 $.bigfoot()
就只會影響有指定為 bigfoot-active
這個 CSS class 的網頁元素。contentMarkup
buttonMarkup
$.bigfoot()
函數所傳回的物件中,有包含下列的方法函數可以用來控制註解按鈕與對話方塊:
close(footnotes, timeout)
footnotes
所指定的註解對話方塊,而 timeout
的作用類似 popoverDeleteDelay
。activate(button)
button
所指定的註解按鈕。reposition()
getSetting(setting)
setting
所指定的設定值。updateSetting(setting, newValue)