Кнопки 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 Указывает, должна ли кнопка иметь тени или нет Показать

Следующая статья демонстрирует, как присоединить значки к Вашим кнопкам.

Далее: Массивы JavaScript - Объекты

Смотрите также
Комментарии
Написать

(обязательно)

(обязательно)

Это не спам (обязательно)