jQuery Mobile - Footer

與頁首一樣，也可以在頁尾部份加入按鈕，但與頁首不同的是，頁尾的按鈕依序由左至右排列，例如：

  

    
Header
  
  

    ...
  
  

    Back
    Home
    Search
  

【執行結果】

亦可加入預設圖示：

  

    
Header
  
  

    ...
  
  

    Back
    Home
    Search
  

【執行結果】

若加入data-iconpos="notext"屬性，則僅顯示圖示：

  

    
Header
  
  

    ...
  
  

    Back
    Home
    Search
  

【執行結果】

此外與頁首不同的是，可使用data-role="controlgroup"屬性，群組數個頁尾按鈕：

  

    
Header
  
  

    ...
  
  

    

      Back
      Home
      Search
    
  

【執行結果】

除此之外，亦可使用HTML表單物件，以下範例示範<select>選項：

  

    
Header
  
  

    ...
  
  

    
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
    
  

【執行結果】

右圖為點選選項時的效果：

若內文部份的內容過多時，當向上滑動螢幕時，將導致頁尾部份跟著向下捲動而消失，為避免此情況發生，可加入data-position="fixed"屬性，以固定頁尾部份，以下範例同時固定頁首與頁尾部份：

  

    上一頁
    
Books
    下一頁
  
  

    

      
JavaFX 8技術手冊.
      
JavaFX遊戲程式設計.
      
Visual C++ Web程式設計.
      
深入研究JavaFX 2.
      
深入研究Java Swing.
      
完全探索網路程式設計 - 使用Java.
      ...
    
  
  

    Back
    Home
    Search
  

【執行結果】

特別是在顯示尺寸較大的相片時，固定頁首與頁尾部份，可得到較佳的效果，例如：

【參考資料】

[1] XAMPP：https://www.apachefriends.org
[2] jQuery Mobile：http://jquerymobile.com
[3] jQuery：http://jquery.com

© Chia-Hui Huang