JQuery Mobile — Обзор

JQuery Mobile — это структура пользовательского интерфейса, которая основана на jQuery Core и используется для разработки адаптивных веб-сайтов или приложений, доступных на мобильных, планшетных и настольных устройствах. Он использует функции jQuery и jQuery UI для предоставления функций API для мобильных веб-приложений.

Он был разработан командой проекта jQuery в 2010 году и написан на JavaScript.

Зачем использовать jQuery Mobile?

• Он создает веб-приложения, которые будут работать одинаково на мобильных, планшетных и настольных устройствах.

• Он совместим с другими фреймворками, такими как PhoneGap, Whitelight и т. Д.

• Он предоставляет набор удобных для ввода форм и виджетов пользовательского интерфейса.

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

Он создает веб-приложения, которые будут работать одинаково на мобильных, планшетных и настольных устройствах.

Он совместим с другими фреймворками, такими как PhoneGap, Whitelight и т. Д.

Он предоставляет набор удобных для ввода форм и виджетов пользовательского интерфейса.

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

Особенности jQuery Mobile

• Он основан на jQuery Core и фреймворке пользовательского интерфейса «меньше пиши, делай больше».

• Это платформа с открытым исходным кодом, кросс-платформенная и кросс-браузерная.

• Он написан на JavaScript и использует возможности как jQuery, так и jQuery UI для создания мобильных сайтов.

• Он объединяет HTML5, CCS3, jQuery и jQuery UI в единую структуру для создания страниц с минимальными сценариями.

• Он включает в себя навигационную систему Ajax, которая использует анимированные переходы страниц.

Он основан на jQuery Core и фреймворке пользовательского интерфейса «меньше пиши, делай больше».

Это платформа с открытым исходным кодом, кросс-платформенная и кросс-браузерная.

Он написан на JavaScript и использует возможности как jQuery, так и jQuery UI для создания мобильных сайтов.

Он объединяет HTML5, CCS3, jQuery и jQuery UI в единую структуру для создания страниц с минимальными сценариями.

Он включает в себя навигационную систему Ajax, которая использует анимированные переходы страниц.

Преимущества jQuery Mobile

• Легко изучать и разрабатывать приложения, если вы знакомы с функциями HTML5, CSS3.

• Он кросс-платформенный и кросс-браузерный, поэтому вам не нужно беспокоиться о написании различного кода для каждого разрешения устройства.

• Вы можете создать собственную тему, используя ThemeRoller без написания строки кода. Он поддерживает все браузеры HTML5.

• Он использует HTML5 наряду с JavaScript для легкой разработки веб-приложений.

• Он построен таким образом, что позволяет одному и тому же коду автоматически масштабироваться с экрана мобильного телефона на экран рабочего стола.

Легко изучать и разрабатывать приложения, если вы знакомы с функциями HTML5, CSS3.

Он кросс-платформенный и кросс-браузерный, поэтому вам не нужно беспокоиться о написании различного кода для каждого разрешения устройства.

Вы можете создать собственную тему, используя ThemeRoller без написания строки кода. Он поддерживает все браузеры HTML5.

Он использует HTML5 наряду с JavaScript для легкой разработки веб-приложений.

Он построен таким образом, что позволяет одному и тому же коду автоматически масштабироваться с экрана мобильного телефона на экран рабочего стола.

Недостатки jQuery Mobile

• Имеются ограниченные возможности для тем CSS, поэтому сайты могут выглядеть аналогично тем, которые созданы этими темами.

• Приложения, разработанные с использованием jQuery Mobile, работают медленнее на мобильных устройствах.

• Это займет больше времени, когда вы комбинируете jQuery mobile с другими мобильными фреймворками.

• Сложно обеспечить полный индивидуальный визуальный дизайн.

• Все функции устройства не могут быть доступны через JavaScript в браузере.

Имеются ограниченные возможности для тем CSS, поэтому сайты могут выглядеть аналогично тем, которые созданы этими темами.

Приложения, разработанные с использованием jQuery Mobile, работают медленнее на мобильных устройствах.

Это займет больше времени, когда вы комбинируете jQuery mobile с другими мобильными фреймворками.

Сложно обеспечить полный индивидуальный визуальный дизайн.

Все функции устройства не могут быть доступны через JavaScript в браузере.

jQuery Mobile — Настройка

В этой главе мы обсудим, как установить и настроить jQuery Mobile.

Скачать jQuery Mobile

Когда вы откроете ссылку jquerymobile.com/ , вы увидите, что есть две возможности скачать мобильную библиотеку jQuery.

• Custom Download — Нажмите эту кнопку, чтобы загрузить настроенную версию библиотеки.

• Последняя стабильная версия — нажмите эту кнопку, чтобы получить стабильную и последнюю версию мобильной библиотеки jQuery.

Custom Download — Нажмите эту кнопку, чтобы загрузить настроенную версию библиотеки.

Последняя стабильная версия — нажмите эту кнопку, чтобы получить стабильную и последнюю версию мобильной библиотеки jQuery.

Пользовательская загрузка с Download Builder

Используя Download Builder, вы можете создать собственную сборку, включающую только те части библиотеки, которые вам нужны. Когда вы загрузите новую настроенную версию jQuery Mobile, вы увидите следующий экран.

Вы можете выбрать библиотеки в соответствии с вашими потребностями и нажать кнопку « Создать мою загрузку».

Стабильная загрузка

Нажмите кнопку « Стабильный» , которая приведет непосредственно к ZIP-файлу, содержащему файлы CSS и JQuery, для последней версии мобильной библиотеки jQuery. Извлеките содержимое файла ZIP в мобильный каталог jQuery.

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

Скачать библиотеку jQuery с CDN

CDN (Content Delivery Network) — это сеть серверов, предназначенная для обслуживания файлов пользователям. Если вы используете ссылку CDN на своей веб-странице, она переносит ответственность за размещение файлов с ваших собственных серверов на ряд внешних. Это также дает преимущество в том, что если посетитель вашей веб-страницы уже загрузил копию jQuery mobile с того же CDN, ее не нужно будет повторно загружать. Вы можете включить следующие файлы CDN в документ HTML.

//The jQuery Mobile CSS theme file (optional, if you are overriding the default theme)
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

//The jQuery core JavaScript file
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>

//The jQuery Mobile core JavaScript file
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

В этом руководстве мы используем версии библиотеки CDN. Мы используем AMPPS (AMPPS — это стек WAMP, MAMP и LAMP сервера Apache, MySQL, MongoDB, PHP, Perl & Python) для выполнения всех наших примеров.

В этом руководстве мы используем версии библиотеки CDN. Мы используем AMPPS (AMPPS — это стек WAMP, MAMP и LAMP сервера Apache, MySQL, MongoDB, PHP, Perl & Python) для выполнения всех наших примеров.

пример

Ниже приведен простой пример jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   
      
   <body>
      <div data-role = "page" id = "pageone">
         <div data-role = "header">
            <h1>Header Text</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <h2>Welcome to TutorialsPoint</h2>
         </div>

         <div data-role = "footer">
            <h1>Footer Text</h1>
         </div>
      </div>
   </body>
</html>

Подробности приведенного выше кода —

• Этот код указан внутри элемента head.

Этот код указан внутри элемента head.

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

