jQuery Mobile是一個(gè)專注于移動(dòng)設(shè)備Web應(yīng)用的框架，其中包括一個(gè)非常重要的組件就是導(dǎo)航欄（nav），本文將介紹如何使用jQuery Mobile nav組件進(jìn)行導(dǎo)航欄的創(chuàng)建。

<div data-role="navbar">
<ul>
<li><a href="#">選項(xiàng)1</a></li>
<li><a href="#">選項(xiàng)2</a></li>
<li><a href="#">選項(xiàng)3</a></li>
</ul>
</div>

以上代碼將創(chuàng)建一個(gè)三個(gè)選項(xiàng)卡的導(dǎo)航欄，可在data-role="navbar"的div標(biāo)簽下添加選項(xiàng)卡列表，在a標(biāo)簽內(nèi)添加導(dǎo)航名稱和鏈接地址即可。

此外，jQuery Mobile nav組件還有滑動(dòng)菜單和工具欄等不同樣式，可通過添加不同的class來實(shí)現(xiàn)，如下代碼：

<div data-role="footer" data-position="fixed" data-theme="a">
<div data-role="navbar">
<ul>
<li><a href="#" class="ui-btn-active ui-state-persist">選項(xiàng)1</a></li>
<li><a href="#">選項(xiàng)2</a></li>
<li><a href="#">選項(xiàng)3</a></li>
</ul>
</div>  
</div>

以上代碼則是在手機(jī)底部創(chuàng)建了一個(gè)固定位置且主題為a的工具欄，其內(nèi)嵌的導(dǎo)航欄包括了三個(gè)選項(xiàng)卡，其中第一個(gè)為默認(rèn)活動(dòng)狀態(tài)，即class為ui-btn-active ui-state-persist。

通過在不同的元素上添加相應(yīng)的class即可實(shí)現(xiàn)不同樣式的導(dǎo)航欄，使其適應(yīng)移動(dòng)設(shè)備上的不同屏幕大小和分辨率。