Мобильные приложения строятся на простоте коснувшись вещей, которые вы хотите, которое будет отображаться.
Создание кнопки в JQuery Mobile
Кнопка в JQuery Mobile можно создать тремя способами:
- Используя <input> элемент
- С помощью <button> элемент с class="ui-btn"
- Использование <a> элемента с class="ui-btn"
Кнопки в JQuery Mobile автоматически стиле, что делает их привлекательными и пригодны для использования на мобильных устройствах и настольных компьютеров. Мы рекомендуем использовать <a> элемент с class="ui-btn" , чтобы связать между страницами, и <input> или <button> элементы для отправки формы.
Примечание: До версии 1.4, мы использовали data-role="button" атрибут для создания кнопки в JQuery Mobile. С 1.4, каркасные использование CSS классы для кнопок типа (за исключением <input> кнопки).
Кнопки навигации
Чтобы установить связь между страницами с помощью кнопок, используйте <a> элемент с class="ui-btn" :
Сгруппированные Кнопки
JQuery Mobile обеспечивает простой способ для группировки кнопок вместе.
Использование data-role="controlgroup" атрибута вместе с data-type="horizontal|vertical" в элементе контейнера, чтобы указать , нужно ли кнопки группы по горизонтали или вертикали:
пример
<div data-role="controlgroup" data-type="horizontal" >
<a href="#" class="ui-btn">Button 1</a>
<a href="#"
class="ui-btn">Button 2</a>
<a href="#"
class="ui-btn">Button 3</a>
</div>
Попробуй сам " По умолчанию, сгруппированные кнопки сгруппированы по вертикали без полей и пространства между ними. И только первая и последняя кнопка имеет закругленные углы, что создает хороший внешний вид, когда сгруппированы вместе.
Кнопки Назад
Чтобы создать кнопку Назад, используйте data-rel="back" атрибут (примечание: это проигнорирует якоря href значение):
Встроенные кнопки
По умолчанию, кнопки занимают всю ширину экрана. Если вы хотите кнопку , которая только так велик , как его содержание, или если вы хотите две или более кнопок появляются бок о бок, добавьте "ui-btn-inline" класс:
Другие классы CSS для ссылки Кнопки
| Класс | Описание | пример |
|---|---|---|
| ui-btn-b | Изменяет цвет кнопки на черном фоне с белым текстом (по умолчанию серый фон с черным текстом). | Попробуй |
| ui-corner-all | Добавляет закругленные углы к кнопке | Попробуй |
| ui-mini | Делает кнопку меньше | Попробуй |
| ui-shadow | Добавляет тени к кнопке | Попробуй |
Если вы хотите использовать более одного класса, разделите каждый класс с пространством, как: class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow"
По умолчанию, <input> кнопки имеют тени и закругленные углы. <a> И <button> элемент нет.
Для получения полной справки классов CSS для общих стилей, посетите наш JQuery Мобильный CSS Классы Reference .
В следующей главе показано, как прикрепить иконки для кнопок.