Кнопки являются универсальным средством связи страниц и взаимодействия пользователя с интерфейсом. В роли кнопок могут выступать не только специализированные кнопки — button, но и обычные ссылки — a (они должны быть оформлены строго по спецификации фреймворка).

Для того, чтобы создать кнопку по стандартам фреймворка jQuery Mobile необходимо добавить классы стилей в элементы a и button.

Содержание:

1. Базовая разметка;
2. Углы;
3. Тень;
4. Inline (кнопки в одну строку);
5. Цветовые схемы;
6. Иконки;
7. Положение иконок;
8. Тень иконок;
9. Отключённые кнопки;
10. Нативные кнопки.

1. Базовая разметка

Как уже говорилось ранее, можно создать кнопку двумя способами: из ссылки — a, и специальной конструкции — button. Добавляем специальный класс ui-btn, чтобы система смогла идентифицировать элементы и оформить их с учётом текущих стилей.

<!-- Ссылка -->
<a href="#" class="ui-btn">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn">Button</button>

Результат:

2. Углы

Для скругления углов добавляем класс ui-corner-all.

<!-- Ссылка -->
<a href="#" class="ui-btn ui-corner-all">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn ui-corner-all">Button</button>

Результат:

3. Тень

Чтобы кнопка приобрела тень, добавляем класс ui-shadow.

<!-- Ссылка -->
<a href="#" class="ui-btn ui-shadow">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn ui-shadow">Button</button>

Результат:

4. Inline (кнопки в одну строку)

Иногда бывает, что необходимо разместить кнопки в одну строку. В этом случае необходимо добавить класс ui-btn-inline к каждой кнопке.

<!-- Ссылка -->
<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn ui-btn-inline">Button</button>

Результат:

2. Углы

Для скругления углов добавляем класс ui-corner-all.

<!-- Ссылка -->
<a href="#" class="ui-btn ui-corner-all">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn ui-corner-all">Button</button>

Результат:

3. Тень

Чтобы кнопка приобрела тень, добавляем класс ui-shadow.

<!-- Ссылка -->
<a href="#" class="ui-btn ui-shadow">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn ui-shadow">Button</button>

Результат:

4. Inline (кнопки в одну строку)

Иногда бывает, что необходимо разместить кнопки в одну строку. В этом случае необходимо добавить класс ui-btn-inline к каждой кнопке.

<!-- Ссылка -->
<a href="#" class="ui-btn ui-btn-inline">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn ui-btn-inline">Button</button>

Результат:

5. Цветовые схемы (темы)

Чтобы изменить цветовую схему у кнопки воспользуйтесь классом ui-btn-N, где N — название цветовой схемы.

В примерах ниже используются цветовые схемы a и b, классы для которых соответственно ui-btn-a и ui-btn-b.

<!-- Ссылки -->
<a href="#" class="ui-btn">Anchor - Inherit</a>
<a href="#" class="ui-btn ui-btn-a">Anchor - Theme swatch A</a>
<a href="#" class="ui-btn ui-btn-b">Anchor - Theme swatch B</a>
<!-- Кнопки -->
<button class="ui-btn">Button - Inherit</button>
<button class="ui-btn ui-btn-a">Button - Theme swatch A</button>
<button class="ui-btn ui-btn-b">Button - Theme swatch B</button>

Результат:

6. Иконки

Для того, чтобы добавить иконку к кнопке нужно добавить соответствующий класс ui-icon-NAME, где NAME — имя иконки.

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

<!-- Ссылка -->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button>

Результат:

7. Положение иконок

Для изменения положения иконки добавьте соответствующий класс к кнопке или ссылке.

• ui-btn-icon-top — иконка будет отображаться сверху.
• ui-btn-icon-right — иконка будет отображаться с правого края.
• ui-btn-icon-bottom — иконка будет отображаться снизу.
• ui-btn-icon-left — иконка будет отображаться с левого края.

А если возникнет необходимость создать кнопку в виде иконки, то есть без текста, то обратитесь к классу ui-btn-icon-notext.

<!-- Ссылки -->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Icon only</a>

Результат:

8. Тень иконок

Чтобы добавить тень к какой-либо иконке воспользуйтесь классом ui-shadow-icon.

<!-- Тема по умолчанию -->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon">Anchor</a>
<!-- Тема B -->
<button class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon ui-btn-b">Button</button>

Результат:

9. Отключённые кнопки

Для создания эффекта отключенной кнопки добавьте класс ui-state-disabled или атрибут disabled.

<!-- Ссылка -->
<a href="#" class="ui-btn ui-state-disabled">Disabled anchor via class</a>
<!-- Кнопка -->
<button disabled="">Button with disabled attribute</button>

Результат:

10. Нативные кнопки

Если вам будет нужна кнопка без оформления, используйте атрибут data-role.

<button data-role="none">Button</button>

Результат:

6. Иконки

Для того, чтобы добавить иконку к кнопке нужно добавить соответствующий класс ui-icon-NAME, где NAME — имя иконки.

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

<!-- Ссылка -->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Anchor</a>
<!-- Кнопка -->
<button class="ui-btn ui-icon-delete ui-btn-icon-left">Button</button>

Результат:

7. Положение иконок

Для изменения положения иконки добавьте соответствующий класс к кнопке или ссылке.

• ui-btn-icon-top — иконка будет отображаться сверху.
• ui-btn-icon-right — иконка будет отображаться с правого края.
• ui-btn-icon-bottom — иконка будет отображаться снизу.
• ui-btn-icon-left — иконка будет отображаться с левого края.

А если возникнет необходимость создать кнопку в виде иконки, то есть без текста, то обратитесь к классу ui-btn-icon-notext.

<!-- Ссылки -->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left">Left</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-right">Right</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-top">Top</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-bottom">Bottom</a>
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-notext">Icon only</a>

Результат:

8. Тень иконок

Чтобы добавить тень к какой-либо иконке воспользуйтесь классом ui-shadow-icon.

<!-- Тема по умолчанию -->
<a href="#" class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon">Anchor</a>
<!-- Тема B -->
<button class="ui-btn ui-icon-delete ui-btn-icon-left ui-shadow-icon ui-btn-b">Button</button>

Результат:

9. Отключённые кнопки

Для создания эффекта отключенной кнопки добавьте класс ui-state-disabled или атрибут disabled.

<!-- Ссылка -->
<a href="#" class="ui-btn ui-state-disabled">Disabled anchor via class</a>
<!-- Кнопка -->
<button disabled="">Button with disabled attribute</button>

Результат:

10. Нативные кнопки

Если вам будет нужна кнопка без оформления, используйте атрибут data-role.

<button data-role="none">Button</button>

Результат:

С уважением, Артём Санников

Сайт: ArtemSannikov.ru

Теги: jQuery Mobile, Кнопки, Мобильная разработка.