Кнопка стиля в заголовке мобильного приложения JQuery

У меня есть мобильное приложение JQuery. Я хочу стилизовать кнопки, которые используются в «заголовке». В настоящее время у меня есть следующее:

.my-btn-hdr { text-transform:uppercase; background-color:blue; color:white; min-height:33px; width:93px; }
...

<div id="myPage" data-role="page" data-dom-cache="false">
  <div data-role="header" data-position="fixed">
    <a href="#" data-icon="arrow-l" data-iconpos="notext" data-direction="reverse" class="ui-btn-left jqm-back">Back</a>
    <h1>MyApp</h1>
    <a id="saveButton" href="#" class="ui-btn-right my-btn-hdr">Save</a>
  </div>

  <div data-role="content">        
    ...
  </div>
</div>

Я заметил, что когда страница отображается, добавляются классы CSS ui-btn, ui-btn-up-a, ui-shadow и ui-button-corner-all. Я также заметил, что добавляются атрибуты data-corners="true", data-shadow="true" и data-iconshadow="true".

Как настроить стиль кнопки в заголовке мобильного приложения jquery?


jquery css markup jquery-mobile jquery-mobile-button
person Eels Fan    schedule 25.03.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Все, что вам нужно знать, можно найти в официальной документации: http://api.jquerymobile.com/button/

Например, если вы хотите изменить тему кнопки, вы должны использовать эту функцию:

$( "a" ).buttonMarkup({ theme: "c" });

Вот живой пример: http://jsfiddle.net/Gajotres/eqLVV/

Если что-то не упомянуто в документации, вам нужно будет изменить это через css, вот структура кнопки после того, как jQM отрендерил ее:

<a href="#" data-role="button" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c">
    <span class="ui-btn-inner">
        <span class="ui-btn-text">Anchor</span>
    </span>
</a>

И последнее, если вам нужно вручную изменить css, всегда добавляйте !important в конце строки css на случай, если что-то не работает.

Например, это можно использовать для изменения цвета текста кнопки:

#btn1 .ui-btn-inner .ui-btn-text {
    color: red;
}

и вот пример: http://jsfiddle.net/Gajotres/k5jty/

person Gajotres    schedule 25.03.2013

arrow_upward
0
arrow_downward

Вы можете назначить своей кнопке собственный класс, а затем перезаписать любые стили, которые вы хотите изменить или удалить.

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

CSS:

.my-button {
    background-image: url('images/my-button.png') !important;
}
person Farhan Ahmad    schedule 25.03.2013