Создайте мобильный веб-сайт с помощью jQuery Mobile

Содержание

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

Это отредактированный отрывок из 15 главы HTML5 и CSS3 Мураха Зака Рувалькаба и Анны Бем.

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

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

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

Как закодировать несколько страниц в одном HTML-файле

В отличие от способа разработки веб-страниц для экранного веб-сайта, jQuery Mobile позволяет создавать несколько страниц в одном файле HTML. Это показано на рисунке 15-7. Здесь вы можете увидеть две страницы сайта вместе с HTML для этих страниц. Что удивительно, так это то, что обе страницы закодированы в одном файле HTML.

Для каждой страницы вы кодируете один элемент div со словом «page» в качестве значения атрибута data-role. Затем в каждом из этих элементов div вы кодируете элементы div для заголовка, содержимого и нижнего колонтитула каждой страницы. Позже, когда файл HTML загружается, отображается первая страница в теле файла.

Для связи между страницами в файле HTML вы используете заполнители, как показано на рисунке 7-11 главы 7. Например, элемент a> на первой странице в этом примере переходит в «#toobin», когда пользователь нажимает на значок h2 или img, который закодирован как контент для этой ссылки. Это относится к элементу div с атрибутом id toobin, что означает, что нажатие на ссылку переводит читателя на вторую страницу файла.

Хотя в этом примере показаны только две страницы, вы можете закодировать много страниц в одном файле HTML. Однако помните, что все страницы вместе с их изображениями, файлами JavaScript и CSS загружаются с помощью одного файла HTML. В результате время загрузки станет чрезмерным, если вы сохраните слишком много страниц в одном файле. Когда это произойдет, вы можете разделить свои страницы на несколько файлов HTML.

HTML-код для двух страниц в теле одного HTML-файла:

div data-role = "page"> header data-role = "header"> h1> Ратуша SJV / h1> / header> section data-role = "content"> h3> Спикеры 2011-2012 гг. / h3> a href = "# toobin"> h4> Джеффри Тубинбр> 19 октября 2011 г. / h4> img src = "images / toobin75.webp" alt = "Джеффри Тубин"> / a>! - ЭЛЕМЕНТЫ ДЛЯ ОТДЫХА СПИКЕРОВ - -> / section> footer data-role = "footer"> h4> © 2011 / h4> / footer> / div> div data-role = "page" id = "toobin"> header data-role = "header"> h1> Ратуша SJV / h1> / header> section data-role = "content"> h3> The Supreme Nine: br> Секреты в черном одеянии / h3> img src = "images / toobin_court.cnn.webp" alt = "Джеффри Toobin "> p> Автор признанного критиками бестселлера i> The Nine:! - КОПИЯ ПРОДОЛЖАЕТСЯ -> / section> footer data-role =" footer "> h4> © 2011 / h4> / footer> / div>

Описание

• Когда вы используете jQuery Mobile, вам не нужно разрабатывать отдельный HTML-файл для каждой страницы. Вместо этого в элементе body одного файла HTML вы кодируете один элемент div для каждой страницы с его атрибутом data-role, установленным на «page».
• Для каждого элемента div вы устанавливаете для атрибута id значение-заполнитель, к которому можно получить доступ с помощью атрибутов href в элементах a> других страниц.

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

На рис. 15-8 показано, как создать диалоговое окно, которое открывается при нажатии на ссылку. Для этого вы кодируете диалоговое окно так же, как любую страницу. Но в элементе a>, который переходит на эту страницу, вы кодируете атрибут data-rel со значением «dialog» в качестве его значения.

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

Когда вы кодируете элемент a>, который переходит на другую страницу или диалоговое окно, вы также можете использовать атрибут data-transition, чтобы указать один из шести переходов, которые приведены в таблице на этом рисунке. Каждый из этих переходов имитирует эффект, который использует мобильное устройство, такое как iPhone.

Переходы, которые можно использовать

HTML, открывающий страницу как диалоговое окно с «всплывающим» переходом:

a href = "# toobin" data-rel = "dialog" data-transition = "pop">

HTML, открывающий страницу с переходом «затухание»:

a href = "# toobin" data-transition = "fade">

Описание

• HTML для чат кодируется так же, как и любая страница. Однако элемент a>, который ссылается на страницу, включает атрибут data-rel со значением «dialog» в качестве значения. Чтобы закрыть диалоговое окно, пользователь нажимает X в заголовке окна.
• Чтобы указать способ открытия страницы или диалогового окна, вы можете использовать атрибут data-transition с одним из значений в таблице выше. Если устройство не поддерживает указанный вами переход, атрибут игнорируется.
• Стиль диалогового окна задается файлом CSS jQuery Mobile.

