隨著移動設備的普及，越來越多的網站選擇使用jquery mobile來進行設計和開發。在jquery mobile中，分頁是一個非常重要的組件，讓頁面可以進行分段展示，更加方便用戶瀏覽和操作。
下面我們來看一個jquery mobile分頁的實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jquery mobile分頁實例</title>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>分頁實例</h1>
</div>
<div data-role="content">
<p>這是第一頁的內容。</p>
<div data-role="collapsible-set" data-theme="b" data-content-theme="b">
<div data-role="collapsible">
<h3>折疊菜單</h3>
<p>這是第二頁的內容。</p>
</div>
</div>
</div>
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#">第一頁</a></li>
<li><a href="#">第二頁</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>在代碼中，我們首先引入了jquery mobile的相關文件，然后在body中創建了一個頁面容器。在容器中我們分別創建了一個頁頭，一個內容區域和一個頁腳。在內容區域中，我們使用了jquery mobile提供的collapsible組件，來實現了折疊菜單的效果。在頁腳中，我們使用了navbar組件，來實現了分頁的效果。
以上就是一個簡單的jquery mobile分頁的實例。通過這個實例，我們可以更好地理解jquery mobile分頁組件的使用方法，來優化我們的移動端頁面體驗。
上一篇dockercast
下一篇html5 設置搜素框