JQuery Mobile: как настроить кнопку

Question

Как изменить фон кнопки <a data-role="button"> на мое изображение?Также, как я могу добавить свои собственные значки в верхней части кнопки слева?

Answer 1

Я бы сказал, что рекомендуемым способом настройки кнопки jQuery Mobile является добавление пользовательской темы.

<a data-role="button" data-theme="my-site">Button</a>

Это даст вам больше контроля над различными элементами и состояниями кнопки. Например, вы можете настроить таргетинг на различные состояния кнопки в CSS, написав код для класса, связанного с именем вашей пользовательской темы (они автоматически добавляются в кнопку):

.ui-btn-up-my-site { /* your code here */ }
.ui-btn-hover-my-site { /* your code here */ }
.ui-btn-down-my-site { /* your code here */ }

Имейте в виду, что кнопки по умолчанию состоят из границ, теней и, конечно, градиента фона. Внутри кнопки также есть дополнительные элементы HTML, которые автоматически генерируются платформой. В зависимости от того, что именно вы хотите настроить, вам может потребоваться настроить таргетинг на другие классы внутри кнопки (ui-icon, ui-btn-text, ui-btn-inner и т. Д.).

Вот учебник, который объясняет, как выполнять расширенную настройку кнопок jQuery Mobile. В статьях показано, как выполнить некоторые базовые настройки, как сбросить тему jQuery Mobile и как превратить кнопку по умолчанию во что угодно:

http://appcropolis.com/blog/advanced-customization-jquery-mobile-buttons/

Answer 2

Дайте ссылку классу и используйте CSS для изменения фонового изображения.

<a data-role="button" class="my-button">

...

.my-button {
    background-image: url('images/my-button.png') !important;
}