jQuery Mobile的學習 jQuery Mobile工具列、標題列、頁尾欄的定位學習

來源:互聯網
上載者:User

標籤:html5   jquery mobile   智能終端   jqm   fixed   

程式員都很賴,你懂的!
最近在做html5頁面的開發,主要做智能終端裝置的開發。對於內容比較少的頁面,領導提出了要將頁首和頁尾定位到網頁的最上方和最下方。對於這樣的要求,其實一點也不過分。但對於新手來說,確實很難,很不容易,今天我就將我學習的內容一起分享一下!
放置頁首和頁尾的方式有三種:
    Inline - 預設。頁首和頁尾與頁面內容位於行內。
    Fixed - 頁面和頁尾會留在頁面頂部和底部。
    Fullscreen - 與 fixed 類似;頁面和頁尾會留在頁面頂部和底部
請使用 data-position 屬性來定位頁首和頁尾:
 看代碼:
<!DOCTYPE html><html><head><link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css"><script src="http://code.jquery.com/jquery-1.8.3.min.js"></script><script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script></head><body><div data-role="page">  <div data-role="header" data-position="fixed">    <h1>Fixed 頁首</h1>  </div>  <div data-role="content">    <p><b>提示:</b>如果要看到效果,則需要調整視窗大小使捲軸可用。</p>    <p><b>提示:</b>如果捲軸可用,那麼敲擊螢幕將隱藏或顯示頁首/頁尾。效果會根據您在頁面上的位置而變化。</p>      <p>Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling. to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..Some text to enable scrolling..</p>  </div>  <div data-role="footer" data-position="fixed">    <h1>Fixed 頁尾</h1>  </div></div></body></html>
ok,我們上:

 點擊下載資料:http://download.csdn.net/download/xmt1139057136/7422831
如果你還有不懂,請加qq群:135430763共同學習!

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.