jQuery для мобильных устройств

jQuery для мобильных устройств

Разработчик(и)	Команда jQuery
Первоначальный выпуск	16 октября 2010 г. [1] ( 2010-10-16 )
Стабильный релиз	1.4.5 / 31 октября 2014 г. ( 2014-10-31 )
Предварительный релиз	1.5.0-rc1 / 10 сентября 2018 г. ( 2018-09-10 )
Репозиторий	github.com/jquery/jquery-mobile
Написано в	JavaScript
Платформа	См. Поддержка мобильных браузеров.
Размер	351 КБ / 142 КБ (минифицированный) / 40 КБ (минифицированный, сжатый gzip)
Тип	Фреймворк мобильных приложений
Лицензия	Массачусетский технологический институт [2]
Веб-сайт	jquerymobile.com

jQuery Mobile — это оптимизированный для сенсорного экрана веб-фреймворк (также известный как мобильный фреймворк), а именно библиотека JavaScript , разработанная командой проекта jQuery . Разработка сосредоточена на создании фреймворка , совместимого со многими смартфонами и планшетными компьютерами , ^[3] что стало необходимым из-за растущего, но неоднородного рынка планшетов и смартфонов. ^[4] Фреймворк jQuery Mobile согласуется с другими фреймворками мобильных приложений ^[5] и платформами, такими как PhoneGap , Worklight, ^[6] и т. д.

С 7 октября 2021 года jQuery Mobile устарела. ^[7]

• Совместимо со всеми основными настольными браузерами, а также со всеми основными мобильными платформами, включая Android , iOS , Windows Phone , Blackberry , WebOS , Symbian .
• Создан на основе ядра jQuery , поэтому его освоение для людей, уже знакомых с синтаксисом jQuery, минимально.
• Тематический фреймворк, позволяющий создавать пользовательские темы.
• Ограниченные зависимости и небольшой размер для оптимизации скорости.
• Та же самая базовая кодовая база будет автоматически масштабироваться под любой экран.
• Конфигурация на основе HTML5 для компоновки страниц с минимальным количеством скриптов.
• Навигация на основе AJAX с анимированными переходами страниц, которая обеспечивает возможность создания семантических URL-адресов с помощью pushState.
• Виджеты пользовательского интерфейса, оптимизированные для сенсорного управления и не зависящие от платформы.

(Источник: с сайта jQuery Mobile) ^[3]

$ ( 'div' ). on ( 'tap' , function ( event ){ alert ( 'элемент нажат' ); });  

$ ( document ). ready ( function () { $ ( '.myList li' ). on ( 'click touchstart' , function () { $ ( '.myDiv' ). slideDown ( '500' ); }); });     

Далее следует базовый проект jQuery Mobile, использующий семантические элементы HTML5 . Важно связать библиотеки JavaScript jQuery и jQuery Mobile, а также таблицу стилей (файлы можно загрузить и разместить локально, но рекомендуется ссылаться на файлы, размещенные на jQuery CDN ).

Экран проекта определяется элементом sectionHTML5 и data-roleиз page. Обратите внимание, что data-roleэто пример атрибута HTML5 data, в данном случае определяемого jQuery Mobile. Страница может иметь элементы headerи с из и , соответственно. Между ними может быть элемент с из и из . Наконец, может присутствовать элемент с из .footerdata-roleheaderfooterarticlerolemainclassui-contentnavdata-rolenavbar

Один HTML-документ может содержать более одного sectionэлемента, и, следовательно, более одного экрана контента . Таким образом, необходимо загрузить только один файл, который включает несколько страниц контента. Одна страница может ссылаться на другую страницу в том же файле, ссылаясь на атрибут id страницы (например, href="#second").

В примере ниже используются два других атрибута data-. data-themeАтрибут сообщает браузеру, какую тему отображать. data-add-back-btnАтрибут добавляет кнопку «Назад» на страницу, если установлен в true.

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

Краткое объяснение атрибутов данных, используемых в этом примере:

data-role – определяет роль элемента, например, заголовок, содержимое, нижний колонтитул и т. д.

data-theme – Указывает, какую тему дизайна использовать для элементов внутри контейнера. Может быть установлено значение: a или b.

data-position – указывает, должен ли элемент быть фиксированным, в этом случае он будет отображаться вверху (для верхнего колонтитула) или внизу (для нижнего колонтитула).

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

data-icon – определяет один из пятидесяти встроенных значков, которые можно добавить к элементу.

