638
jQuery Mobile的學習 jQuery Mobile工具欄、標題欄、頁腳欄的定位學習
程序員都很賴，你懂的！最近在做html5頁麵的開發，主要做智能終端設備的開發。對於內容比較少的頁麵，領導提出了要將頁眉和頁腳定位到網頁的最上方和最下方。對於這樣的要求，其實一點也不過分。但對於新手來說，確實很難，很不容易，今天我就將我學習的內容一起分享一下！
放置頁眉和頁腳的方式有三種：
Inline - 默認。頁眉和頁腳與頁麵內容位於行內。
Fixed - 頁麵和頁腳會留在頁麵頂部和底部。
Fullscreen - 與 fixed 類似;頁麵和頁腳會留在頁麵頂部和底部
請使用 data-position 屬性來定位頁眉和頁腳：
看代碼：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="https://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，我們上截圖：
點擊下載資料：https://download.csdn.net/download/xmt1139057136/7422831
如果你還有不懂，請加qq群：135430763共同學習！
最後更新：2017-04-03 08:26:21