Если вы еще не загрузили бесплатный образец главы последнего опуса Эрла Каследина и Крэйга Шарки для SitePoint, jQuery: Новичок ниндзя, 2-е издание — Новые пинки и хитрости , самое время это сделать. Или просто броситься прямо в погоню и купить книгу !
Почему? Ну, как кто-то, кто купил первое издание, я могу заверить, что в этом издании много нового материала, и пример главы является отличным примером.
Скажу вам, что: давайте просто посмотрим на это сейчас. Вот так.
Ни одно исследование продвинутых плагинов jQuery и jQuery не может быть завершено без намека на новенького ребенка в блоке, jQuery Mobile .
Mobile переносит jQuery с рабочего стола на «мобильные» устройства. Более того, он основан на уроках, извлеченных как Core, так и пользовательским интерфейсом, поэтому даже если у вас есть только мимолетное понимание этих проектов, вы будете готовы работать с Mobile. Фактически, одна из самых сложных вещей, с которыми приходится соглашаться при разработке с помощью Mobile, — это дополнительные шаги, которые необходимо предпринять, чтобы просмотреть свои работы на целевых платформах.
Больше никаких клавиш ALT + TAB и refresh для разработчиков мобильных устройств — теперь это CTRL + S , поднимите трубку телефона или планшета и нажмите « reload .
jQuery Mobile объединяет кросс-браузерную и кроссплатформенную поддержку, которую мы знаем и любим от jQuery, с мощью, гибкостью и дизайном, к которому мы обращаемся за пользовательским интерфейсом — это плагин, но он расширяет не только jQuery, но и места, где вы можно положиться на JQuery. Вы можете выбирать, связывать, анимировать и связывать, как вы ожидаете от плагина, но вы также можете коснуться и провести пальцем, использовать больше CSS3, чем когда-либо прежде, и, что наиболее важно, использовать свое мастерство jQuery, чтобы сделать это следующим есть приложение.
Вы можете сосредоточиться на цели своего приложения и позволить Mobile помочь вам, не мешая, — включите два файла, как пользовательский интерфейс jQuery, и все готово!
<link rel = stylesheet href = "http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.css "> ... <script src = "http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.js "> </ скрипт>
Выглядит знакомо! Как вы привыкли, вы можете использовать собственный CDN jQuery для доставки ваших файлов, как мы это сделали здесь, или вы можете взять файлы самостоятельно и включить их локально.
Используя CDN от jQuery, ваши сжатые и сжатые файлы имеют размер 7 КБ и 24 КБ соответственно — достаточно малы, чтобы их можно было использовать в мобильной сети. И у вас есть множество вариантов платформы для доступа к этим мобильным сетям. Как говорится на веб-сайте jQuery Mobile , «Mobile имеет широкую поддержку для большинства современных платформ для настольных компьютеров, смартфонов, планшетов и электронных книг».
И это немалая претензия: дифференцированная матрица поддержки браузеров в jQuery Mobile рассчитана на впечатляющие две дюжины целевых платформ. Это неплохо, если учесть, что некоторые продукты конкурентов официально поддерживают только один.
Четыре степени поддержки
У нас слишком много платформ, чтобы дублировать полный список градуированной матрицы поддержки, но вы можете найти их все на сайте jQuery Mobile .
Вместо этого давайте взглянем на уровни охвата, которые вы можете ожидать для каждой оценки:
- Оценка: полный, улучшенный опыт с анимированными переходами страниц на основе Ajax
- B-grade: расширенные возможности без функций навигации Ajax
- Оценка C: базовый, не улучшенный HTML-интерфейс, который все еще функционален
- Официально не поддерживается: может работать, но не был тщательно протестирован или отлажен
Документация для мобильных устройств почти такая же полная, как и поддержка. Каждый метод и свойство описаны, а сама документация написана с использованием Mobile — разумеется, а? Можно утверждать, что с документацией легче ориентироваться на смартфоне, чем на рабочем столе!
Что касается плагинов, то jQuery Mobile еще более богат, чем jQuery UI — он имеет больше функций и больше функций, которые работают, как только вы добавляете файлы в свое приложение. А поскольку Mobile основан на HTML5 и CSS3, которые являются движущей силой разработки настольных систем, он может даже привлекать немобильные сценарии использования.
Его поддержка все еще растет, и, возможно, будут добавлены некоторые функции, которые мы увидим в более поздних выпусках.
Хотя Mobile еще не упоминается в навигации по сайтам jQuery Core или UI, есть множество функций для создания приложений, которые знают, насколько новой является библиотека. Давайте посмотрим на некоторые из этих функций.
Играя в свой козырь
К настоящему моменту мы знаем нашего клиента почти так же хорошо, как мы знаем jQuery и jQuery UI, поэтому мы можем с уверенностью сказать, что на картах мобильное приложение с социальным аспектом.
Давайте поднимем ставку и разберемся с их следующим запросом, создав мобильную карточную игру.
Мы внедрим jQuery Mobile, сделав Pop Trumps: The Jemimas , первую в мире карточную игру, в которой ощущения трепета ваших друзей сочетаются с лицом новейшей рок-звезды, чтобы попасть в чарты, как показано на Рисунке 4.1, Рисунке 4.2, и Рисунок 4.3.
Рисунок 4.1. Лицо Поп Трампс
Рисунок 4.2. Наша домашняя страница Поп Трампс
Рисунок 4.3. Экран победителя
Вместо того, чтобы проходить каждую строку кода, давайте сосредоточимся на коде для мобильных устройств, где мы можем:
<link rel = stylesheet href = "http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.css "> ⋮ <script src = "http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.js "> </ скрипт>
Мы уже рассмотрели мобильные требования, но о них стоит упомянуть еще раз. В отличие от других проектов jQuery, и для достижения широкого спектра поддержки платформ много манипуляций происходит задолго до того, как document.ready событие document.ready . В результате нам необходимо добавить наши заголовки в заголовок нашего документа, чтобы обеспечить максимальное удобство для пользователей.
Пока мы находимся в заголовке документа, давайте посмотрим на этот новый meta элемент:
<meta name = viewport content = "width = device-width, initial-scale = 1, ➥user-масштабируемой = 0" >
jQuery Mobile в значительной степени опирается на HTML5, и здесь у нас есть элемент HTML5, который нормализует кроссплатформенное отображение нашего приложения. Это говорит нашему браузеру, что наш контент должен быть настолько широким, насколько это возможно, и что он должен быть в масштабе 1: 1. Это важно, учитывая широкий диапазон разрешений, с которыми может столкнуться наше приложение.
Это последнее значение контента — user- scalable=0 говорит нашему браузеру не увеличивать масштаб нашего контента. Если вы хотите использовать масштабирование в своем приложении, просто опустите это значение и следуйте стандартному поведению браузера.
Говоря о HTML5, давайте теперь посмотрим на нашу структуру документа. Опять же, если вы уже работали с HTML5, у вас должно быть несколько сюрпризов, за исключением, возможно, того, насколько хорошо Mobile охватывает этот язык.
<section data-role = "page" id = "home"> ⋮ </ Раздел> <section data-role = "page" id = "album"> <header data-role = "header"> ⋮ </ Заголовок> <div data-role = "content"> ⋮ </ DIV> <footer data-role = "footer"> ⋮ </ Колонтитул> </ Раздел> <section data-role = "page" id = "album"> ⋮ </ Раздел> <section data-role = "page" id = "results"> ⋮ </ Раздел>
В своей основе наша страница представляет собой группу элементов section с атрибутом data-role страницы. Вы также можете использовать элементы div вместо sections здесь атрибут важнее, чем элемент, так как data-role сообщает Mobile, что каждый из sections будет страницей в нашем приложении. Кроме того, мы разграничиваем наши страницы с помощью уникальных атрибутов id которые служат якорными целями для нашей навигации. Если рабочий стол может использовать идентификаторы для перехода или прокрутки к контенту, Mobile использует их для перехода между просмотрами страниц.
Во втором section мы продемонстрировали наш основной макет просмотра страницы — header , footer и footer , опять же, все с атрибутами data-role которые помогают Mobile применять свои скрытые изменения. Внутри этих элементов мы просто добавляем любой необходимый нам HTML-код и применяем атрибуты data-role там, где это необходимо. Давайте попробуем немного сейчас:
<a href="#albums" data-role="button"> START </a>
В нашем первом section с id home есть привязка, которую мы говорим Mobile, что мы хотели бы отобразить в качестве кнопки в нашем пользовательском интерфейсе — мы просто предоставляем data-role данных для button , и Mobile делает всю тяжелую работу за нас. Использование ссылки на хэш в нашей привязке — это все, что нам нужно сделать, чтобы загрузить следующий section с id albums .
В нашем разделе albums мы продолжаем использовать простой подход, основанный на атрибутах data HTML5. Мы говорим нашему header применить тему, используя, как вы уже догадались, data-theme .
Мы делаем то же самое для нашего неупорядоченного списка, а также указываем, что он является представлением data-listview , и якоря в списке должны иметь flip data-transition данных для управления тем, как наши страницы «поворачиваются»:
<header data-role = "header" data-theme = "b"> <h1> Поп Трампс </ h1> </ Заголовок> <div data-role = "content"> <p> Выберите альбом The Jemimas для воспроизведения </ p> <ul data-role = "listview" data-inset = "true" data-theme = "b"> <li> <a href="#album" data-transition="flip"> JeДжемам: дебют </a> </ li> <li> <a href="#album" data-transition="flip"> Je Это Джемимас </a> </ li> <li> <a href="#album" data-transition="flip"> W неловкий третий </a> </ li> <li> <a href="#album" data-transition="flip"> Est Лучший из джемимов </a> </ li> </ UL> </ DIV>
Нажатие на якоря в нашем привлекательном стиле listview теперь приведет к тому, что назначенная album страница «перевернется» для просмотра, что приятно добавляет наш карточный эффект. Вы также можете использовать slide , slide , slide , slideup и fade ; если вы поклонник jQTouch , вы можете заметить, что эти переходы были перенесены из этой библиотеки с незначительными изменениями. После нашего flip мы раздадим одну из наших карт, и игроки получат серьезные козыри. Однако для нас реальный интерес заключается в трех новых data-roles и бесшовной манипуляции с DOM:
<div data-role = "content"> <div data-role = "fieldcontain"> <label for = "flip-a" class = "ui-hidden-available"> SlВыбрать ползунок: </ label> <select name = "slider" id = "flip-a" data-role = "slider" ➥data-тема = "C"> <option value = "no"> ☜ Number 1s </ option> <option value = "yes"> 6 </ option> </ Выберите> ⋮ </ DIV> </ DIV> <footer data-role = "footer" data-theme = "c"> <div data-role = "controlgroup" data-type = "горизонтальный"> ⋮ </ DIV> </ Колонтитул>
Первая новая data-role — это fieldcontain , который делает то, что вы ожидаете: содержит поля. Если хотите, эту data-role можно применить к fieldset для некоторого дополнительного семантического сахара. Следующей является роль slider внутри нашего fieldcontain , а последней — controlgroup , которая hgroup свое имя из HTML5 hgroup и используется для группировки кнопок.
Манипулирование DOM, вызванное data-role slider показывает корни Mobile в пользовательском интерфейсе jQuery — элемент select и связанная с ним label скрыты в интерфейсе и заменены скользящим тумблером, популярным в мобильных устройствах и показанным на рисунке 4.4.
Рисунок 4.4. jQuery Mobile флип-тумблер и сгруппированные кнопки
Значение controlgroup имеет не менее поразительный эффект в интерфейсе, который достигается с помощью только CSS (без манипуляций с DOM). Само по себе значение контрольной группы объединяет ссылки и применяет закругленные углы к первому и последнему элементам группы. Если вы также добавите data-type=”horizontal” в div содержащий значение controlgroup , как мы это делали в предыдущей разметке, сгруппированные кнопки отображаются в строке, как вы и ожидали.
И наш последний атрибут data — data-direction=”reverse” , который работает с нашими переходами, обращая их вспять. Например, если поведение по умолчанию заключается в том, что представление перемещается с правой стороны экрана, наш атрибут data-direction заставляет его выходить вправо. При управлении это дает пользователю сильное чувство движения в приложении. Это не просто сдвиг вдоль бесконечно ряда взглядов; скорее это перемещается вокруг ряда страниц как перемещение по главам в книге:
<a href = "# album" data-role = "button" data-direction = "reverse" ➥id = "Продолжить"> ПРОДОЛЖИТЬ </a>
Говоря о переходе по главам, мы подошли к тому моменту, когда начали говорить о написании нашего кода jQuery Mobile. Ну, почти.
Прежде чем говорить о коде, который мы напишем, нам нужно охватить еще один фрагмент кода, который выполняется без mobileinit событие mobileinit . Преобразования и стили по умолчанию в jQuery Mobile настолько хороши, что вам не потребуется вносить какие-либо изменения, но в тех редких случаях, когда они требуются, вы можете использовать событие mobileinit — оно позволяет расширять или настраивать параметры сразу же, как только событие пожары.
Это означает, что вам не нужно преодолевать значения по умолчанию — вы можете изменить настройки, прежде чем они будут применены, и вам не нужно ждать загрузки DOM. Таким образом, вам не придется ждать вступления в силу $(document).ready() и document.loaded .
В результате рекомендуется ссылаться на свои собственные локальные файлы сценариев после обращения к библиотеке jQuery, как обычно, и перед обращением к Mobile, например:
<script src = "http://code.jquery.com/jquery-1.7.1.min.js"> </ script> <script src = "../ path / to / your / scripts.js"> </ script> <script src = "http://code.jquery.com/mobile/1.0/ ➥jquery.mobile-1.0.min.js "> </ скрипт>
Итак, мы отсортировали наш семантический HTML, все наши исходные файлы на месте, и событие mobileinit . Давайте посмотрим на код, который мы написали, чтобы оживить нашу игру …
Но вот где мы должны оставить нашу выдержку. Помимо загрузки этого бесплатного образца главы , вы также можете просмотреть Оглавление и Индекс, прежде чем решите купить jQuery: от новичка до ниндзя, 2-е издание — Новые удары и хитрости Эрла Кастледина и Крейга Шарки.