jQuery Mobile是一個(gè)支持跨多種平臺(tái)的HTML5框架，為開發(fā)移動(dòng)應(yīng)用程序帶來了極大的方便。雖然jQuery Mobile提供了許多默認(rèn)的主題和樣式，但是在某些場(chǎng)景下我們需要自定義樣式來滿足特定的需求，這時(shí)候就需要使用jQuery Mobile的自定義樣式功能。

jQuery Mobile提供了一組CSS樣式類，只需要在需要自定義樣式的HTML元素中增加相應(yīng)的樣式類即可。例如，我們可以使用ui-bar樣式類來自定義頁面頭部和底部的背景顏色。

<div data-role="header" class="ui-bar ui-bar-b">
<h1>自定義樣式</h1>
</div>

上述代碼將在頁面頭部增加了一個(gè)藍(lán)色背景色，并且文字變?yōu)榘咨淖远x樣式。同理，我們可以使用ui-body樣式類來自定義頁面內(nèi)容的背景顏色。

<div data-role="content" class="ui-body ui-body-b">
<p>這是自定義樣式的內(nèi)容區(qū)域</p>
</div>

上述代碼將在頁面內(nèi)容區(qū)域增加了一個(gè)藍(lán)色背景色，并且文字變?yōu)榘咨淖远x樣式。除了ui-bar和ui-body之外，jQuery Mobile還提供了許多其他的樣式類，例如ui-corner-all用于設(shè)置元素的圓角，ui-shadow用于為元素添加陰影效果等等。

除了使用現(xiàn)有的樣式類進(jìn)行自定義樣式外，我們還可以通過修改jQuery Mobile的變量來實(shí)現(xiàn)更加細(xì)致的樣式調(diào)整。例如，通過修改$primary-color變量，我們可以修改默認(rèn)的主題顏色。具體操作如下：

<script>
$(document).on("mobileinit", function() {
$.mobile.changeGlobalTheme("a");
$.extend($.mobile, {
"activeBtnClass": "custom-btn-active",
"activePageClass": "custom-page-active",
"dialog": {
"buttonMarkup": {
"hoverDelay": 100
}
}
});
});
</script>

上述代碼中，通過修改$primary-color變量為“a”來修改默認(rèn)的主題顏色為藍(lán)色，通過修改activeBtnClass和activePageClass來修改按鈕和頁面的活動(dòng)狀態(tài)樣式，通過修改dialog.buttonMarkup.hoverDelay來修改對(duì)話框按鈕的懸停時(shí)間。

通過自定義樣式，我們可以更加自由地定制jQuery Mobile的外觀和風(fēng)格，從而滿足不同場(chǎng)景下的需求。