Latest web development tutorials

Мобильная форма Jquery

JQuery Mobile автоматически автоматически добавить стиль в HTML-формы, сделать их более привлекательными, более дружественным на ощупь.


JQuery Мобильный Форма Структура

JQuery Mobile, чтобы использовать CSS для стиля элементов HTML форму, чтобы сделать их более привлекательными и простыми в использовании.

В JQuery Mobile, вы можете использовать следующие элементы формы:

  • поле ввода текста
  • Поиск поля ввода
  • кнопка радио
  • флажок
  • Выберите Меню
  • ползунок
  • Флип тумблер

При использовании JQuery Mobile форму, вы должны знать:

  • <Форма> элемент должен иметь способ и атрибут действия
  • Каждый элемент формы должен иметь уникальный атрибут "ID". Идентификатор должен быть уникальным на всех страницах по всему сайту. Это происходит потому, что Jquery Мобильный одностраничное навигации механизм представлен таким образом, чтобы множество различных страниц одновременно
  • Каждый элемент формы должен иметь метку. Вкладка Настройки для свойств , чтобы соответствовать идентификатор элемента

примеров

<form method="post" action="demoform.html" >
<label for="fname">姓名: </label>
<input type="text" name="fname" id="fname" >
</form>

Попробуйте »

Чтобы скрыть метку, используйте класс UI-скрытый доступный. Это часто используется, когда вы атрибуты элемента в качестве заполнителя тега:

примеров

<form method="post" action="demoform.html">
<label for="fname" class="ui-hidden-accessible" >姓名:</label>
<input type="text" name="fname" id="fname" placeholder="姓名...">
</form>

Попробуйте »

Совет: Мы можем использовать данные чистой-BTN = "истинный " атрибут , чтобы добавить кнопку , чтобы очистить содержимое поля ввода (иконку X справа от поля ввода):

примеров

<Ярлык = "имя_файла"> Имя: </ метка>
<Входной тип = "текст" имя = "имя_файла" ID = "имя_файла" данных четко БТН = "истинный">

Попробуйте »
примечание Кнопка Очистить в поле ввода <вход> используется, но не в <> в текстовое поле. Окно поиска данных четко БТН Значение по умолчанию "истина", вы можете использовать данные чистой-BTN = "ложное", чтобы удалить значок.

JQuery Mobile Forms значок

Форма код кнопки стандартный HTML <вход> элемент (кнопка, сброс, отправить). Они будут автоматически стилей рендеринга, автоматическую адаптацию мобильных устройств к рабочему столу:

примеров

<INPUT TYPE = "Кнопка" значение = "Кнопка">
<Тип входного = "Сброс" значение = "кнопка сброса">
<INPUT TYPE = "Отправить" значение = "Submit Button">

Попробуйте »

Если вам необходимо добавить дополнительные стили в <вход> кнопка, вы можете использовать следующую таблицу данные- * атрибуты:

свойство значение описание
данных-углы правда | ложь Указывает ли кнопка закругленные углы
-Значок данных Значок Справочное руководство Значок кнопки Обозначение
дата-iconpos слева | правая | верхняя | нижняя | notext Укажите расположение значка
Данные-рядный правда | ложь Определяет кнопку инлайн ли
Данные мини правда | ложь Определяет, будет ли кнопка мини
данных тень правда | ложь Определяет, будет ли кнопка, чтобы добавить эффект тени

Кнопка для добавления иконки:

<INPUT TYPE = "Кнопка" значение = "Кнопка">
<Тип входного = "Сброс" значение = "кнопка сброса">
<INPUT TYPE = "Отправить" значение = "Submit Button">

Попробуйте »

поле Контейнер

Для того, чтобы этикетки и элементы формы выглядят более подходящими для широкого экрана, пожалуйста, или <FIELDSET> элемент, окружающий метка / элемент формы используется с "UI-поля содержат" класс <DIV>:

примеров

<form method="post" action="demoform.php">
  <div class="ui-field-contain" >
    <label for="fname">姓:</label>
    <input type="text" name="fname" id="fname">
    <label for="lname">姓:</label>
    <input type="text" name="lname" id="lname">
  </div>
</form>

Попробуйте »

лампа Пользовательский интерфейс-поля содержат классы, основанные на ширине страницы, чтобы добавить стили для этикетки и формы контроля. Когда ширина страницы больше, чем 480px, он будет автоматически поместить контроль этикетки и формы на той же линии. Когда ширина страницы меньше, чем 480px, метка будет размещена на верхних элементов формы.

Совет: Для того, чтобы предотвратить JQuery Mobile автоматически добавляет стиль интерактивных элементов, использование данных роли = "нет" атрибут:

примеров

<label for="fname">姓名:</label>
<input type="text" name="fname" id="fname" data-role="none" >

Попробуйте »

лампа JQuery Mobile в форме представления

JQuery Mobile автоматически обрабатываются AJAX отправки формы, а сервер интеграции пытается ответить на DOM приложения.