jquery mobile：如何將圖片插入按鈕

Question

我有這樣的問題。我有按鈕：

<button type="button" data-theme="c">test</button> 

在這裏，而不是文本TEST我想插入我的圖片：

<img src="resources/images/test-icon.png" align="middle" /> 

我嘗試了幾個選項，但我無法找到解決方案。

謝謝你的幫助！

Answer 1

因爲您選擇了該標籤，我會假設您使用的是jQuery手機風格的按鈕，而不是經典的本地瀏覽器按鈕版本。

如果是這種情況，您的示例將永遠不會工作。同時，Amits例子是一個很好的例子，它永遠不會在jQuery Mobile中工作。當jQuery mobile設置一個按鈕時，它會隱藏舊的按鈕並從標籤中創建一個新按鈕。然後它將按鈕文本並將點擊事件重定向到真實（現在隱藏）按鈕。

我們可以使用這些信息來修改新的按鈕樣式。不幸的是，在輸入按鈕和輸入提交的情況下，不能沒有javascript。

所以我會告訴你另一種解決方案。

jQuery的Moible按鈕也可以構建這樣的：

<a data-role="button" class="custom-button">Button text goes here</a> 

我們可以很容易地通過純CSS修改此按鈕，在這裏是一個工作的jsfiddle例如：http://jsfiddle.net/Gajotres/2C8Rj/

HTML：

<div data-role="page" id="index"> 
    <div data-theme="a" data-role="header"> 
     <h3> 
      First Page 
     </h3> 
     <a href="#second" class="ui-btn-right">Next</a> 
    </div> 

    <div data-role="content"> 
     <a data-role="button" class="custom-button"></a> 
    </div> 

    <div data-theme="a" data-role="footer" data-position="fixed"> 

    </div> 
</div> 

CSS：

.custom-button { 
    height: 50px !important; 
} 

.custom-button .ui-btn-inner { 
    padding: 0 !important;  
} 

.custom-button .ui-btn-inner .ui-btn-text { 
    display: block !important; 
    height: 50px !important; 
    width: 100% !important; 
    background-image: url('http://shop.ascd.org/images/red-error.gif') !important; 
    background-repeat: no-repeat !important; 
    background-position: center !important; 
}