• Окно просмотра используется для указания (браузером) отображения уровня и размера масштабирования страницы.

• content = «width = device-width» используется для установки ширины в пикселях страницы или экранного устройства.

• initial-scale = 1 устанавливает начальный уровень масштабирования, когда страница загружается в первый раз.

• Включить следующие CDN

Окно просмотра используется для указания (браузером) отображения уровня и размера масштабирования страницы.

content = «width = device-width» используется для установки ширины в пикселях страницы или экранного устройства.

initial-scale = 1 устанавливает начальный уровень масштабирования, когда страница загружается в первый раз.

Включить следующие CDN

<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

• Содержимое внутри тега <body> — это страница, отображаемая в браузере.

Содержимое внутри тега <body> — это страница, отображаемая в браузере.

<div data-role = "page">
   ...
</div>

• data-role = «header» создает верхний колонтитул в верхней части страницы.

• data-role = «main» используется для определения содержимого страницы.

• data-role = «footer» создает нижний колонтитул внизу страницы.

• class = «ui-content» включает отступы и поля внутри содержимого страницы.

data-role = «header» создает верхний колонтитул в верхней части страницы.

data-role = «main» используется для определения содержимого страницы.

data-role = «footer» создает нижний колонтитул внизу страницы.

class = «ui-content» включает отступы и поля внутри содержимого страницы.

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

• Сохраните приведенный выше HTML-код как файл simple_example.html в корневой папке вашего сервера.

• Откройте этот HTML-файл как http: //localhost/simple_example.html, и будет показан следующий вывод.

Сохраните приведенный выше HTML-код как файл simple_example.html в корневой папке вашего сервера.

Откройте этот HTML-файл как http: //localhost/simple_example.html, и будет показан следующий вывод.

jQuery Mobile — Страницы

Пользователь может взаимодействовать со страницами jQuery Mobile, которые группируют контент в логические представления и представления страниц. Просмотр страницы можно анимировать, используя переходы страниц. С помощью HTML-документа можно создать несколько страниц, поэтому нет необходимости запрашивать контент с сервера.

Следующая таблица демонстрирует типы страниц в деталях.

Sr.No.	Тип и описание
1	Одна страница Одна страница создается в HTML-документе с использованием стандартного способа написания шаблона.
2	Многостраничный шаблон Несколько страниц могут быть включены в один HTML-документ, который загружается вместе путем добавления нескольких div с data-role = «page» .
3	Страница диалогов Модальные диалоги открывают контент в интерактивном оверлее над страницей.

Одна страница создается в HTML-документе с использованием стандартного способа написания шаблона.

Несколько страниц могут быть включены в один HTML-документ, который загружается вместе путем добавления нескольких div с data-role = «page» .

Модальные диалоги открывают контент в интерактивном оверлее над страницей.

Соглашения, а не требования

• Элементы атрибута data-role, такие как верхний колонтитул, нижний колонтитул, страница и содержимое, используются для предоставления основного формата и структуры страницы.

• Для одностраничных документов обертка страницы требовалась для автоматической инициализации и устанавливается как необязательная.

• Структурный элемент может быть исключен для веб-страницы с пользовательским макетом.

• Для управления страницами оболочка страницы внедряется платформой, когда она не включена в разметку.

Элементы атрибута data-role, такие как верхний колонтитул, нижний колонтитул, страница и содержимое, используются для предоставления основного формата и структуры страницы.

Для одностраничных документов обертка страницы требовалась для автоматической инициализации и устанавливается как необязательная.

Структурный элемент может быть исключен для веб-страницы с пользовательским макетом.

Для управления страницами оболочка страницы внедряется платформой, когда она не включена в разметку.

Предварительная выборка страниц

Включая атрибут data-prefetch , мы можем предварительно выбирать страницы в DOM в шаблонах с одной страницей. Для получения дополнительной информации нажмите здесь .

DOM Cache

Когда память браузера заполняется в DOM, это замедляет работу мобильного браузера или может привести к сбою из-за загрузки нескольких страниц. Существует простой способ сохранить DOM в чистоте —

• Когда страница загружается через ajax, это означает удаление страницы из DOM при перенаправлении на другую страницу.

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

• Вместо удаления страниц вы можете указать jQuery mobile оставить его в DOM, используя следующую строку:

Когда страница загружается через ajax, это означает удаление страницы из DOM при перенаправлении на другую страницу.

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

Вместо удаления страниц вы можете указать jQuery mobile оставить его в DOM, используя следующую строку:

$.mobile.page.prototype.options.domCache = true;

• Установите для параметра domCache значение true в плагине страниц, чтобы сохранить все страницы в DOM, которые посещались ранее.

Установите для параметра domCache значение true в плагине страниц, чтобы сохранить все страницы в DOM, которые посещались ранее.

pageContainerElement.page({ domCache: true });

jQuery Mobile — Иконки

jQuery Mobile предоставляет набор встроенных иконок, которые можно использовать с кнопками, кнопками списка просмотра, которые сделают кнопки более привлекательными.

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

Sr.No.	Область значков и описание
1	Набор иконок Это устанавливает значок в кнопке.
2	Иконки позиционирования Он определяет положение значка в кнопке.
3	Icon-только На кнопке отображается только значок.
4	Тень иконы Это добавляет тень значка в вашей кнопке.
5	Удаление круга Удаляет серый круг вокруг иконки.
6	Черные или белые значки Он меняет цвет значков на черный или белый.
7	Сочетание Alt и Nodisc Он объединяет классы alt и nodisc для иконки.

Это устанавливает значок в кнопке.

Он определяет положение значка в кнопке.

На кнопке отображается только значок.

Это добавляет тень значка в вашей кнопке.

Удаляет серый круг вокруг иконки.

Он меняет цвет значков на черный или белый.

Он объединяет классы alt и nodisc для иконки.

jQuery Mobile — Переходы

Это позволяет изменять значения свойств, которые происходят в течение указанной продолжительности, и изменяет поведение элемента из одного состояния в другое, применяя различные стили для каждого состояния.

В следующей таблице перечислены некоторые переходы страниц, используемые в платформе jQuery Mobile.

Sr.No.	Переход и описание	Для страниц	Для диалогов
1	увядать Вы можете сделать элементы постепенно исчезающими и видимыми.	Fade Page	Исчезать диалог
2	кувырок Переверните элементы спереди назад на следующую страницу.	Перевернуть страницу	Flip Dialog
3	поп Вы можете создать всплывающее окно.	Pop Page	Pop Dialog
4	течь Отобразите следующую страницу, не открывая текущую страницу.	Flow Page	Flow Dialog
5	горка Вы можете перемещать страницу справа налево.	Слайд-страница	Слайд Диалог
6	slidefade Перемещает страницу справа налево и исчезает на следующей странице.	Slidefade Page	Slidefade Dialog
7	скользить вверх Перемещает страницу снизу вверх.	Slideup Page	Slideup Dialog
8	скользить вниз Перемещает страницу сверху вниз.	Страница слайдов	Диалог слайдов
9	очередь Вы можете перейти на следующую страницу.	Перевернуть страницу	Turn Dialog
10	никто Вы не можете использовать любой эффект перехода с помощью этого атрибута.	Ни одна страница	Диалог

увядать

Вы можете сделать элементы постепенно исчезающими и видимыми.

