Личный блог Артёма Санникова

Подробные пошаговые обучающие уроки по направлениям: cms системы, локальные сервера, социальные сети и операционные системы.

Категории сайта

› Кнопки в jQuery Mobile
Мельникова 620000 Россия, Свердловская обл., г. Екатеринбург. +7 953 039 559 1 info@artemsannikov.ru

Кнопки в jQuery Mobile

Дата публикации:  / Категория: jQuery Mobile / Автор: 

Кнопки в jQuery Mobile

Кнопки являются универсальным средством связи страниц и взаимодействия пользователя с интерфейсом. В роли кнопок могут выступать не только специализированные кнопки — 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>

Результат:

Базовая разметка кнопок в jQuery Mobile

2. Углы

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

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

Результат:

Скругление углов у кнопок в  jQuery Mobile

3. Тень

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

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

Результат:

Тень у кнопок в jQuery Mobile

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

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

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

Результат:

Кнопки в одну строку фреймворк jQuery Mobile

2. Углы

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

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

Результат:

Скругление углов у кнопок в  jQuery Mobile

3. Тень

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

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

Результат:

Тень у кнопок в jQuery Mobile

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

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

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

Результат:

Кнопки в одну строку фреймворк jQuery Mobile

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>

Результат:

Цветовые схемы для кнопок в jQuery Mobile

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>

Результат:

Иконки для кнопок в jQuery Mobile

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>

Результат:

Положение иконок у кнопок в jQuery Mobile

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>

Результат:

Тень иконок у кнопок в jQuery Mobile

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>

Результат:

Отключённые кнопки в jQuery Mobile

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

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

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

Результат:

Кнопки без оформления в jQuery Mobile

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>

Результат:

Иконки для кнопок в jQuery Mobile

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>

Результат:

Положение иконок у кнопок в jQuery Mobile

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>

Результат:

Тень иконок у кнопок в jQuery Mobile

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>

Результат:

Отключённые кнопки в jQuery Mobile

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

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

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

Результат:

Кнопки без оформления в jQuery Mobile

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

Сайт: ArtemSannikov.ru

Tags: , , .

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *