《jQuery、jQuery UI及jQuery Mobile技巧與示例》——9.11 技巧：在頁面下方添加footer

本節書摘來自異步社群《jquery、jquery ui及jquery mobile技巧與示例》一書中的第9章，第9.11節，作者：【荷】adriaan de jonge , 【美】phil dutson著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

在到目前為止的示例中，你已經見過header和content的div了。同樣地，你也可以定義footer的div。當使用footer時，你需要考慮兩件事情：footer在螢幕上的位置是什麼，以及在footer裡面顯示什麼内容？代碼清單9-12在頁面的下方添加了一個包含幾個按鈕的footer。

代碼清單9-12　在頁面下方顯示包含按鈕的footer

第一個按鈕是在第30行建構的。添加一個簡單的連結就足以建立一個新的按鈕。在footer中的連結預設會被轉換成按鈕。第31～36行用常見的方式添加了兩個按鈕，每個按鈕都帶一個自定義圖示。

這個示例中的content的div幾乎是空的。你可以添加更多的内容，看看當向上和向下滾動時footer的位置會發生什麼變化。footer将會在你添加的内容之下并且停留在頁面的下方。

你也可建立按鈕組，而不是單獨的按鈕。預設情況下，按鈕組中的按鈕是垂直排列的，添加data-type="horizontal"，可以在單個水準矩形框中顯示按鈕，最右邊和最左邊的按鈕顯示為圓角。代碼清單9-13示範了結果。

代碼清單9-13　在footer中顯示一組按鈕

第30～35行在單獨的按鈕的外圍加了一個帶有data-role="controlgroup"和data-type="horizontal"屬性的div。