кувырок

Переверните элементы спереди назад на следующую страницу.

поп

Вы можете создать всплывающее окно.

течь

Отобразите следующую страницу, не открывая текущую страницу.

горка

Вы можете перемещать страницу справа налево.

slidefade

Перемещает страницу справа налево и исчезает на следующей странице.

скользить вверх

Перемещает страницу снизу вверх.

скользить вниз

Перемещает страницу сверху вниз.

очередь

Вы можете перейти на следующую страницу.

никто

Вы не можете использовать любой эффект перехода с помощью этого атрибута.

Настройка перехода и глобальной конфигурации

По умолчанию страницы будут иметь постепенный переход в рамках. Вы можете использовать пользовательские переходы, добавив к ссылке атрибут data-transition . Вы можете использовать различные эффекты перехода по умолчанию для страницы, используя опцию defaultPageTransition глобально. Для диалогов вы можете использовать опцию defaultDialogTransition .

Резервный переход

Все переходы поддерживают 3D-преобразования, кроме перехода с затуханием. Устройства, которые не поддерживают 3D-преобразование, должны будут использовать переход с постепенным исчезновением. Некоторые браузеры не поддерживают трехмерные преобразования для каждого типа перехода, поэтому вы можете использовать затухание в качестве резервного перехода по умолчанию.

Макс прокрутки для переходов

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

Максимальная ширина для переходов

Вы можете отключить переход, когда ширина окна превышает ширину пикселя. Вы можете настроить максимальную ширину для переходов, используя глобальную опцию $ .mobile.maxTransitionWidth , для которой по умолчанию установлено значение false. Он принимает значения, такие как ширина пикселя или ложное значение, и для перехода будет задано значение none, если оно не является ложным значением, когда окно превышает указанное значение.

Переход той же страницы

Вы можете добавить переходы к текущей странице, используя опцию allowSamePageTransition метода change () виджета контейнера страницы.

Создание пользовательских переходов

Вы можете создавать собственные переходы на странице, используя параметр $ .mobile.transitionHandlers, который расширяет выбор переходов на веб-сайте или в приложении.

JQuery Mobile — Макеты

Грид-системы используются для создания макетов страниц через ряд строк и столбцов, в которых размещается ваш контент.

Ниже в таблице подробно представлены типы сеток.

Sr.No.	Тип и описание
1	сетка Мобильная сеточная система jQuery создает макеты страниц через ряд строк и столбцов.
2	Кнопки в сетках Коллекция кнопок в виде сетки в мобильном jQuery.
3	Настраиваемая адаптивная сетка Основной стиль сетки может быть легко расширен до настраиваемого адаптивного макета с помощью медиа-запросов в CSS.

Мобильная сеточная система jQuery создает макеты страниц через ряд строк и столбцов.

Коллекция кнопок в виде сетки в мобильном jQuery.

Основной стиль сетки может быть легко расширен до настраиваемого адаптивного макета с помощью медиа-запросов в CSS.

jQuery Mobile — Виджеты

Виджет — это небольшой гаджет или элемент управления вашего мобильного приложения jQuery. Виджеты могут быть очень удобными, поскольку они позволяют размещать ваши любимые приложения на главном экране для быстрого доступа к ним.

В следующей таблице подробно представлены типы виджетов.

Sr.No.	Тип и описание
1	Кнопки Он определяет нажимаемую кнопку, которая включает в себя содержимое, например текст или изображения.
2	флажок Флажки используются, когда требуется выбрать более одной опции.
3	Radiobox Радиокнопки используются, когда из множества параметров требуется выбрать только один параметр.
4	Datepicker Он ориентирован на ввод, чтобы открыть интерактивный календарь в небольшом наложении.
5	разборный Collapsible позволяет раскрывать или сворачивать содержимое при каждом нажатии на него. Это очень полезно для мобильных устройств, на которых представлен краткий контент.
6	Контрольная группа Контрольные группы предоставляют набор кнопок для указания одного блока, который выглядит как компонент навигации.
7	фильтрующийся Используя атрибут data-filter = «true» , вы можете фильтровать дочерние элементы любого элемента.
8	Flipswitch Flip Switch позволяет выключить / включить или включить / выключить переключатель, нажав на него для ввода логического стиля.
9	Посмотреть список Назначение компонента просмотра списка — визуализация сложного и настраиваемого содержимого в списках.
10	погрузчик JQuery Mobile предоставляет различные способы загрузки состояний в элемент.
11	Navbar Виджет панели навигации — это набор кнопок, которые связывают вас с другими веб-страницами или разделами.
12	Панели Панели используются для отображения компонентов DOM в окне.
13	Всплывающие окна Popup — это пользовательский интерфейс, который отображается в небольшом окне для отображения текста, изображений и другого содержимого.
14	Rangeslider Виджет Rangeslider предоставляет вам пару ручек, позволяющих выбрать диапазон числовых значений.
15	Selectmenu Меню выбора предоставляет различные параметры в форме раскрывающегося списка, из которого пользователь может выбрать один или несколько параметров.
16	ползунок Слайдер позволяет выбрать значение, сдвинув ручку слайдера.
17	Таблица jQuery Mobile использует таблицу для представления данных в виде строк и столбцов, т.е. отображает данные в табличном формате.
18	Вкладки Виджет вкладок является расширением виджета вкладок jQuery ui, который принимает все методы и опции.
19	Ввод текста Тег <input> используется для объявления элемента ввода, элемента управления, который позволяет пользователю вводить данные.
20	Панель инструментов Виджет панели инструментов jQuery для мобильных устройств позволяет создавать верхние и нижние колонтитулы.

Он определяет нажимаемую кнопку, которая включает в себя содержимое, например текст или изображения.

Флажки используются, когда требуется выбрать более одной опции.

Радиокнопки используются, когда из множества параметров требуется выбрать только один параметр.

Он ориентирован на ввод, чтобы открыть интерактивный календарь в небольшом наложении.

Collapsible позволяет раскрывать или сворачивать содержимое при каждом нажатии на него. Это очень полезно для мобильных устройств, на которых представлен краткий контент.

Контрольные группы предоставляют набор кнопок для указания одного блока, который выглядит как компонент навигации.

Используя атрибут data-filter = «true» , вы можете фильтровать дочерние элементы любого элемента.

Flip Switch позволяет выключить / включить или включить / выключить переключатель, нажав на него для ввода логического стиля.

Назначение компонента просмотра списка — визуализация сложного и настраиваемого содержимого в списках.

JQuery Mobile предоставляет различные способы загрузки состояний в элемент.

Виджет панели навигации — это набор кнопок, которые связывают вас с другими веб-страницами или разделами.

Панели используются для отображения компонентов DOM в окне.

Popup — это пользовательский интерфейс, который отображается в небольшом окне для отображения текста, изображений и другого содержимого.

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

Меню выбора предоставляет различные параметры в форме раскрывающегося списка, из которого пользователь может выбрать один или несколько параметров.

Слайдер позволяет выбрать значение, сдвинув ручку слайдера.

jQuery Mobile использует таблицу для представления данных в виде строк и столбцов, т.е. отображает данные в табличном формате.

Виджет вкладок является расширением виджета вкладок jQuery ui, который принимает все методы и опции.

