Здравствуйте. Это вторая из короткого цикла статей, направленных на объяснение основ jQuery Mobile. Во вступительной статье Hello jQuery Mobile мы рассказали о настройке, структуре страниц, навигации, переходах и основных видах списка.
При этом мы создали эталонный сайт, который демонстрирует использование CSS для создания фигур без изображений. Эта статья продолжает разработку этого справочного сайта по CSS3 Shapes и продолжает называть нашего нового лучшего друга jQM, но на этот раз мы проведем краткий обзор компонентов.
На переднем крае
Когда мы познакомили вас с jQM, было отмечено, что код находится в альфа- состоянии. С тех пор первая JQM Beta вышла на улицы . Есть много способов быть в курсе таких событий, к которым мы еще вернемся. Для хардкора, конечно же, есть хранилище jQuery Mobile GitHub .
Меня привлекает README.md GitHub, потому что, как отмечено в README.md , вы можете запускать локальные документы и демонстрации с двойным преимуществом современной сборки jQM. Мы собираемся клонировать копию хранилища. Если вы сейчас не в Git, то позор вам. Еще не поздно.
Вам нужен локальный веб-сервер. Я использую MAMP, настроенный для работы в папке «Sites» в Mac OS X, поэтому я создам новую папку «jQueryMobile» в «Sites». Затем введите следующие команды в Терминале, по одной за раз. По общему признанию, это относится к моей среде, поэтому вам, возможно, придется внести незначительные изменения.
Клонировать JQM Repo
cd ~/sites/jquerymobile git clone git://github.com/jquery/jquery-mobile.git cd jquery-mobile make
Это все. Направьте ваш браузер на нашу новую jquerymobile/jquery-mobile/ , посмотрите местные документы и демонстрации! Проект находится внутри папки jquery-mobile , которая создается во время клонирования. Это потрясающе для разработки в парке или кафе, и ее можно быстрее просматривать.
В результате выполнения команды make вас будет папка с именем compiled , которая содержит свежие копии файлов *.js и *.css . Скопируйте новые файлы в папку jqm нашего справочного проекта, обновите ссылки в <head> и мы окажемся на переднем крае.
Обратите внимание, что изображения в первой бета-версии такие же, как в альфа- версии, но если они изменились или вы делаете это в первый раз, добавьте или обновите /images/ с помощью /images/ из /themes/default/images/ . Наконец, обратите внимание, что jQuery имеет версию 1.6.1, и проект jQM использует его, поэтому обновите и этот файл.
Быть в курсе событий
Важно быть в курсе событий. Помимо GitHub, прочитайте мобильный блог jQuery и следите за разработчиками в Twitter, где такие пользователи, как @scottjehl, объявляют об обновлениях и предлагают обязательное чтение. Это особенно важно, потому что сейчас JQM развивается довольно быстро.
Например, пинч-масштабирование было отключено вплоть до альфа- версии и было восстановлено в бета-версии по различным причинам, как описано в сообщении о выпуске бета-версии 1 . Отныне разработчики должны добавить meta viewport тег meta viewport в разметку, где он был динамически вставлен.
Все в голове
<head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CSS3 Shapes</title> <link rel="stylesheet" href="jqm/jquery.mobile-1.0b2pre.min.css" /> <script src="jqm/jquery-1.6.1.min.js"></script> <script src="jqm/jquery.mobile-1.0b2pre.min.js"></script> </head>
С этими дополнениями к <head> наш ссылочный сайт теперь будет правильно масштабироваться, при этом ширина столбца будет узкой, а текст и значки останутся в полном размере. Дружелюбные разработчики помогают, где могут, но не забывайте, что вы всегда в курсе, особенно когда проект jQM инкубирует.
Нет пути назад
На этом этапе у нас есть исходный эталонный проект с обновленными файлами кода /jqm/ папке /jqm/ и обновленным meta viewport тегом области meta viewport . Запустите ваш ссылочный сайт и обратите внимание на отсутствие кнопки «Назад» на страницах, выходящих за пределы домашней страницы или index.html . Кнопка «Назад» теперь отключена по умолчанию, как и предполагалось .
Простым решением является добавление data-add-back-btn="true" к каждому элементу data-role="page" , что восстанавливает кнопку «Назад». Эта кнопка игнорирует href и возвращает одну запись истории. Эквивалентный ручной код будет <a href="index.html" data-icon="arrow-l" data-rel="back">Back</a>
Но давайте подумаем об этом ручном коде, потому что он представляет некоторую сложность, когда вы кодируете ссылки по всему сайту. В документах говорится, что вы должны предоставить содержательную href для браузеров класса C, которая фактически указывает на страницу, на которую вы ссылаетесь. Это означает, что вам нужно написать код для динамического заполнения href чтобы он указывал на предыдущую страницу.
Когда кнопки добавляются программно с использованием атрибута data-add-back-btn="true" , jQM добавляет простой href="#" . Это хорошо для jQM, потому что, если он добавляет что-то, используя Javascript, то он может предположить, что не будет проблем с использованием Javascript, чтобы позаботиться о кнопке возврата. Изящные отступления для браузеров класса C или отсутствие JS потребуют динамического атрибута href .
Панель инструментов и кнопки заголовка
По обе стороны от текста имеется слот для кнопок в элементе data-role="header" , так что в стандартной конфигурации их два. Плагин заголовка jQM ищет непосредственных потомков data-role="header" , первая найденная ссылка идет слева, а вторая — справа.
Как только мы <a href="#shapes" data-icon="home">Home</a> домашнюю страницу, давайте добавим кнопку «Домой» в заголовок, добавив <a href="#shapes" data-icon="home">Home</a> внутри data-role="header" элемент С этим, и только этим, вы будете удивляться, куда ушла наша кнопка «Назад». Возьмите под свой контроль положение, добавив class="ui-btn-right" , и кнопка «Назад» вернется к просмотру, потому что кнопка «Домой» не в пути вправо.
Если мы добавим data-rel="back" к ссылке на кнопку «Домой», jQM удалит один элемент из стека истории и обратит переход, когда к нему прикоснутся или нажмут. Добавление data-iconpos="notext" удаляет текст из кнопки, но мы можем оставить текст в разметке независимо.
Домашняя кнопка
<header data-role="header"> <h1>Shape</h1> <a href="#shapes" class="ui-btn-right" data-rel="back">Home</a> </header>
Это нормально, когда мы на расстоянии одного шага от домашней страницы, но когда мы находимся в двух шагах от страницы CSS, разметка должна будет измениться, потому что data-rel="back" вернется к страница «Форма» вместо «Домой». Поэтому мы будем использовать значимый href и data-direction="reverse" , что означает, что мы получаем слайд слева направо, а ментальная модель остается неизменной.
Обратите внимание, что существует ошибка, из-за которой class="ui-btn-active" не удаляется должным образом , так что при class="ui-btn-active" страницы после возвращения домой кнопка «Домой» остается активной. Существуют краткосрочные решения, использующие дополнительный Javascript для обхода ошибки, предложенные в комментариях.
Панель инструментов нижнего колонтитула и фиксированное позиционирование
По существу те же правила, которые применяются к data-role="header" применяются к data-role="footer" . Основное отличие состоит в том, что структуры меньше, так что кнопки не располагаются слева и справа, а все они встроены.
Отличная особенность — надежно удерживать data-role="footer" между переходами, используя общий data-id="" . Обратите внимание, что для этого необходимо, чтобы data-role="header" и data-role="footer" использовали фиксированное позиционирование.
Чтобы воспользоваться собственной прокруткой и чтобы после прокрутки снова появлялись панели инструментов, используйте data-position="fixed" . Добавьте этот фрагмент ко всем элементам data-role="header" и data-role="footer" в коде.
Теперь мы можем добавить постоянный нижний колонтитул, добавив общий data-id="footer" к каждому элементу data-role="footer" . Обратите внимание, что data-position="fixed" установленный для всех элементов data-role="footer" означает, что это глобальный элемент. Теперь у нас есть фиксированный footer который остается статичным при переходах по страницам. Здорово.
Постоянный нижний колонтитул
<footer data-role="footer" data-position="fixed" data-id="footer"> ... </footer>
Диалоги и значки данных
Поскольку наш data-role="footer" является глобальным элементом, мы добавим что-то глобальное, например, страницу о веб-приложении. Мы сделаем нашу страницу о приложении представленной в виде диалога, чтобы продемонстрировать код и поговорить о последствиях. Во-первых, диалоги не включены в отслеживание истории хеш-состояний.
Создайте новый элемент data-role="page" в нижней части источника, чтобы поддерживать разумный порядок источников. Эта страница имеет немного другую структуру: простой data-role="page" и data-role="header" включая нашу кнопку «Домой». Нет никакого data-position="fixed" примененного к data-role="header" потому что это разрушило бы модальное диалоговое окно. data-role="footer" вообще не существует, потому что это также разрушило бы модальный диалог.
Затем в элементе data-role="footer" всех стандартных элементов data-role="page" добавьте ссылку в новое диалоговое окно. Добавьте data-rel="dialog" в ссылку, чтобы связанная страница отображалась в виде диалога. Мы выберем data-icon="" для изображения кнопки, мы используем data-icon="gear" .
Переход по умолчанию для модального диалога — data-transition="pop" противном случае рекомендуется использовать slideup или flip чтобы сделать его более похожим на диалог. По умолчанию отступы отключены, поэтому нам нужно добавить их обратно для кнопок, панелей навигации и других виджетов. Добавьте class="ui-bar" ко всем элементам data-role="footer" , используя их таким образом.
Диалог Механизм
<footer data-role="footer" data-position="fixed" data-id="footer" class="ui-bar"> <a href="#about" data-rel="dialog" data-icon="gear" data-transition="pop">About</a> </footer>
Кнопки
Мы можем стилизовать любую ссылку привязки как кнопку, добавив data-role="button" . По умолчанию кнопки заполняют доступную ширину экрана. Сделайте кнопки компактными и такими же широкими, как текст и значки, которые они содержат, используя атрибут data-inline="true" . Установите кнопки рядом друг с другом, обернув их в содержащий элемент с примененным атрибутом data-inline="true" .
Группируйте кнопки в блоке, помещая их в контейнер с примененным атрибутом data-role="controlgroup" . По умолчанию составленный вертикально, измените на горизонтальную группу, добавив data-type="horizontal" к элементу data-role="controlgroup" .
Добавление значков к кнопкам достигается с помощью атрибута data-icon="" . jQM поставляется с парой спрайтов, которые включают в себя набор значков, наиболее часто используемых для мобильных приложений, просто укажите свой выбор значков в атрибуте. Положение слева от текста по умолчанию, но положение значка кнопки можно контролировать с помощью data-iconpos="" .
Для нашего справочного приложения мы будем придерживаться простой controlgroup с двумя элементами data-role="button" , один для «Shape» и один для «CSS». Мы применим этот шаблон к каждой странице «Форма» и «CSS», обеспечивая быстрое переключение между формой и кодом, используемым для создания каждой из них.
форма
<nav data-role="controlgroup"> <a data-role="button">Shape</a> <a href="#shape_css" data-role="button" data-transition="pop">CSS</a> </nav>
CSS
<nav data-role="controlgroup"> <a href="#shape" data-role="button" data-rel="back">Shape</a> <a data-role="button">CSS</a> </nav>
Списки
Наш хороший друг jQM включает в себя широкий спектр типов списков и параметров форматирования, чтобы охватить наиболее распространенные шаблоны проектирования, которые просты в использовании, добавляя элементы data в разметку. Мы рассмотрели большое количество вариантов в первой статье Hello jQuery Mobile . Но еще один быстрый пример.
Мы добавим индекс для всех страниц Shapes и всех страниц CSS в наш диалог About. Добавьте <h4> в качестве заголовка для каждого списка, а затем простые старые семантические элементы HTML последовательностей <ul> и <li> для элементов. Нам нужно добавить два дополнительных элемента data : <ul data-role="listview" data-inset="true"> . В результате на странице «О программе» появятся два списка вставок.
Список вставок
<h4>Shapes</h4> <ul data-role="listview" data-inset="true"> <li><a href="#circle">Circle</a></li> ... </ul>
Форматирование контента
JQM использует осторожный подход к стилизации контента, позволяя исходной визуализации браузера иметь приоритет, добавляя лишь немного отступов для удобного чтения. Вы можете использовать систему тем для управления шрифтом и цветом. И мы сохраним Theme Framework для последующего чата у камина.
Вернуться к макету. jQM предоставляет простой способ получения столбцов на основе CSS с помощью соглашения, называемого ui-grid . Несмотря на то, что в мобильной среде сложно создать несколько столбцов, решетки можно создать в нескольких предустановленных конфигурациях.
Для сетки из двух столбцов просто добавьте class="ui-grid-a" к содержащему элементу, и внутри него добавьте элементы с class="ui-block-a" и class="ui-block-b" . Сетка из трех столбцов использует контейнер с примененным class="ui-grid-b" и ожидает class="ui-block-a" и class="ui-block-b" и class="ui-block-c" внутри него.
Наконец, обратите внимание, что можно создать несколько сеток строк, добавив, скажем, четыре дочерних блока в сетку из двух столбцов, шесть или девять блоков в сетку из трех столбцов. Циклически перебирайте class="ui-block-a" и class="ui-block-b" и т. Д. В зависимости от желаемого макета
Сетка с несколькими рядами
<div class="ui-grid-b"> <div class="ui-block-a">Row 1 Cell 1</div> <div class="ui-block-b">Row 1 Cell 2</div> <div class="ui-block-c">Row 1 Cell 3</div> <div class="ui-block-a">Row 2 Cell 1</div> <div class="ui-block-b">Row 2 Cell 2</div> <div class="ui-block-c">Row 2 Cell 3</div> </div>
И веселье при форматировании контента продолжается, со складными блоками. Свертываемые блоки содержимого создаются путем добавления атрибута data-role="collapsible" к контейнеру, где jQM добавит значок «+/–» к элементу heading помещенному непосредственно внутри контейнера.
Добавьте элемент heading <h1> через <h6> , который остается видимым со значком расширения, затем разметьте оставшуюся часть содержимого внутри контейнера data-role="collapsible" , видимость которого затем можно включать и выключать с помощью heading .
разборный
<div data-role="collapsible"> <h3>Header & Icon</h3> <p>Collapsible Content</p> </div>
Когда мы доберемся до финишной черты, быстро заметим, что область содержимого страницы должна использовать большинство ее стилей из атрибута data-theme="x" примененного к элементу data-role="page" . В jQM есть всеобъемлющий объектно-ориентированный CSS-фреймворк, который вы можете взять и создать в своем изображении.
Заключительные комментарии
До сих пор мы рассмотрели основы настройки и работы с jQM, а затем краткий обзор компонентов, которые вы можете использовать, просто добавив свою разметку. Все, что мы сделали, было достигнуто только с помощью разметки.
Здесь открыта огромная глубина, и мы едва поцарапали поверхность. Если вам посчастливится начать ухаживать за jQM, вы можете обнаружить ее богатые API, которые относятся к событиям, методам и утилитам, адаптивному макету и структуре темы.
Проверьте полный справочный сайт на 3Easy . Пожалуйста, оставьте свои мысли и вопросы в комментариях и будьте настолько смелыми, чтобы спросить, куда бы вы хотели пойти дальше. Спасибо, что заглянули, сейчас я прощаюсь с вами. У меня свидание с JQM.