jquery mobile: Как вставить изображение в кнопку

Question

У меня есть такая проблема. У меня есть кнопка:

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

А вот вместо текста ТЕСТ Я хотел бы вставить свою фотографию:

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

Я попробовал несколько вариантов, но я не смог найти решение.

Благодарим за помощь!

Answer 1

Если вы выбрали этот тег, я бы предположил, что вы используете мобильные кнопки стиля jQuery, а не классическую версию браузера.

Если это так, ваш пример никогда не будет работать. Также в то время как Amits пример хороший, он никогда не будет работать в jQuery Mobile. Когда jQuery mobile стилирует кнопку, она запускает старый и создает новый из тега. Затем он принимает текст кнопки и перенаправляет события щелчка на настоящую (теперь скрытую) кнопку.

Мы можем использовать эту информацию для изменения новых стилей кнопок. К сожалению, в случае кнопки inputt и ввода submit это невозможно сделать без 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; 
}