Тег <input> используется для объявления элемента ввода, элемента управления, который позволяет пользователю вводить данные.

Виджет панели инструментов jQuery для мобильных устройств позволяет создавать верхние и нижние колонтитулы.

jQuery Mobile — События

JQuery Mobile позволяет создавать динамические веб-страницы. Используя события, вы можете настроить управляемый событиями процесс для элементов, которые запускаются взаимодействием пользователя, таким как щелчок мыши, наведение мыши на элемент, нажатие клавиши на клавиатуре и т. Д.

В следующей таблице перечислены некоторые события для мобильных устройств, которые поддерживаются jQuery Mobile.

Sr.No.	Описание события
1	jQuery Mobile Events Он реагирует на взаимодействие с пользователем, когда пользователь нажимает на определенную страницу или наводит указатель мыши на элемент и т. Д.
2	События jQuery Touch Он обеспечивает сенсорные события, когда пользователь касается экрана.
3	События jQuery Scroll Он запускает события прокрутки, когда пользователь прокручивает вверх и вниз.
4	jQuery Orientation Event Это вызывает событие ориентации, когда пользователь поворачивает устройство вертикально или горизонтально.
5	События jQuery Page Он предоставляет события страницы, когда пользователь скрывает, создает, загружает или выгружает страницы.

Он реагирует на взаимодействие с пользователем, когда пользователь нажимает на определенную страницу или наводит указатель мыши на элемент и т. Д.

Он обеспечивает сенсорные события, когда пользователь касается экрана.

Он запускает события прокрутки, когда пользователь прокручивает вверх и вниз.

Это вызывает событие ориентации, когда пользователь поворачивает устройство вертикально или горизонтально.

Он предоставляет события страницы, когда пользователь скрывает, создает, загружает или выгружает страницы.

jQuery Mobile — Формы

Создание форм легко и очень гибко, которые построены с помощью комбинации стандартных элементов формы и кнопок.

Следующая таблица демонстрирует типы формы в деталях.

Sr.No.	Тип и описание
1	Основная форма jQuery Mobile предоставляет мощную, простую и универсальную систему макетов для форм, которая сочетает в себе стили форм, кнопки ввода и поддержку слайдера.
2	Форма входов Тег <input> — это элемент управления, который позволяет пользователю вводить данные.
3	Выбор формы В форме опции, выпадающий список предоставляется для выбора меню.
4	Слайдеры форм Слайдер позволяет выбрать значение, сдвинув ручку слайдера.
5	Обновление и автоматическая инициализация элементов формы Метод Refresh используется для самостоятельного обновления нового состояния элемента управления формы и обновления элемента управления формы с помощью JavaScript.

jQuery Mobile предоставляет мощную, простую и универсальную систему макетов для форм, которая сочетает в себе стили форм, кнопки ввода и поддержку слайдера.

Тег <input> — это элемент управления, который позволяет пользователю вводить данные.

В форме опции, выпадающий список предоставляется для выбора меню.

Слайдер позволяет выбрать значение, сдвинув ручку слайдера.

Метод Refresh используется для самостоятельного обновления нового состояния элемента управления формы и обновления элемента управления формы с помощью JavaScript.

jQuery Mobile — Темы

Он устанавливает различные типы тем на кнопки, навигационные панели, блоки, ссылки и так далее. Вы можете установить тему, используя атрибут data-theme .

В следующей таблице описано использование функциональных возможностей темы в различных областях, которые поддерживаются jQuery Mobile.

Sr.No.	Функциональность и описание
1	Темы Он предоставляет два разных типа тем, таких как тема «a» и тема «b», чтобы настроить внешний вид приложения.
2	Тематический верхний и нижний колонтитулы в диалогах Устанавливает тему для верхнего и нижнего колонтитула в диалоговом окне.
3	Тематические кнопки, значки и всплывающие окна Определяет тему для кнопок, значков и всплывающих окон.
4	Тематические кнопки в верхнем и нижнем колонтитулах Отображает тему для кнопок в верхнем и нижнем колонтитулах.
5	Тематические навигационные панели Применяет тему для панелей навигации в верхнем или нижнем колонтитуле.
6	Тематические Панели Вы можете применить тему для панели.
7	Тематические складные кнопки и разделенные кнопки Отображает тему для разборных и разделенных кнопок.
8	Тематические списки и складные списки Отображает тему для списков и складных списков.
9	Складные формы Вы можете применить тему для форм.

Он предоставляет два разных типа тем, таких как тема «a» и тема «b», чтобы настроить внешний вид приложения.

Устанавливает тему для верхнего и нижнего колонтитула в диалоговом окне.

Определяет тему для кнопок, значков и всплывающих окон.

Отображает тему для кнопок в верхнем и нижнем колонтитулах.

Применяет тему для панелей навигации в верхнем или нижнем колонтитуле.

Вы можете применить тему для панели.

Отображает тему для разборных и разделенных кнопок.

Отображает тему для списков и складных списков.

Вы можете применить тему для форм.

jQuery Mobile — CSS классы

jQuery CSS классы

Вы можете использовать различные типы CSS-классов для стилизации элементов, как описано в следующих разделах.

Глобальные классы

Следующие классы могут использоваться в качестве глобальных классов в виджетах jQuery Mobile —

Sr.No.	Класс и описание
1	щ-краеугольный все Отображает элементы с закругленными углами.
2	UI-тень Он отображает тень для элементов.
3	щ-оверлей-тень Он отображает тень наложения для элементов.
4	UI-мини Он отображает меньшие элементы.

щ-краеугольный все

Отображает элементы с закругленными углами.

UI-тень

Он отображает тень для элементов.

щ-оверлей-тень

Он отображает тень наложения для элементов.

UI-мини

Он отображает меньшие элементы.

Классы кнопок

В следующей таблице перечислены классы кнопок, которые используются с элементами привязки или кнопками —

Sr.No.	Класс и описание
1	щ-BTN Он указывает, что элемент будет стилизован как кнопка.
2	щ-БТН-рядный Она показывает кнопку как встроенный элемент, который экономит пространство, необходимое для метки.
3	щ-БТН-икона-топ Он помещает значок над текстом.
4	щ-БТН-значок правой Он размещает значок справа от текста.
5	щ-БТН-значок дно Он помещает значок под текстом.
6	щ-БТН-значок левый Он размещает значок слева от текста.
7	щ-БТН-икона-notext Это показывает единственный значок.
8	щ-БТН-а | б Он отображает цвет кнопки («a» будет фоновым цветом по умолчанию, т.е. серым, а «b» изменит цвет фона на черный).

щ-BTN

Он указывает, что элемент будет стилизован как кнопка.

щ-БТН-рядный

Она показывает кнопку как встроенный элемент, который экономит пространство, необходимое для метки.

щ-БТН-икона-топ

Он помещает значок над текстом.

щ-БТН-значок правой

Он размещает значок справа от текста.

щ-БТН-значок дно

Он помещает значок под текстом.

щ-БТН-значок левый

Он размещает значок слева от текста.

щ-БТН-икона-notext

Это показывает единственный значок.

щ-БТН-а | б

Он отображает цвет кнопки («a» будет фоновым цветом по умолчанию, т.е. серым, а «b» изменит цвет фона на черный).

Классы значков

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