Как создать кнопки

На рис. 15-9 показано, как использовать кнопки для перехода с одной страницы на другую. Для этого вы просто устанавливаете атрибут data-role для элемента a> на «button», а jQuery Mobile сделает все остальное.
Однако вы также можете установить некоторые другие атрибуты для кнопок. Если, например, вы хотите, чтобы две или более кнопок отображались рядом, как первые две кнопки на этом рисунке, вы можете установить для атрибута data-inline значение «true».

Если вы хотите добавить к кнопке один из 18 значков, предоставляемых jQuery Mobile, вы также кодируете атрибут data-icon. Например, третья кнопка в этом примере использует значок «удалить», а четвертая кнопка использует значок «домой». Все эти значки выглядят как значки, которые вы можете видеть в собственном мобильном приложении. Между прочим, эти значки не являются отдельными файлами, к которым должна иметь доступ страница. Вместо этого они предоставляются библиотекой jQuery Mobile.

Если вы хотите сгруппировать две или более кнопок по горизонтали, например кнопки «Да», «Нет» и «Может быть» на этом рисунке, вы можете закодировать элементы a> для кнопок в элементе div, который имеет «controlgroup» в качестве атрибута data-role и «Горизонтальный» в качестве атрибута типа данных. Или, чтобы сгруппировать кнопки по вертикали, вы можете изменить атрибут типа данных на «вертикальный».

