JQuery Mobile автоматически стиль HTML-формы, чтобы заставить их выглядеть привлекательным и приятной на ощупь.
jQuery Mobile Form Структура
JQuery Mobile использует CSS для стиля элементов HTML-форм, что делает их привлекательными и простыми в использовании.
В JQuery Mobile можно использовать следующие элементы формы:
- Текстовые входы
- Поиск Входы
- Радио-кнопки
- Флажки
- Выберите меню
- Ползунки
- Раскладные тумблеров
При работе с JQuery Mobile форм, которые вы должны знать:
- <form> элемент должен иметь способ и атрибут действия
- Каждый элемент формы должен иметь уникальный атрибут "ID". Идентификатор должен быть уникальным по страницам на сайте. Это потому, что одной страницы навигации модель JQuery Mobile позволяет много различных "страницы", чтобы присутствовать одновременно
- Каждый элемент формы должен иметь метку. Установите для атрибута метки , чтобы соответствовать идентификатор элемента
пример
<form method="post" action="demoform.asp" >
<label for="fname"> First name: </label>
<input
type="text" name="fname" id="fname" >
</form>
Попробуй сам " Совет: Используйте заполнитель , чтобы указать краткую подсказку , которая описывает ожидаемое значение поля ввода:
пример
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Попробуй сам " Совет: Чтобы скрыть метку, используйте "ui-hidden-accessible" класс. Это часто используется, когда вы хотите атрибут заполнителем данного элемента, чтобы служить в качестве метки:
пример
<label for="fname"
class="ui-hidden-accessible" ">First name:</label>
<input
type="text" name="fname" id="fname" placeholder="First name..." >
Попробуй сам " Совет: Если вы хотите "clear button" (значок X на правой стороне поля ввода , которое очищает содержимое поля), добавить данные чистой-BTN = "истина" атрибута:
пример
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-clear-btn="true" >
Попробуй сам " "clear button" могут быть добавлены на любом <input> элемент, за исключением <textarea> . Поисковые поля имеют этот атрибут установлен в "true" по умолчанию - изменить его, просто указать data-clear-btn="false" .
JQuery Mobile Form Кнопки
Кнопки в формах кодируются с помощью стандартного HTML <input> элементов (кнопки, сброс, подать). Они автоматически стиле, что делает их привлекательными и простыми в использовании на мобильных устройствах и настольных компьютеров:
пример
<input type="button" value="Button">
<input type="reset" value="Reset
Button">
<input type="submit" value="Submit Button">
Попробуй сам " Чтобы дополнительно стиль кнопки <INPUT>, используйте любой из данные- * атрибутов, перечисленных в таблице ниже:
Жирный значение указывает на значение по умолчанию.
| Атрибут | Стоимость | Описание |
|---|---|---|
| data-corners | true | false | Указывает, следует ли кнопка имеют закругленные углы или нет |
| data-icon | Icons Reference | Задает значок кнопки |
| data-iconpos | left | right | top | bottom | notext | Задает положение значка |
| data-inline | true | false | Указывает, следует ли кнопка быть инлайн или нет |
| data-mini | true | false | Указывает, следует ли кнопка быть маленьким или нет |
| data-shadow | true | false | Указывает, следует ли кнопка иметь тени или нет |
Включить или исключить атрибут (ы) вы хотите / не хотите:
<input type="submit" value="Submit" data-icon="check"
data-iconpos="right" data-inline="true">
Попробуй сам " Field Containers
Для того, чтобы этикетки и элементы формы выглядят должным образом на широких экранах, обернуть <div> или <fieldset> элемент с "ui-field-contain" класса вокруг этикетки / элемента формы:
пример
<form method="post" action="demoform.asp">
<div class="ui-field-contain" >
<label for="fname">First name:</label>
<input
type="text" name="fname" id="fname">
<label for="lname">Last
name:</label>
<input type="text" name="lname" id="lname">
</div>
</form>
Попробуй сам " "ui-field-contain" метки стиля класса и элементы формы , основанные на ширине страницы. Когда ширина страницы больше, чем 480px, он автоматически поместить ярлык на той же строке, что и элемент управления формы. При менее 480px, метка будет помещена над элементом формы.
Совет: Для того, чтобы предотвратить JQuery Mobile для автоматического типа tappable / интерактивными элементами, использовать data-role="none" атрибута:
пример
<label for="fname">First name:</label>
<input type="text" name="fname"
id="fname" data-role="none" >
Попробуй сам " Форма представления в JQuery Mobile
JQuery Mobile будет автоматически обрабатывать данные формы с помощью AJAX, и будет пытаться интегрировать ответ сервера в DOM приложения.