Sr.No.	Класс и описание
1	UI-значок действия Показывает значок действия.
2	UI-значок-оповещение Он отображает восклицательный знак внутри треугольника.
3	UI-значок стрелок-дл Это указывает вниз с левой стрелкой.
4	UI-значок стрелок-др Указывает вниз стрелкой вправо.
5	UI-значок стрелка-уль Это указывает вверх с левой стрелкой.
6	UI-значок стрелка-ур Это указывает вверх со стрелкой вправо.
7	UI-значок стрелка-л Указывает стрелку влево.
8	UI-иконка-стрелка-р Это указывает на стрелку вправо.
9	UI-значок стрелок-у Указывает стрелку вверх.
10	UI-иконка-стрелка-д Указывает стрелку вниз.
11	UI-иконки-бары Он показывает 3 горизонтальных столбика один над другим.
12	UI-иконки-маркеры Он показывает 3 горизонтальные пули одна над другой.
13	UI-значок-караты-д Он отображает карат вниз.
14	UI-значок-каратах-л Он отображает карат влево.
15	UI-значок-караты-р Он отображает карат направо.
16	UI-значок-каратного-у Он отображает карат вверх.
17	UI-значок проверка Это показывает значок галочки.
18	UI-значок-комментарий Указывает комментарий или сообщение.
19	UI-значок запрещенными Он отображает запрещенную иконку.
20	UI-значок вперед Это указывает на значок вперед.
21	UI-значок-навигации Указывает значок навигации.
22	UI-значок повторного цикла Он отображает значок корзины.
23	UI-значок-обновление Показывает значок обновления.
24	UI-значок-теги Это указывает на значок метки.
25	UI-значок-видео Это указывает на значок видео или камеры.

UI-значок действия

Показывает значок действия.

UI-значок-оповещение

Он отображает восклицательный знак внутри треугольника.

UI-значок стрелок-дл

Это указывает вниз с левой стрелкой.

UI-значок стрелок-др

Указывает вниз стрелкой вправо.

UI-значок стрелка-уль

Это указывает вверх с левой стрелкой.

UI-значок стрелка-ур

Это указывает вверх со стрелкой вправо.

UI-значок стрелка-л

Указывает стрелку влево.

UI-иконка-стрелка-р

Это указывает на стрелку вправо.

UI-значок стрелок-у

Указывает стрелку вверх.

UI-иконка-стрелка-д

Указывает стрелку вниз.

UI-иконки-бары

Он показывает 3 горизонтальных столбика один над другим.

UI-иконки-маркеры

Он показывает 3 горизонтальные пули одна над другой.

UI-значок-караты-д

Он отображает карат вниз.

UI-значок-каратах-л

Он отображает карат влево.

UI-значок-караты-р

Он отображает карат направо.

UI-значок-каратного-у

Он отображает карат вверх.

UI-значок проверка

Это показывает значок галочки.

UI-значок-комментарий

Указывает комментарий или сообщение.

UI-значок запрещенными

Он отображает запрещенную иконку.

UI-значок вперед

Это указывает на значок вперед.

UI-значок-навигации

Указывает значок навигации.

UI-значок повторного цикла

Он отображает значок корзины.

UI-значок-обновление

Показывает значок обновления.

UI-значок-теги

Это указывает на значок метки.

UI-значок-видео

Это указывает на значок видео или камеры.

Тематические занятия

Он предоставляет два разных типа тем, таких как тема «a» и тема «b», чтобы настроить внешний вид приложения. Вы можете создавать свои собственные классы тем, добавляя образец буквы (az). В следующей таблице перечислены классы тем, которые указаны от буквы а до я.

Sr.No.	Класс и описание
1	щ-бар- (аг) Он отображает цвет панели, включая верхние и нижние колонтитулы и другие столбцы на странице.
2	щ-объемноцентрированный (аги) Он отображает цвет для содержимого блока, включая просмотр списка, всплывающие окна, ползунки, панели, загрузчики и т. Д.
3	щ-btn- (аг) Он отображает цвет кнопки.
4	щ-группа-theme- (аг) Он отображает цвет для контрольных групп, списков и складных наборов.
5	щ-overlay- (аг) Он отображает цвет фона для всплывающих окон, диалогов и контейнеров страниц.
6	щ-страниц theme- (аз) Он отображает цвет для страниц.

щ-бар- (аг)

Он отображает цвет панели, включая верхние и нижние колонтитулы и другие столбцы на странице.

щ-объемноцентрированный (аги)

Он отображает цвет для содержимого блока, включая просмотр списка, всплывающие окна, ползунки, панели, загрузчики и т. Д.

щ-btn- (аг)

Он отображает цвет кнопки.

щ-группа-theme- (аг)

Он отображает цвет для контрольных групп, списков и складных наборов.

щ-overlay- (аг)

Он отображает цвет фона для всплывающих окон, диалогов и контейнеров страниц.

щ-страниц theme- (аз)

Он отображает цвет для страниц.

Классы сетки

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

Sr.No.	Класс сетки	Колонны	Ширина столбца	Соответствует
1	UI-сетка-соло	1	100%	UI-блок-а
2	UI-сетка-а	2	50% / 50%	UI-блок-а | б
3	щ-сетка-б	3	33% / 33% / 33%	UI-блок-а | б | с
4	щ-сетка-с	4	25% / 25% / 25% / 25%	UI-блок-а | B | C |
5	UI-сетка-д	5	20% / 20% / 20% / 20% / 20%	UI-блок-а | B | C | D | е

jQuery Mobile — Атрибуты данных

кнопка

Он определяет активируемую кнопку, которая включает в себя контент, такой как текст или изображения, используя класс ui-btn . Это устарело в версии 1.4. Используйте атрибут ui-btn вместо использования атрибута data-role = «button» .

В следующей таблице перечислены элементы кнопки, используемые с атрибутом данных.

Sr.No.	Данные-атрибут и описание	Значение
1	данных-углы Он определяет, должна ли кнопка содержать закругленные углы или нет.	правда | ложный
2	-значок данных Он определяет значок кнопки.	По умолчанию нет значка
3	данных-iconpos Это определяет положение иконы.	левый | правильно | верх | низ
4	данное iconshadow Он определяет, должна ли иконка кнопки содержать тень или нет.	правда | ложный
5	данные рядные Он определяет, должна ли кнопка быть встроенной или нет.	правда | ложный
6	Данные мини Он определяет, должна ли кнопка отображаться в меньшем размере или обычном размере.	правда | ложный
7	данная тень Он определяет, должна ли кнопка содержать тень или нет.	правда | ложный
8	данные тема Он отображает цвет темы для кнопки.	буква (аз)

данных-углы

Он определяет, должна ли кнопка содержать закругленные углы или нет.

-значок данных

Он определяет значок кнопки.

данных-iconpos

Это определяет положение иконы.

данное iconshadow

Он определяет, должна ли иконка кнопки содержать тень или нет.

данные рядные

Он определяет, должна ли кнопка быть встроенной или нет.

Данные мини

Он определяет, должна ли кнопка отображаться в меньшем размере или обычном размере.

данная тень

Он определяет, должна ли кнопка содержать тень или нет.

данные тема

Он отображает цвет темы для кнопки.

флажок

В следующей таблице перечислены элементы флажка, используемые с type = «checkbox» .

