Latest web development tutorials

JQuery Мобильный Кнопка

Мобильные приложения построены на простым нажатием вещей, которые вы хотите отобразить.





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

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

  • Используйте элемент <кнопка>
  • Используйте элемент <вход>
  • Используйте <a> элементы с данными-роли = "Кнопка" из

<Button>

<button>按钮</button>

Попробуйте »

<Input>

<input type="button" value="按钮">

Попробуйте »

<a>

<a href="#" data-role="button" >按钮</a>

Попробуйте »

лампа В JQuery Mobile, кнопка будет автоматически укладка, сделать их более привлекательными и доступность на мобильных устройствах. Мы рекомендуем использовать <a> элементы с "кнопкой" канала передачи данных-роли = используйте <Input> или <кнопка> элемент между страницами формируют представление.


кнопки навигации

Для получения через ссылку кнопки между страницами, используйте <a> элементы с данными-роли = недвижимости "Кнопка":

примеров

< a href="#pagetwo" data-role="button" >访问第二个页面</a>

Попробуйте »


кнопка Инлайн

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

примеров

<a href="#pagetwo" data-role="button" data-inline="true" >访问第二个页面</a>

Попробуйте »


Комбинация кнопок

JQuery Mobile обеспечивает простой способ объединить кнопки.

Пожалуйста, поставьте данных-роль = "controlgroup" атрибутов и типов данных = "горизонтальные | вертикальные" используются вместе, чтобы указать, следует ли горизонтальные или вертикальные комбинации кнопок:

примеров

<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>

Попробуйте »

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


кнопка Назад

Чтобы создать кнопку Назад, использование данных-отн = свойство "назад" (который игнорирует значение HREF якорь):

примеров

<a href="#" data-role="button" data-rel="back" >返回</a>

Попробуйте »


Другие ссылки экземпляра кнопки

категория описание примеров
Пользовательский интерфейс-БТН-б Изменить цвет кнопки черный, шрифт белый (по умолчанию серый фон, черный шрифт). пробовать
UI-краеугольный все Кнопка для добавления закругленных углов пробовать
UI-мини Создание небольших кнопок пробовать
UI-тень Кнопка, чтобы добавить тень пробовать

примечание Если вам нужно больше стилей, каждый класс стиля, разделенных пробелом, например: класс = "щ-BTN UI-БТН-рядный UI-БТН-краеугольный все UI-тень"

По умолчанию кнопка <вход> имеет скругленные углы и эффект тени. <a> и элементы <кнопка> нет.

Более полные классы CSS, смотрите нашу Jquery Мобильный CSS класса Reference Manual .

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