Кнопки в jQuery Mobile
Кнопки являются универсальным средством связи страниц и взаимодействия пользователя с интерфейсом. В роли кнопок могут выступать не только специализированные кнопки — button, но и обычные ссылки — a (они должны быть оформлены строго по спецификации фреймворка).
Для того, чтобы создать кнопку по стандартам фреймворка jQuery Mobile необходимо добавить классы стилей в элементы a и button.
Содержание:
- Базовая разметка;
- Углы;
- Тень;
- Inline (кнопки в одну строку);
- Цветовые схемы;
- Иконки;
- Положение иконок;
- Тень иконок;
- Отключённые кнопки;
- Нативные кнопки.
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, Кнопки, Мобильная разработка.
