Стилизация кнопок jQueryMobile 1.4 как 1.3

Question

Я обновился до JQM 1.4, но мне понравилась тема 1.3 гораздо лучше. Есть классическая тема в 1.4, которая имеет те же цвета. Но навигационные кнопки в углах (заголовок) выглядят совершенно иначе.

Можно ли воспроизвести такой же внешний вид для этих кнопок в 1.4?

Answer 1

Трудно получить его в точности как расширенные кнопки jQM 1.3 с использованием вложенных диапазонов, которых больше нет в 1.4. Тем не менее, с небольшим количеством CSS вы можете получить довольно близко. Учитывая заголовок с кнопками:

<div data-role="header"  data-theme="b">
   <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-left"> Home </a>
    <h1>Theme B</h1>
  <a href="#" class="btn_round ui-btn ui-shadow ui-corner-all ui-icon-home ui-btn-icon-right"> Contact Us </a>
</div>

Назначьте новый класс кнопкам (в моем примере btn_round), а затем создайте следующий CSS:

.btn_round
{
    -moz-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    -webkit-box-shadow: 0px 1px 0 rgba(255,255,255,0.3);
    box-shadow: 0px 1px 0 rgba(255,255,255,0.3);

    -moz-border-radius:             1.5em !important;
    -webkit-border-radius:          1.5em !important;
    border-radius:                  1.5em !important;
    background-image: linear-gradient(rgb(68, 68, 68), rgb(45, 45, 45));
    background-origin: padding-box;
    background-size: auto;
    border-color: rgb(17, 17, 17);
    box-shadow: rgba(255, 255, 255, 0.298039) 0px 1px 0px 0px;
    text-shadow: rgb(17, 17, 17) 0px 1px 1px;   
}
.btn_round:after{
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
    box-shadow: rgba(255, 255, 255, 0.4) 0px 1px 0px 0px;
}

Это добавляет градиентный фон, закругленные углы и тени, которые присутствовали в 1.3.

Вот рабочая ДЕМО

ПРИМЕЧАНИЕ: демо включает CSS как для темной темы, так и для светлой темы. Настройте CSS, чтобы получить желаемый вид.