Как убрать CSS с кнопки в диалоге jQuery Mobile

Question

У меня есть две кнопки в диалоге jQM:

<a href="#" data-role="button" data-inline="true">Yes</a><a href="#" data-role="button" data-inline="true" data-rel="back">No</a>

jQM добавляет несколько стилей для кнопок, например:

ui-btn-inner ui-btn-corner-all .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br, .ui-corner-top, .ui-corner-bottom, .ui-corner-right, .ui-corner-left, .ui-corner-all, .ui-btn-corner-tl, .ui-btn-corner-tr, .ui-btn-corner-bl, .ui-btn-corner-br, .ui-btn-corner-top, .ui-btn-corner-bottom, .ui-btn-corner-right, .ui-btn-corner-left, .ui-btn-corner-all

Как мне убрать весь этот стиль, чтобы я сам мог стилизовать кнопки?

Answer 1

Вы должны переопределить их, используя определяемый вами css, вместо того, чтобы вырезать их, потому что вы не знаете, какая функциональность в jquery-ui.js зависит от присутствия этих классов.

сказанное:

$('a[data-role="button"]').removeClass('ui-btn-inner ui-btn-corner-all ....');

способ переопределить стили, это создать свой собственный файл css и добавить ссылку на него после jquery-ui.css, для каждого класса, который вы хотите переопределить, просто поместите свой собственный стиль.

Answer 2

добавьте data-role = "none" к кнопке, и JQM оставит ее в покое и не стилизует ее.