<!doctype html> < html >  < head > < meta  charset = "utf-8" > < title > Пример jQuery Mobile </ title > < meta  name = "viewport"  content = "initial-scale=1, user-scalable=no, width=device-width" > < link  rel = "stylesheet"  href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" >  </ head >  < body >  < section  data-role = "page"  id = "first"  data-theme = "a" >  < header  data-role = "header"  data-position = "fixed" >  < h1 > Заголовок страницы 1 </ h1 >  </ header >  < article  role = "  main " class = " ui - content " >  <h2> Привет , мир ! </h2> <a href="#second" data-role="button" data-inline="true" data-transition="flow" data-icon="carat-r" data-iconpos="right"> Перейти на страницу 2 </a> </article>​​​​​​​​​​​​​​​​          < footer  data-role = "footer"  data-position = "fixed" >  < h4 > Нижний колонтитул страницы 1 </ h4 >  </ footer >  </ section >  < section  data-role = "page"  id = "second"  data-theme = "b" >  < header  data-role = "header"  data-position = "fixed"  data-add-back-btn = "true" >  < h1 > Заголовок страницы 2 </ h1 >  </ header >  < article  role = "main"  class = "ui-content" >  < h2 > Пример страницы </ h2 >  </ article >  < footer  data-role = "footer"  data-position = "fixed" >  < h4 > Нижний колонтитул страницы 2 </ h4 >  </ footer >  </ section > < script  src = "https://code.jquery.com/jquery-1.11.1.min.js" ></ script > < script  src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js" ></ script >  </ body > </ html >

jQuery Mobile предоставляет фреймворк тем, который позволяет разработчикам настраивать цветовые схемы и определенные аспекты CSS функций пользовательского интерфейса. Разработчики могут использовать приложение jQuery Mobile ThemeRoller ^[8] для настройки этих внешних видов и создания фирменных интерфейсов. После разработки темы в приложении ThemeRoller программисты могут загрузить пользовательский файл CSS и включить его в свой проект, чтобы использовать свою пользовательскую тему. ^[9]

Каждая тема может содержать до 26 уникальных цветовых «образцов», каждый из которых состоит из заголовка, основного содержимого и состояний кнопок. Объединение различных образцов позволяет разработчикам создавать более широкий спектр визуальных эффектов, чем они могли бы сделать с одним образцом на тему. Переключение между различными образцами в рамках темы так же просто, как добавление атрибута «data-theme» к элементам HTML.

Тема jQuery Mobile по умолчанию поставляется с двумя разными образцами цвета, называемыми «a» и «b». Вот пример того, как создать панель инструментов с образцом «b»:

< div  data-role = "header"  data-theme = "b" >  < h1 > Заголовок страницы </ h1 >  </ div >

(Источник: с сайта jQuery Mobile) ^[3]

Уже существует несколько тем в стиле открытого исходного кода, которые разрабатываются и поддерживаются сторонними организациями. Одной из таких тем в стиле открытого исходного кода является тема в стиле Metro, разработанная и выпущенная Microsoft Open Technologies, Inc. ^[10] Тема в стиле Metro призвана имитировать пользовательский интерфейс Metro (язык дизайна) , который Microsoft использует в своих мобильных операционных системах.

Ключ:

• A - Высокое качество. Браузер, который способен, как минимум, использовать медиа-запросы (требование для jQuery Mobile). Эти браузеры будут активно тестироваться, но могут не получить все возможности jQuery Mobile.
• B - Среднее качество. Способный браузер, у которого недостаточно доли рынка, чтобы оправдать ежедневное тестирование. Исправления ошибок будут по-прежнему применяться для помощи этим браузерам.
• C - Низкое качество. Браузер, который не может использовать медиа-запросы. Им не будут предоставлены никакие скрипты jQuery Mobile или CSS (возврат к простому HTML и простому CSS).
• * - Будущий браузер. Этот браузер еще не выпущен, но находится в стадии альфа/бета-тестирования.

(Источник: с сайта jQuery Mobile) ^[3]

• jQTouch
• jQuery
• Адаптация контента
• Студия ДаВинчи
• iUI
• PhoneGap
• Тизен
• ViziApps
• Бутстрап
• JavaScript-фреймворк
• Библиотека JavaScript

• Официальный сайт
• Проект jQuery
• Документация и демонстрация jQuery Mobile
• jQuery Mobile Framework: пишите меньше, делайте больше
• jQuery Mobile C# ASP.NET Автор: Мэтью Дэвид Элгерт Архивировано 05.07.2014 на Wayback Machine
• PropertyCross, Помощь в выборе кроссплатформенного мобильного фреймворка: jQuery Mobile