Sr.No.	Данные-атрибут и описание	Значение
1	Данные мини Он определяет, должен ли флажок отображаться в меньшем размере или обычном размере.	правда | ложный
2	данная роль Останавливает оформление флажков как кнопок.	никто
3	данные тема Он отображает цвет темы для флажка.	буква (аз)

Данные мини

Он определяет, должен ли флажок отображаться в меньшем размере или обычном размере.

данная роль

Останавливает оформление флажков как кнопок.

данные тема

Он отображает цвет темы для флажка.

разборный

В следующей таблице перечислены свертываемые элементы, используемые с атрибутом data-role = «collapsible» .

Sr.No.	Данные-атрибут и описание	Значение
1	данный разрушились Указывает, должен ли контент быть закрыт или расширен.	правда | ложный
2	данный разрушились-биток текст Он отображает обратную связь для пользователей с программным обеспечением для чтения с экрана.	По умолчанию рушится контент
3	-значок данных разрушилась Определяет иконку складной кнопки.	По умолчанию значок «плюс»
4	данные контент тема Он отображает цвет темы для складного контента.	буква (аз)
5	Данные вспененные-биток текст Он отображает обратную связь для пользователей с программным обеспечением для чтения с экрана.	По умолчанию расширение контента
6	-значок данных расширен Он отображает складную кнопку при развертывании содержимого.	По умолчанию значок «минус»
7	данных-iconpos Это определяет положение иконы.	левый | правильно | верх | низ
8	данная врезка Он определяет, должна ли складная кнопка отображаться со скругленными углами и полем или нет.	правда | ложный
9	Данные мини Он определяет, должны ли складные кнопки отображаться в меньшем размере или обычном размере.	правда | ложный
10	данные тема Отображает цвет темы для складной кнопки.	буква (аз)

данный разрушились

Указывает, должен ли контент быть закрыт или расширен.

данный разрушились-биток текст

Он отображает обратную связь для пользователей с программным обеспечением для чтения с экрана.

-значок данных разрушилась

Определяет иконку складной кнопки.

данные контент тема

Он отображает цвет темы для складного контента.

Данные вспененные-биток текст

Он отображает обратную связь для пользователей с программным обеспечением для чтения с экрана.

-значок данных расширен

Он отображает складную кнопку при развертывании содержимого.

данных-iconpos

Это определяет положение иконы.

данная врезка

Он определяет, должна ли складная кнопка отображаться со скругленными углами и полем или нет.

Данные мини

Он определяет, должны ли складные кнопки отображаться в меньшем размере или обычном размере.

данные тема

Отображает цвет темы для складной кнопки.

Складной комплект

В следующей таблице перечислены элементы свертываемого набора, используемые с атрибутом data-role = «collapsibleset» .

Sr.No.	Данные-атрибут и описание	Значение
1	-значок данных разрушилась Определяет иконку складной кнопки.	По умолчанию значок «плюс»
2	данные контент тема Он отображает цвет темы для складного контента.	буква (аз)
3	-значок данных расширен Он отображает складную кнопку при развертывании содержимого.	По умолчанию значок «минус»
4	данных-iconpos Это определяет положение иконы.	левый | правильно | верх | низ
5	данная врезка Он определяет, должна ли складная кнопка отображаться со скругленными углами и полем или нет.	правда | ложный
6	Данные мини Он определяет, должны ли складные кнопки отображаться в меньшем размере или обычном размере.	правда | ложный
7	данные тема Отображает цвет темы для складной кнопки.	буква (аз)

-значок данных разрушилась

Определяет иконку складной кнопки.

данные контент тема

Он отображает цвет темы для складного контента.

-значок данных расширен

Он отображает складную кнопку при развертывании содержимого.

данных-iconpos

Это определяет положение иконы.

данная врезка

Он определяет, должна ли складная кнопка отображаться со скругленными углами и полем или нет.

Данные мини

Он определяет, должны ли складные кнопки отображаться в меньшем размере или обычном размере.

данные тема

Отображает цвет темы для складной кнопки.

Контрольная группа

В следующей таблице перечислены элементы Controlgroup, используемые с атрибутом data-role = «controlgroup» —

Sr.No.	Данные-атрибут и описание	Значение
1	данные исключить-невидимо Он определяет, следует ли исключать невидимых детей при назначении закругленных углов.	правда | ложный
2	Данные мини Он определяет, должна ли группа отображаться в меньшем размере или обычном размере.	правда | ложный
3	данные тема Он отображает цвет темы для контрольной группы.	буква (аз)
4	тип данных Указывает, должна ли группа отображаться в горизонтальном или вертикальном формате.	горизонтальный | вертикальный

данные исключить-невидимо

Он определяет, следует ли исключать невидимых детей при назначении закругленных углов.

Данные мини

Он определяет, должна ли группа отображаться в меньшем размере или обычном размере.

данные тема

Он отображает цвет темы для контрольной группы.

тип данных

Указывает, должна ли группа отображаться в горизонтальном или вертикальном формате.

диалог

В следующей таблице перечислены элементы диалога, используемые с атрибутом data-dialog = «true» .

Sr.No.	Данные-атрибут и описание	Значение
1	данные крупные БТНО Он определяет положение кнопки закрытия.	левый | правильно | никто
2	данных крупным БТН-текст Он определяет текст для кнопки закрытия.	текст
3	данных-углы Он определяет, должен ли диалог отображаться со скругленными углами или нет.	правда | ложный
4	данных дом-кэш Это указывает, должен ли кэш DOM очищаться для отдельных страниц.	правда | ложный
5	данных оверлеев тема Он определяет цвет наложения диалоговой страницы.	буква (аз)
6	данные тема Он определяет цвет темы страницы диалога.	буква (аз)
7	данных в заголовке Он определяет заголовок страницы диалога.	текст

данные крупные БТНО

Он определяет положение кнопки закрытия.

данных крупным БТН-текст

Он определяет текст для кнопки закрытия.

данных-углы

Он определяет, должен ли диалог отображаться со скругленными углами или нет.

данных дом-кэш

Это указывает, должен ли кэш DOM очищаться для отдельных страниц.

данных оверлеев тема

Он определяет цвет наложения диалоговой страницы.

данные тема

Он определяет цвет темы страницы диалога.

данных в заголовке

Он определяет заголовок страницы диалога.

усиление

В следующей таблице перечислены элементы расширения, используемые с атрибутом data-extension = «false» или data-ajax = «false» .

Sr.No.	Данные-атрибут и описание	Значение
1	данных повышения Вы можете стилизовать страницу, установив для этого атрибута значение «true». Вы не можете стилизовать страницу, если она установлена ​​на «ложь».	правда | ложный
2	данная Ajax Он указывает, должны ли страницы загружаться из Ajax или нет.	правда | ложный

данных повышения

Вы можете стилизовать страницу, установив для этого атрибута значение «true». Вы не можете стилизовать страницу, если она установлена ​​на «ложь».

данная Ajax

Он указывает, должны ли страницы загружаться из Ajax или нет.

Фиксированная панель инструментов

В следующей таблице перечислены элементы панели инструментов, используемые с атрибутом data-position = «fixed» .

