jQuery Mobile是一個(gè)流行的移動(dòng)應(yīng)用程序框架，提供豐富的UI組件和交互效果來開發(fā)移動(dòng)應(yīng)用程序。其中一個(gè)最常用的UI組件是按鈕，jQuery Mobile從設(shè)計(jì)上提供了許多不同樣式的按鈕，但在某些情況下，這些樣式不滿足我們的需求。 在這種情況下，我們需要重寫jQuery Mobile按鈕。jQuery Mobile使用兩個(gè)不同的類名來定義按鈕樣式：ui-btn和ui-btn-inner。我們可以通過創(chuàng)建自己的CSS規(guī)則來替換這些類名，從而實(shí)現(xiàn)自定義樣式。下面是一個(gè)示例代碼，演示如何將jQuery Mobile按鈕重寫為紅色：

在HTML文件中，我們需要定義兩個(gè)按鈕元素：

<button id="custom-btn1">Button 1</button>
<button id="custom-btn2">Button 2</button>

然后，在CSS文件中，我們定義按鈕的樣式：

/* 自定義按鈕樣式 */
#custom-btn1 {
background-color: red;
color: white;
border: none;
}
#custom-btn2 {
background-color: white;
color: red;
border: 2px solid red;
}
/* 替換jQuery Mobile的btn和btn-inner類 */
#custom-btn1.ui-btn,
#custom-btn1.ui-btn:hover,
#custom-btn1.ui-btn:active,
#custom-btn1.ui-btn:focus,
#custom-btn1.ui-btn-inner {
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
#custom-btn1.ui-btn:after,
#custom-btn2.ui-btn:after {
display: none !important;
}
#custom-btn1.ui-btn-inner {
color: white !important;
text-shadow: none !important;
}
#custom-btn2.ui-btn,
#custom-btn2.ui-btn:hover,
#custom-btn2.ui-btn:active,
#custom-btn2.ui-btn:focus,
#custom-btn2.ui-btn-inner {
background-color: transparent !important;
border: 2px solid red !important;
box-shadow: none !important;
}
#custom-btn2.ui-btn:after {
background-color: white !important;
}
#custom-btn2.ui-btn-inner {
color: red !important;
text-shadow: none !important;
}

在上面的代碼中，我們?yōu)槊總€(gè)按鈕元素定義了唯一的ID，然后使用CSS選擇器替換了jQuery Mobile的ui-btn和ui-btn-inner類。這些規(guī)則中的!important聲明可以確保我們的樣式優(yōu)先于基本樣式。

通過更新按鈕元素的樣式和使用自定義的CSS規(guī)則，我們可以很容易地改變jQuery Mobile按鈕的樣式，以適應(yīng)我們的應(yīng)用程序需求。