Кнопки jQuery Mobile

Мобильные приложения строятся на удобстве работы с сенсорными 操作

Создание кнопок в jQuery Mobile

В jQuery Mobile кнопки можно создать тремя способами:

  • Использование элемента <button>
  • Использование элемента <input>
  • Использование элемента <a> с атрибутом data-role="button"

<button>

<button>кнопка</button>

Попробуйте сами

<input>

<input type="button" value="Кнопка">

Попробуйте сами

<a>

<a href="#" data-role="button">Кнопка</a>

Попробуйте сами

Совет:Кнопки jQuery Mobile автоматически получают стили, что улучшает их интерактивность и доступность на мобильных устройствах. Мы рекомендуем вам использовать элемент <a> с атрибутом data-role="button", чтобы создавать ссылки между страницами, а элементы <input> или <button> для отправки форм.

Навигационные кнопки

Если вы хотите связать страницы через кнопку, пожалуйста, используйте элемент <a> с атрибутом data-role="button":

Пример

<a href="#pagetwo" data-role="button">Перейти на страницу два</a>

Попробуйте сами

Внутренние кнопки

По умолчанию, кнопка занимать всю ширину экрана. Если вам нужно, чтобы кнопка адаптировалась к своему содержимому, или если вам нужно, чтобы два или более кнопок отображались рядом, добавьте data-inline="true":

Пример

<a href="#pagetwo" data-role="button" data-inline="true">Перейти на страницу два</a>

Попробуйте сами

Комбинированные кнопки

jQuery Mobile предоставляет простые методы для комбинирования кнопок.

Пожалуйста, используйте атрибут data-role="controlgroup" вместе с data-type="horizontal|vertical", чтобы определить, как должны быть组合ированы кнопки:

Пример

<div data-role="controlgroup" data-type="horizontal">
  <a href="#anylink" data-role="button">Кнопка 1</a>
  <a href="#anylink" data-role="button">Кнопка 2</a>
  <a href="#anylink" data-role="button">Кнопка 3</a>
</div>

Попробуйте сами

Совет:По умолчанию, группировка кнопок вертикальная, между ними нет внешних отступов и пробелов. И только первая и последняя кнопки имеют закругленные углы, что создает красивый вид.

Кнопка назад

Если вы хотите создать кнопку назад, пожалуйста, используйте атрибут data-rel="back" (его значение href будет пропущено):

Пример

<a href="#" data-role="button" data-rel="back">Вернуться</a>

Попробуйте сами

Более часто используется для кнопок атрибут data-*

Атрибут Значение Описание Пример
data-corners true | false Определение наличия закругленных углов у кнопки. Тест
data-mini true | false Определение того, является ли кнопка мелкой. Тест
data-shadow true | false Определение наличия тени у кнопки. Тест

Для получения полной информации о атрибутах data-* jQuery Mobile, пожалуйста, посетите наш Референсная книга jQuery Mobile Data.

Демонстрация того, как добавить иконку к кнопке.