Sr.No.	Данные-атрибут и описание	Значение
1	данные отключения страницы масштабирование Он определяет, может ли пользователь масштабировать / масштабировать страницу или нет.	правда | ложный
2	данные на весь экран Он определяет панели инструментов должны быть расположены сверху и / или снизу.	правда | ложный
3	Данные-тук-переключатель Это указывает, может ли пользователь переключать видимость панели инструментов на нажатиях или нет.	правда | ложный
4	Данные-переход Он показывает эффект перехода, когда вы нажимаете или нажимаете на элемент.	слайд | исчезать | никто
5	данные обновление страниц-набивка Он обновляет заполнение страницы, используя события изменения размера, перехода и обновления макета.	правда | ложный
6	данные видимые на странице-шоу Он определяет видимость панели инструментов, когда отображается родительская страница.	правда | ложный

данные отключения страницы масштабирование

Он определяет, может ли пользователь масштабировать / масштабировать страницу или нет.

данные на весь экран

Он определяет панели инструментов должны быть расположены сверху и / или снизу.

Данные-тук-переключатель

Это указывает, может ли пользователь переключать видимость панели инструментов на нажатиях или нет.

Данные-переход

Он показывает эффект перехода, когда вы нажимаете или нажимаете на элемент.

данные обновление страниц-набивка

Он обновляет заполнение страницы, используя события изменения размера, перехода и обновления макета.

данные видимые на странице-шоу

Он определяет видимость панели инструментов, когда отображается родительская страница.

Флип-тумблер

В следующей таблице перечислены элементы переключателя, используемые с атрибутом data-role = «flipswitch» —

Sr.No.	Данные-атрибут и описание	Значение
1	Данные мини Он определяет, должен ли переключатель отображаться в меньшем размере или обычном размере.	правда | ложный
2	данных на текст Он определяет текст включения на переключателе.	По умолчанию «вкл»
3	данных вне текста Он определяет текст «выключено» на переключателе.	По умолчанию выключено

Данные мини

Он определяет, должен ли переключатель отображаться в меньшем размере или обычном размере.

данных на текст

Он определяет текст включения на переключателе.

данных вне текста

Он определяет текст «выключено» на переключателе.

нижний колонтитул

В следующей таблице перечислены элементы нижнего колонтитула, используемые с атрибутом data-role = «footer» —

Sr.No.	Данные-атрибут и описание	Значение
1	данных идентификатор Он определяет уникальный идентификатор.	текст
2	Данные положение Он определяет, должен ли нижний колонтитул располагаться внизу или в соответствии с содержимым страницы.	встроенный | фиксированный
3	данные на весь экран Он определяет, должен ли нижний колонтитул располагаться внизу и поверх содержимого страницы или нет.	правда | ложный
4	данные тема Он определяет цвет темы нижнего колонтитула.	буква (аз)

данных идентификатор

Он определяет уникальный идентификатор.

Данные положение

Он определяет, должен ли нижний колонтитул располагаться внизу или в соответствии с содержимым страницы.

данные на весь экран

Он определяет, должен ли нижний колонтитул располагаться внизу и поверх содержимого страницы или нет.

данные тема

Он определяет цвет темы нижнего колонтитула.

заголовок

В следующей таблице перечислены элементы заголовка, используемые с атрибутом data-role = «header» .

Sr.No.	Данные-атрибут и описание	Значение
1	данных идентификатор Он определяет уникальный идентификатор.	текст
2	Данные положение Он определяет, должен ли заголовок располагаться внизу или в соответствии с содержимым страницы.	встроенный | фиксированный
3	данные на весь экран Он определяет, должен ли заголовок располагаться внизу и поверх содержимого страницы или нет.	правда | ложный
4	данные тема Он определяет цвет темы заголовка.	буква (аз)

данных идентификатор

Он определяет уникальный идентификатор.

Данные положение

Он определяет, должен ли заголовок располагаться внизу или в соответствии с содержимым страницы.

данные на весь экран

Он определяет, должен ли заголовок располагаться внизу и поверх содержимого страницы или нет.

данные тема

Он определяет цвет темы заголовка.

входные

В следующей таблице перечислены элементы ввода, используемые с атрибутом type = «text | search | etc» .

Sr.No.	Данные-атрибут и описание	Значение
1	данных четко БТН Он определяет, должен ли элемент ввода содержать кнопку очистки или нет.	правда | ложный
2	данных четко БТН-текст Он определяет текст для кнопки очистки.	текст
3	Данные мини Он определяет, должен ли ввод отображаться в меньшем размере или обычном размере.	правда | ложный
4	данная роль Он останавливает стилизацию ввода или текстовых областей как кнопок.	никто
5	данные тема Он определяет цвет темы элемента ввода.	буква (аз)

данных четко БТН

Он определяет, должен ли элемент ввода содержать кнопку очистки или нет.

данных четко БТН-текст

Он определяет текст для кнопки очистки.

Данные мини

Он определяет, должен ли ввод отображаться в меньшем размере или обычном размере.

данная роль

Он останавливает стилизацию ввода или текстовых областей как кнопок.

данные тема

Он определяет цвет темы элемента ввода.

Ссылка на сайт

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

Sr.No.	Данные-атрибут и описание	Значение
1	данная Ajax Он указывает, должны ли страницы загружаться через Ajax или нет.	правда | ложный
2	Данные в направлении Используется для обратного перехода.	задний ход
3	данных дом-кэш Он указывает, должен ли кэш JQuery DOM быть чистым или нет для страниц.	правда | ложный
4	данные упреждающие Он используется для предварительной загрузки страниц в DOM.	правда | ложный
5	данный отно Он определяет поведение ссылки.	назад | диалог | внешний | неожиданно возникнуть
6	Данные-переход Он определяет переход с одной страницы на другую.	исчезать | перевернуть | поток | поп | слайд | скольжение | понижение | слайд | повернуть | никто
7	Данные-положение к Он определяет положение всплывающих окон.	происхождение | Селектор jQuery | окно

данная Ajax

Он указывает, должны ли страницы загружаться через Ajax или нет.

Данные в направлении

Используется для обратного перехода.

данных дом-кэш

Он указывает, должен ли кэш JQuery DOM быть чистым или нет для страниц.

данные упреждающие

Он используется для предварительной загрузки страниц в DOM.

данный отно

Он определяет поведение ссылки.

Данные-переход

Он определяет переход с одной страницы на другую.

Данные-положение к

Он определяет положение всплывающих окон.

Список

В следующей таблице показаны элементы списка, используемые с атрибутом data-role = «listview» .

Sr.No.	Данные-атрибут и описание	Значение
1	данных-autodividers Он делит список автоматически.	правда | ложный
2	Данные подсчета-тема Он определяет цвет темы элемента count.	буква (аз)
3	данные Делитель-тема Он определяет цвет темы для разделителя списка.	буква (аз)
4	Данные фильтра Используется для фильтрации значений списка в поле поиска.	правда | ложный
5	Данные фильтр-заполнитель Он определяет некоторый текст внутри поля поиска.	текст
6	Данные фильтра-тема Он определяет цвет темы для поискового фильтра.	буква (аз)
7	-значок данных Он предоставляет значок для списка.	По умолчанию нет значка
8	данная врезка Он определяет, должен ли список отображаться с закругленными углами и полем или нет.	правда | ложный
9	Данные сплит-значок Это определяет значок для кнопки разделения.	Значком по умолчанию является «стрелка-р»
10	Данные сплит-тема Он определяет цвет темы для кнопки разделения.	буква (аз)
11	данные тема Он определяет цвет темы для списка.	буква (аз)

