標籤: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共同學習!