В этой статье я собираюсь познакомить вас с jQuery Mobile, далее именуемым как jQM. Мы пройдем абсолютный минимум, необходимый для создания веб-сайта с jQM, коснемся некоторых предварительных ловушек и создадим справочный проект, с помощью которого вы сможете держаться за руки, когда будете делать первые шаги.
jQuery Mobile называет себя «оптимизированной для касания веб-средой для смартфонов и планшетов», а далее — «унифицированной системой пользовательского интерфейса для всех популярных платформ мобильных устройств, основанной на надежной основе jQuery и jQuery UI». По сути, затем создайте свой документ с помощью этой платформы и практически гарантируйте хороший результат на современных мобильных устройствах.
Настроить
При этом мы создали локальную среду разработки для наших первых экспериментов. Загрузите jQM , и я бы посоветовал вам также загрузить копию jQuery , от которой зависит jQM, для локального использования, независимо от того, используете ли вы в конечном итоге размещенные версии. Переместите все загруженные файлы в ваш проект.
Я решил разместить все эти файлы в папке /jqm/ , в корневом каталоге моего проекта. Это сделано для того, чтобы сохранить связи между скриптами, CSS и изображениями спрайтов в среде jQM. Вы можете выбрать более традиционные папки /js/ и /css/ и /img/ , но потребуется обслуживание. Примите во внимание текучую природу проекта jQM и его текущее альфа- состояние.
основы
Создайте свой корневой файл index.html или его эквивалент. Затем, если вы перейдете к документам и демонстрациям jQM, перейдете по компонентам, страницам и диалогам, к разделу, объясняющему основную анатомию страницы, вы найдете ее типовые шаблоны. Чтобы быстро освоиться, скопируйте и вставьте полный шаблон одной страницы, затем выключите для многостраничного сниппет.
Я обновил ссылки в документа, чтобы указать на мою /jqm/ папку. На этом раннем этапе своей жизни в стандартном коде есть несколько складок, таких как комментарии после контейнеров <footer> , но их можно простить. Несколько мелких твиков, и я представляю свою ревизию шаблонного кода шаблона.
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="jqm/jquery.mobile-1.0a4.1.min.css" /> <script src="jqm/jquery-1.5.2.min.js"></script> <script src="jqm/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <!-- Start of first page --> <div data-role="page" id="foo"> <div data-role="header"> <h1>Foo</h1> </div><!-- /header --> <div data-role="content"> <p>Hi, I'm Foo.</p> <p>I'm first in the source order so I'm shown as the first page.</p> <p>View the internal page called <a href="#bar">Bar</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> <!-- Start of second page --> <div data-role="page" id="bar"> <div data-role="header"> <h1>Bar</h1> </div><!-- /header --> <div data-role="content"> <p>Hello, I'm Bar.</p> <p>I'm second in the source order, and I'm an internal page.</p> <p><a href="#foo">Back to Foo</a></p> </div><!-- /content --> <div data-role="footer"> <h4>Page Footer</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Документация по базовой анатомии страниц объясняет, что вы можете счастливо ссылаться на внешние страницы и в равной степени счастливо содержать внутренние страницы в одном документе. Ваш выбор будет основан на факторах здравого смысла в зависимости от сайта или приложения, которое вы создаете, но для простоты наш справочный проект будет содержать все его страницы внутри. Мы вернемся к тонкостям позже.
А пока обратите внимание на важные структурные элементы. Каждый элемент, содержащий страницу, включает в себя data-role="page" же, как class="" добавляется к элементу. Каждая из страниц содержит еще три элемента, каждый из которых data-role="header" и data-role="content" и data-role="footer" . Это использование data-role="" , как JQM катится.
Запустите ваш проект прямо сейчас с этим кодом, чтобы наблюдать эффект простой структуры HTML со связанными атрибутами data-role jQM. У вас должно быть две связанные страницы, слайд-переходы включены бесплатно. Для преждевременных, попробуйте добавить дополнительные документы и соответствующие ссылки, чтобы увидеть, как внешние ссылки также «просто работают» без какой-либо специальной конфигурации.
Вот первый pro-tip. Добавьте атрибут data-title="" в каждый контейнер data-role="page" , который будет имитировать традиционный <title> найденный в HTML-документа. В то время как jQM отлично выполняет автоматическое обновление заголовков страниц для навигации Ajax, на многостраничных сайтах вы можете добавить этот атрибут, чтобы вручную определять заголовки и тем самым помогать стеку истории.
контекст
Наш справочный проект посвящен освещению того, как создавать различные фигуры, используя только CSS, и обнулять изображения. Какой лучший контекст, учитывая нашу ответственную цель ограничить загрузку для мобильных устройств с ограниченной пропускной способностью, в сочетании с возможностью, которую предоставляют мобильные браузеры и их расширенная поддержка CSS3.
Львиная доля благодарности за эту фантастическую работу CSS идет Крису Койеру и его Shapes of CSS , а остальная часть - его обожающей и талантливой публике, за их разговор и вклад в CSS3 только формы. Важно отметить, что окончательная версия нашего справочного сайта не отображает все возможные формы, поэтому очень важно, чтобы вы следовали вышеупомянутым ссылкам и сами убедились в этом.
Итак, чтобы осветить формы CSS, мы изменим шаблонный код таким образом, чтобы первая страница отображала пример формы CSS, а вторая страница отображала CSS, необходимый для создания этой формы из одного элемента HTML. Но сначала диверсия в HTML5. В документации говорится, что сайт jQM должен начинаться с типа документа HTML5, чтобы в полной мере использовать возможности платформы.
HTML5
Подробное руководство по HTML5 можно найти в HTML5 и CSS3 для реального мира . Когда я создаю наш ссылочный сайт, я добавлю несколько новых элементов HTML5 и уберу часть старых вещей. Бонусные баллы за призыв в комментариях, где я отклоняюсь от доктрины, изложенной в вышеупомянутой книге.
- Измените все элементы
<div data-role="page">на<section data-role="page"> - Измените все элементы
<div data-role="header">на<header data-role="header"> - Измените все элементы
<div data-role="content">на<article data-role="content"> - Измените все элементы
<div data-role="footer">на<footer data-role="footer">
Давайте отбросим комментарии типа <!-- /header --> , они нам не нужны, потому что разметка говорит сама за себя. Мы можем безопасно удалить type="text/javascript" из ссылок скрипта и type="text/css" из ссылок таблицы стилей. Посыпать в тег, сначала в <head> . Наконец, обратите внимание на мои простые хорошие манеры придерживаться однозначных закрывающих слешей в стиле XHTML.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 Shapes</title> <link rel="stylesheet" href="jqm/jquery.mobile-1.0a4.1.min.css" /> <script src="jqm/jquery-1.5.2.min.js"></script> <script src="jqm/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <section data-role="page" id="infinity" data-title="Infinity"> <header data-role="header"> <h1>Infinity</h1> </header> <article data-role="content"> <div class="infinity"></div> <style> .infinity { position: relative; width: 212px; height: 100px; } .infinity:before, .infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #fc2e5a; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } </style> <p><a href="#infinity_css" data-transition="pop">Infinity CSS</a></p> </article> <footer data-role="footer"> <h4>BuildMobile: jQuery Mobile</h4> </footer> </section><section data-role="page" id="infinity_css" data-title="Infinity"> <header data-role="header"> <h1>Infinity</h1> </header> <article data-role="content"> <pre> <code> .infinity { position: relative; width: 212px; height: 100px; } .infinity:before, .infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #fc2e5a; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } </code> </pre> <p><a href="#infinity" data-transition="pop" data-direction="reverse">Infinity Shape</a></p> </article> <footer data-role="footer"> <h4>BuildMobile: jQuery Mobile</h4> </footer> </section> </body> </html>тем<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 Shapes</title> <link rel="stylesheet" href="jqm/jquery.mobile-1.0a4.1.min.css" /> <script src="jqm/jquery-1.5.2.min.js"></script> <script src="jqm/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <section data-role="page" id="infinity" data-title="Infinity"> <header data-role="header"> <h1>Infinity</h1> </header> <article data-role="content"> <div class="infinity"></div> <style> .infinity { position: relative; width: 212px; height: 100px; } .infinity:before, .infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #fc2e5a; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } </style> <p><a href="#infinity_css" data-transition="pop">Infinity CSS</a></p> </article> <footer data-role="footer"> <h4>BuildMobile: jQuery Mobile</h4> </footer> </section><section data-role="page" id="infinity_css" data-title="Infinity"> <header data-role="header"> <h1>Infinity</h1> </header> <article data-role="content"> <pre> <code> .infinity { position: relative; width: 212px; height: 100px; } .infinity:before, .infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #fc2e5a; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } </code> </pre> <p><a href="#infinity" data-transition="pop" data-direction="reverse">Infinity Shape</a></p> </article> <footer data-role="footer"> <h4>BuildMobile: jQuery Mobile</h4> </footer> </section> </body> </html>тем<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 Shapes</title> <link rel="stylesheet" href="jqm/jquery.mobile-1.0a4.1.min.css" /> <script src="jqm/jquery-1.5.2.min.js"></script> <script src="jqm/jquery.mobile-1.0a4.1.min.js"></script> </head> <body> <section data-role="page" id="infinity" data-title="Infinity"> <header data-role="header"> <h1>Infinity</h1> </header> <article data-role="content"> <div class="infinity"></div> <style> .infinity { position: relative; width: 212px; height: 100px; } .infinity:before, .infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #fc2e5a; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } </style> <p><a href="#infinity_css" data-transition="pop">Infinity CSS</a></p> </article> <footer data-role="footer"> <h4>BuildMobile: jQuery Mobile</h4> </footer> </section><section data-role="page" id="infinity_css" data-title="Infinity"> <header data-role="header"> <h1>Infinity</h1> </header> <article data-role="content"> <pre> <code> .infinity { position: relative; width: 212px; height: 100px; } .infinity:before, .infinity:after { content: ""; position: absolute; top: 0; left: 0; width: 60px; height: 60px; border: 20px solid #fc2e5a; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } .infinity:after { left: auto; right: 0; -moz-border-radius: 50px 50px 50px 0; border-radius: 50px 50px 50px 0; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } </code> </pre> <p><a href="#infinity" data-transition="pop" data-direction="reverse">Infinity Shape</a></p> </article> <footer data-role="footer"> <h4>BuildMobile: jQuery Mobile</h4> </footer> </section> </body> </html>
Переход и направление
Углубившись глубже, обратите внимание на добавление атрибута data-transition="pop" к текстовым ссылкам. Добавьте атрибут data-transition в ссылку, чтобы изменить переход по умолчанию со slide на любой из поддерживаемых вариантов, включая slideup , slidedown , pop , slidedown и flip . Из-за использования CSS-преобразований анимация должна быть аппаратно ускорена на многих мобильных устройствах.
jQM вежливо приписывает код для переходов к jQT или jQTouch с некоторыми небольшими изменениями. jQT был создан David Kaneda и поддерживается Jonathan Stark, и нет никаких сомнений в том, что мы опубликуем введение в библиотеку jQT здесь, в BuildMobile, в ближайшем будущем, потому что она предлагает заметные и интересные различия.
Также обратите внимание на добавление data-direction="reverse" к ссылке со второй страницы обратно на первую. Это вызывает обратный переход, так что data-transition="pop" сжимается, а не увеличивается. Но обратите внимание, что data-direction="reverse" указывает обратный переход, фактически не возвращаясь в историю.
Сейчас самое время рассмотреть потоки страниц, внутренние или иные, и выбрать соответствующие переходы и направления. Существует некоторая расширенная документация по перенаправлениям и ссылкам на каталоги, которые мы могли бы рассмотреть в следующем уроке. Конечно, вы можете прочитать больше о технических деталях модели навигации, Ajax, хешах и истории в документах.
Основные представления списка
Наш справочный сайт содержит больше, чем несколько фигур, поэтому мы добавим список для навигации. Добавьте новый контейнер с data-role="page" и убедитесь, что он является первым в исходном коде. Внутри контейнера data-role="content" добавьте <ul> и <li> для каждой из наших фигур. Поскольку наши страницы являются внутренними, каждый <li> должен содержать идентификатор на основе href="#shape" .
Простое добавление data-role="listview" к <ul> обеспечивает волшебство jQM. Список будет преобразован в элемент полной ширины, отображающий текст привязки слева и стандартный значок со стрелкой вправо. Нажатие или нажатие на любую из ссылок вызовет стандартную анимацию слайдов справа налево на связанной странице.
Добавить немного сока в список так же просто. Добавьте data-filter="true" в <ul> для мгновенного поиска на стороне клиента. При желании добавьте data-filter-placeholder="" и выбранный вами текст-заполнитель. Документация для списков обширна, но вы обнаружите, что расширенные функциональные возможности просты для реализации и следуют тем же шаблонам, которые мы рассмотрели до сих пор.
Примечания по навигации
Наш справочный сайт имеет навигационную страницу, девять страниц «формы», каждая из которых имеет страницу «CSS». Все панели первого имеют кнопку «назад», автоматически добавляемую фреймворком jQM, который стандартно поставляется с data-role="header" . Но без вмешательства это порок и ломает ментальную модель.
Если бы вы несколько раз переключались между страницей shape и CSS, каждый переход добавлялся бы в стек истории. Нажатие на кнопку «Назад» приведет к обратному изменению этой истории и переключению между страницами «Форма» и «CSS» столько раз, прежде чем, наконец, вернуться на страницу навигации, с которой вы начали.
Таким образом, мы добавляем data-rel="back" к ссылке, которая имитирует кнопку назад, возвращаясь к одному элементу истории и игнорируя href по умолчанию для якоря. Несмотря на то, что это игнорируется, важно добавить содержательный href который фактически указывает на URL ссылающейся страницы, чтобы браузеры класса C могли следить за ним, и поток не прерывался.
Я предсказываю, что это изменится, в будущем мы можем даже не получить кнопку «назад» по умолчанию. Я снова возвращаюсь к документации по модели навигации. На данный момент помните, что ссылка с загруженной Ajax-страницы на несколько внутренних страниц требует добавления rel="external" или data-ajax="false" для полной перезагрузки, очищающей хеш Ajax в URL-адресе.
закрытие
При создании справочного сайта «Фигуры» не было написано ни одной строчки CSS, кроме CSS в содержании, которое я дисконтирую. Нулевые изображения были необходимы, кроме существующих спрайтов в структуре jQM. Общий вес инфраструктуры jQM и библиотеки jQuery, от которой он зависит, составляет приблизительно 234 КБ плюс всего 20 КБ для нашего справочного документа.
Время почти истекло, и в этой статье мы просто коснулись поверхности, касаясь лишь некоторых документов страниц и диалогов, панелей инструментов и представлений списков. За документацией легко следить самостоятельно, но вы можете запросить дополнительный охват кнопок, форм и общего форматирования контента в комментариях.
В будущей статье я углублюсь глубже, где рассматриваются различные аспекты API. Но сейчас давайте попробуем провести партизанские испытания. Запустите справочный сайт на своем мобильном телефоне, будь то телефон Android, iPhone или iPad, и расскажите миру, что работает, а что нет. Я попытаюсь ответить на вопросы, поднятые в следующем выпуске.
Дополнительные кредиты
Сделать сайт более похожим на приложение с включением в документа. Это работает только тогда, когда сайт добавлен на домашний экран. Старый метод skool заключался в удалении хрома с добавлением onload="setTimeout(function() { window.scrollTo(0, 1) }, 100); тег.
А еще лучше добавь к для смартфонов без сетчатки и поместите PNG в корневой каталог. Затем добавьте к и PNG в корне для отображения сетчатки.