данных-autodividers

Он делит список автоматически.

Данные подсчета-тема

Он определяет цвет темы элемента count.

данные Делитель-тема

Он определяет цвет темы для разделителя списка.

Данные фильтра

Используется для фильтрации значений списка в поле поиска.

Данные фильтр-заполнитель

Он определяет некоторый текст внутри поля поиска.

Данные фильтра-тема

Он определяет цвет темы для поискового фильтра.

-значок данных

Он предоставляет значок для списка.

данная врезка

Он определяет, должен ли список отображаться с закругленными углами и полем или нет.

Данные сплит-значок

Это определяет значок для кнопки разделения.

Данные сплит-тема

Он определяет цвет темы для кнопки разделения.

данные тема

Он определяет цвет темы для списка.

Элемент списка

В следующей таблице показаны элементы элемента списка, используемые с атрибутом data-role = «listview» .

Sr.No.	Данные-атрибут и описание	Значение
1	данное filtertext Он используется для фильтрации значений списка, используя текст в поле поиска.	текст
2	-значок данных Он предоставляет значок для элемента списка.	По умолчанию нет значка
3	данная роль Он определяет разделитель для элементов списка.	Список делитель
4	данные тема Он определяет цвет темы для элемента списка.	буква (аз)

данное filtertext

Он используется для фильтрации значений списка, используя текст в поле поиска.

-значок данных

Он предоставляет значок для элемента списка.

данная роль

Он определяет разделитель для элементов списка.

данные тема

Он определяет цвет темы для элемента списка.

Navbar

В следующей таблице перечислены элементы панели навигации, используемые с атрибутом data-role = «navbar» .

Sr.No.	Данные-атрибут и описание	Значение
1	-значок данных Он предоставляет значок для элемента списка.	По умолчанию нет значка
2	данных-iconpos Это определяет положение для значка.	левый | правильно | верх | дно | notext

-значок данных

Он предоставляет значок для элемента списка.

данных-iconpos

Это определяет положение для значка.

страница

В следующей таблице перечислены элементы страницы, используемые с атрибутом data-role = «page» .

Sr.No.	Данные-атрибут и описание	Значение
1	данных дом-кэш Это указывает, должен ли кэш DOM очищаться для отдельных страниц.	правда | ложный
2	данных оверлеев тема Он определяет цвет наложения страниц диалога.	буква (аз)
3	данные тема Он определяет цвет темы для страницы.	буква (аз)
4	данных в заголовке Это обеспечивает заголовок для страницы.	По умолчанию нет значка
5	данная URL Он используется для обновления URL.	URL

данных дом-кэш

Это указывает, должен ли кэш DOM очищаться для отдельных страниц.

данных оверлеев тема

Он определяет цвет наложения страниц диалога.

данные тема

Он определяет цвет темы для страницы.

данных в заголовке

Это обеспечивает заголовок для страницы.

данная URL

Он используется для обновления URL.

Неожиданно возникнуть

В следующей таблице перечислены всплывающие элементы, используемые с атрибутом data-role = «popup» .

Sr.No.	Данные-атрибут и описание	Значение
1	данных-углы Он определяет, должно ли всплывающее окно отображаться с закругленными углами и полем или нет.	правда | ложный
2	Данные неотстранимый Он определяет, должно ли всплывающее окно закрываться щелчком мыши снаружи или нет.	правда | ложный
3	данных истории Он определяет, будет ли всплывающее окно отображать историю элемента при открытии.	правда | ложный
4	данных оверлеев тема Он определяет цвет наложения всплывающего окна.	буква (аз)
5	данная тень Он отображает тень для всплывающего окна.	правда | ложный
6	данные тема Он определяет цвет темы для всплывающего окна.	буква (аз)
7	Данные толерантности Он определяет края окна.	30, 15, 30, 15

данных-углы

Он определяет, должно ли всплывающее окно отображаться с закругленными углами и полем или нет.

Данные неотстранимый

Он определяет, должно ли всплывающее окно закрываться щелчком мыши снаружи или нет.

данных истории

Он определяет, будет ли всплывающее окно отображать историю элемента при открытии.

данных оверлеев тема

Он определяет цвет наложения всплывающего окна.

данная тень

Он отображает тень для всплывающего окна.

данные тема

Он определяет цвет темы для всплывающего окна.

Данные толерантности

Он определяет края окна.

Переключатель

В следующей таблице перечислены элементы переключателя, используемые с атрибутом type = «radio» .

Sr.No.	Данные-атрибут и описание	Значение
1	Данные мини Он определяет, должна ли кнопка отображаться в меньшем размере или обычном размере.	правда | ложный
2	данная роль Он останавливает оформление радио кнопок как улучшенных кнопок.	никто
3	данные тема Он определяет цвет темы для переключателя.	буква (аз)

Данные мини

Он определяет, должна ли кнопка отображаться в меньшем размере или обычном размере.

данная роль

Он останавливает оформление радио кнопок как улучшенных кнопок.

данные тема

Он определяет цвет темы для переключателя.

Выбрать

В следующей таблице перечислены элементы выбора, используемые в jQuery Mobile.

Sr.No.	Данные-атрибут и описание	Значение
1	-значок данных Он предоставляет значок для элемента select.	По умолчанию «стрелка-D»
2	данных-iconpos Это определяет положение иконы.	левый | правильно | верх | низ
3	данные рядные Он определяет, должна ли кнопка быть встроенной или нет.	правда | ложный
4	Данные мини Он определяет, должен ли select отображаться в меньшем размере или обычном размере.	правда | ложный
5	данные нативное меню Это использует пользовательское меню, когда оно было установлено в false.	правда | ложный
6	данных оверлеев тема Он определяет цвет наложения для меню пользовательского выбора.	буква (аз)
7	данный заполнитель Он используется для установки элемента option не родного выбора.	правда | ложный
8	данная роль Останавливает стилизацию выбранных элементов в виде кнопок.	никто
9	данные тема Он отображает цвет темы для выбранных элементов.	буква (аз)

-значок данных

Он предоставляет значок для элемента select.

данных-iconpos

Это определяет положение иконы.

данные рядные

Он определяет, должна ли кнопка быть встроенной или нет.

Данные мини

Он определяет, должен ли select отображаться в меньшем размере или обычном размере.

данные нативное меню

Это использует пользовательское меню, когда оно было установлено в false.

данных оверлеев тема

Он определяет цвет наложения для меню пользовательского выбора.

данный заполнитель

Он используется для установки элемента option не родного выбора.

данная роль

Останавливает стилизацию выбранных элементов в виде кнопок.

данные тема

Он отображает цвет темы для выбранных элементов.

ползунок

В следующей таблице перечислены элементы слайдера, используемые с атрибутом type = «range» .

данные изюминка

Подсвечивает слайдер.

Данные мини

Это определяет, должен ли ползунок отображаться в меньшем размере или обычном размере.

данная роль

Он останавливает стилизацию элементов управления ползунка в виде кнопок.

данные тема

Он отображает цвет темы для ползунка управления.

данные трека-тема

Он отображает цвет темы для дорожки слайдера.