Если вы установите для атрибута data-rel для кнопки значение «назад», а для атрибута href - символ фунта (#), кнопка вернется на страницу, которая ее вызвала. Другими словами, кнопка работает как кнопка «Назад». Об этом свидетельствует последняя кнопка в содержимом страницы.

Последние две кнопки показывают, как кнопки отображаются в нижнем колонтитуле страницы. Здесь значки и текст белые на черном фоне. В этом случае атрибут class для нижнего колонтитула установлен на «ui-bar», который сообщает jQuery Mobile, что следует оставить немного больше места вокруг содержимого нижнего колонтитула. Вы узнаете об этом больше на рис. 15-12.

HTML для кнопок в разделе:

! - Для встроенных кнопок установите для атрибута строки данных значение true -> a href = "#" data-role = "button" data-inline = "true"> Cancel / a> a href = "#" data -role = "button" data-inline = "true"> OK / a>! - Чтобы добавить значок к кнопке, используйте атрибут data-icon -> кнопку href = "#" data-role = " "data-icon =" delete "> Delete / a> a href =" # "data-role =" button "data-icon =" home "> Home / a>! - Чтобы сгруппировать кнопки, используйте элемент div с следующие атрибуты -> div data-role = "controlgroup" data-type = "horizontal"> a href = "#" data-role = "button" data-icon = "check"> Yes / a> a href = "#" data-role = "button" data-icon = "arrow-d"> Нет / a> a href = "#" data-role = "button"> Может быть / a> / div>! - Чтобы закодируйте кнопку "Назад", установите для атрибута data-rel значение back -> a href = "#" data-role = "button" dat-rel = "back" data-icon = "back"> Вернуться на предыдущую страницу / a >

HTML-код кнопок в нижнем колонтитуле:

footer data-role = "footer"> a href = "http://www.facebook.com" data-role = "button" data-icon = "plus"> Добавить в Facebook / a> a href = "http: //www.twitter.com "data-role =" button "data-icon =" plus "> Твитнуть эту страницу / a> / footer>

Описание

• Чтобы добавить кнопку на веб-страницу, вы кодируете элемент a> с атрибутом data-role, установленным на «button».

Как создать панель навигации

На рис. 15-10 показано, как добавить панель навигации на веб-страницу. Для этого вы кодируете элемент div с ролью данных, установленной на «navbar». Внутри этого элемента вы кодируете элемент ul, который содержит элементы li, которые содержат элементы a> для элементов на панели навигации. Обратите внимание, однако, что вы не кодируете атрибут data-role для элементов a>.

Чтобы изменить цвет элементов на панели навигации, код в этом примере включает атрибут data-theme-b для каждого элемента. В результате jQuery Mobile изменяет цвет фона каждого элемента с черного, который используется по умолчанию, на привлекательный синий. Кроме того, этот код устанавливает для атрибута класса активной кнопки значение «ui-btn-active», поэтому jQuery Mobile изменяет цвет активной кнопки на светло-синий. Это показывает, как вы можете изменить форматирование, используемое jQuery Mobile, и вы узнаете об этом больше.

HTML-код для панели навигации:

header data-role = "header"> h1> SJV Town Hall / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home" data-theme = "b "> Home / a> / li> li> a href =" # Speakers "data-icon =" star "data-theme =" b "> Спикеры / a> / li> li> a href =" # contactus data- icon = "grid" data-theme = "b"> Свяжитесь с нами / a> / li> / ul> / div> / header>

Как закодировать HTML для панели навигации:

• Закодируйте элемент div в элементе заголовка. Затем установите для атрибута data-role элемента div значение «navbar».
• В элементе div закодируйте элемент ul, содержащий по одному элементу li для каждой ссылки.
• В каждом элементе li закодируйте элемент a> с атрибутом href, который использует заполнитель для страницы, на которую должна переходить ссылка. Затем установите атрибут data-icon на значок по вашему выбору.
• Для активного элемента на панели навигации установите для атрибута класса значение «ui-btn-active».Тогда цвет этого элемента будет светлее, чем у других элементов на панели навигации.
• Вы также должны использовать атрибут data-theme, чтобы применить тему jQuery Mobile к каждому элементу на панели навигации. В противном случае кнопки на панели будут того же цвета, что и остальная часть заголовка. Чтобы узнать больше о применении тем, см. Рисунок 15-12.

Как форматировать контент с помощью jQuery Mobile

Как вы уже видели, jQuery Mobile автоматически форматирует компоненты веб-страницы на основе собственной таблицы стилей. Теперь вы узнаете больше об этом, а также о том, как настроить стиль по умолчанию, который использует jQuery Mobile.

Стили по умолчанию, которые использует jQuery Mobile

На рис. 15-13 показаны стили по умолчанию, которые jQuery Mobile использует для общих элементов HTML. Для всех своих стилей jQuery Mobile полагается на движок рендеринга браузера, поэтому его собственный стиль минимален. Это сокращает время загрузки и минимизирует накладные расходы, которые чрезмерный CSS может наложить на страницу.

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

Описание

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

Как применять темы к элементам HTML

В некоторых случаях вам может потребоваться изменить стили по умолчанию, которые использует jQuery Mobile. Вы уже видели это на панели навигации на рис. 15-10. Чтобы изменить стили по умолчанию, вы можете использовать пять тем, которые предоставляет jQuery Mobile. Они представлены на рис. 15-12. И здесь эти темы призваны имитировать внешний вид нативного мобильного приложения.

Один из способов применения тем - закодировать атрибут темы данных с буквой темы в качестве его значения. Вы видели это на панели навигации на рисунке 15-10, и вы можете увидеть это в коде для второй панели навигации на этом рисунке. Здесь атрибут data-theme применяет тему «e» к заголовку, а тему «d» - к элементам на панели навигации.

Другой способ применения тем - установить для атрибута класса элемента имя класса, которое указывает тему. Это иллюстрируется первым после таблицы примером. Здесь атрибут class используется для применения классов «ui-bar» и «ui-bar-b» к элементу div. В результате jQuery Mobile сначала применяет стиль по умолчанию для панели к элементу, а затем применяет тему b к этому стилю. На следующих страницах вы увидите другие примеры этого типа стиля.

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

В общем, лучше оставить стили по умолчанию и первые три темы, которые обычно хорошо работают вместе. Затем вы можете экспериментировать с темами d и e, когда считаете, что вам нужно что-то большее.

HTML для второго заголовка и панели навигации:

header data-role = "header" data-theme = "e"> h1> Ратуша SJV / h1> div data-role = "navbar"> ul> li> a href = "# home" data-icon = "home "data-theme =" d "> Home / a> / li> li> a href =" # Speakers "data-icon =" star "data-theme =" d "> Speakers / a> / li> li> a href = "# news" id = "news" data-icon = "grid" data-theme = "d"> Новости / a> / li> / ul> / div> / header>

Пять тем jQuery Mobile:

Два способа применить тему:

Используя атрибут темы данных:

li> a href = "# home" data-icon = "home" data-theme = "b"> Home / a> / li>

Используя атрибут класса, который указывает тему:

div> Панель / div>

Описание

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

Перспектива

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

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