Закрыть
E-mail:
Пароль:
Забыли пароль?
В каталоге проекта: 14 639 веб-студий, 991 CMS, 256 473 сайта.
РегистрацияCMS MagazineВход
CMS Magazine CMS Magazine

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

26.09.2012 | Автор: Зак Равалькаба и Энн Боэм  

  • Необходимые навыки: начальный уровень HTML5, средний уровень CSS, jQuery и jQuery Mobile
  • Требования: библиотеки jQuery и jQuery Mobile, а также текстовый редактор
  • Время выполнения:4-6 часов
  • СКАЧАТЬ ИСХОДНЫЕ ФАЙЛЫ
  • СМОТРЕТЬ ДЕМО

В этом эксклюзивном отрывке из Murach’s HTML5 and CSS3, Зак Равалькаба и Энн Боэм объясняют, как с помощью jQuery Mobile создать мобильный веб-сайт.

Это отредактированный отрывок из Главы 15 книги Зака Равалькабы и Энн Боэм Murach’s HTML5 and CSS3.

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

Хотя 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 файлов.

  • Две веб-страницы, использующие jQuery Mobile

HTML-код, размещающий две страницы в теле одного HTML файла:

<div data-role="page">
	<header data-role="header"><h1>SJV Town Hall</h1></header> 
		<section data-role="content">
			<h3>The 2011-2012 Speakers</h3> 
			<a href="#toobin">
			<h4>Jeffrey Toobin<br>October 19, 2011</h4>
			<img src="images/toobin75.jpg" alt="Jeffrey Toobin"></a> 
			<!— ОСТАВШИЕСЯ ЭЛЕМЕНТЫ ЗАГОЛОВКА —>
		</section>
	<footer data-role="footer"><h4>&copy; 2011</h4></footer> 
</div>
<div data-role="page" id="toobin">
	<header data-role="header"><h1>SJV Town Hall</h1></header> 
		<section data-role="content">
			<h3>The Supreme Nine:<br>Black Robed Secrets</h3> 
			<img src="images/toobin_court.cnn.jpg" alt="Jeffrey Toobin"> 
			<p>Author of the critically acclaimed best seller, <i>The Nine: 
			<!— ПРОДОЛЖЕНИЕ СТАТЬИ —>
		</section>
	<footer data-role="footer«><h4>&copy; 2011</h4></footer> 
</div>

Вкратце

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

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

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

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

Прописывая элемент «<a>» ссылающийся на другую страницу или диалоговое окно, вы можете также использовать атрибут, отвечающий за эффект смены страницы и выбрать один из восьми способов визуализации, перечисленных в таблице ниже. Каждый из этих эффектов имитирует аналогичные, применяемые на таких устройствах как iPhone.

  • Страница (слева) и диалоговое окно(справа) с одинаковым HTML-кодом.

Эффекты перехода, которые могут быть использованы

Действие Описание
slide следующая страница выезжает справа налево
slideup следующая страница выезжает снизу вверх
slidedown следующая страница выезжает сверху вниз
pop следующая страница вырастает из центра
fade следующая страница плавно проявляется над предыдущей
flip следующая страница появляется при повороте предыдущей, подобно переворачиваемой игральной карте. Этот эффект не поддерживается на некоторых устройствах.

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

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

HTML открывающий страницу с эффектом «fade»:

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

Вкратце

  • HTML диалогового окна создается также, как любая другая страница. Однако, элемент «<a>„, ссылающийся на страницу, включает атрибут “data-rel» со значением «dialog». Для того, чтобы закрыть диалоговое окно, пользователь должен нажать «X» в шапке блока.
  • Для выбора способа, которым открывается диалоговое окно, вы можете использовать атрибут «data-transition» с одним из значений, указанных в таблице выше. Если устройство не поддерживает заданную вами визуализацию, атрибут будет проигнорирован.
  • Стиль диалогового окна задается файлом jQuery Mobile CSS.
Необходим сайт, мобильное приложение, услуги по SEO или контекстной рекламе? Тендерная площадка WORKSPACE поможет выбрать оптимального исполнителя. База проекта насчитывает более 10 500 агентств. Сервис БЕСПЛАТЕН для заказчиков.

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

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

Если вы желаете использовать одну из 18 иконок, входящих в набор jQuery Mobile, в качестве кнопки, вам также необходимо вписать атрибут data-icon». К примеру, третья кнопка в образце использует иконку «delete«, а четвертая — иконку «home». Все они выглядят как те иконки, что вы часто можете видеть в других мобильных приложениях. Что интересно, иконки не расположены в отдельных файлах, к которым страница должна получать доступ. Они входят в библиотеку jQuery Mobile.

Если вам нужно сгруппировать две и более кнопки в горизонтальный блок, как Yes, No и Maybe в примере, вам следует создавать элементы «<a>» для кнопок с div- элементами, имеющими «data-role» атрибут в значении «controlgroup» и «data-type» с параметром «horizontal. Или же, если хотите расположить их вертикально, data-type» атрибутом «vertical„.

Если вы указываете data-rel» атрибут кнопки как «back, а а атрибуту hrel» указываетеоктоторп («#), кнопка возвращает вас на указанную страницу. Другими словами, она работает как кнопка возврата к предыдущей странице. В нашем примере это последняя кнопка на странице.

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

  • Мобильная веб-страница, демонстрирующая различные кнопки.

HTML всех кнопок на этой странице:

 <!— Кнопки расположены в одну линию, data-inline атрибут в значении «true» —>
<a href="#" data-role="button" data-inline="true">Cancel</a> 
<a href="#" data-role="button" data-inline="true">OK</a>

<!— Для добавления иконки в кнопке используется атрибут data-icon —>
<a href="#" data-role="button" 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">No</a>
<a href="#" data-role="button">Maybe</a>
</div>

<!— Для создания кнопки возврата атрибут data-rel задан в значении back —> 
<a href="#" data-role="button" dat-rel="back" data-icon="back">Back to previous page</a>

HTML для кнопок в футере:

<footer data-role="footer"> 
	<a href="http://www.facebook.com" data-role="button" data-icon="plus">Add to Facebook</a> 
	<a href="http://www.twitter.com" data-role="button" data-icon="plus«>Tweet this Page</a>
</footer>

Вкратце

  • Для добавления на веб-страницу кнопки, вам нужно создать элемент «<a>» с «data-role» атрибутом в значении «button».

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

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

Для изменения цвета пунктов навигационной панели код в нашем примере включает атрибут data-theme-b» для каждого из них. В результате jQuery Mobile меняет цвет фона каждого из пунктов меню с черного, установленного по умолчанию, на привлекательный голубой. В добавок, код задает атрибут «class» для активной иконки в значении «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">Speakers</a></li>
		<li><a href="#contactus data-icon="grid" data-theme="b«>Contact Us</a></li>
	</ul>
	</div>
</header>

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

  • Создайте элемент «div» в области заголовка. После этого, задайте для div-элемента атрибут «data-role» в значении «navbar„.
  • Внутри блока “div» создайте элемент «ul«, содержащий по одному элементу «li» для каждой ссылки.
  • В пределах каждого элемента «li» пропишите элемент «<a>» с атрибутом «href«, использующим ярлык страницы, на которую перенаправляет ссылка. После этого в атрибуте «data-icon» пропишите выбранную иконку.
  • Для активного пункта навигационной панели задайте атрибут «class» в значении «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. К примеру, промежутки между блоками неупорядоченного списка и отформатированной таблицы одинаково хорошо воспринимаются. Также, черный шрифт на сером фоне гармонирует со стилем других мобильных приложений.

  • Стили по умолчанию базовых элементов HTML

Вкратце

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

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

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

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

Другим способом задания темы является установка атрибута «class» в значении, соответствующем теме. Это продемонстрировано на первом примере после таблицы. Как результат, jQuery Mobile сначала применяет к элементу меню стиль по умолчанию, а затем использует тему «b» для форматирования. В дальнейшем вы увидите еще несколько примеров использования стилей.

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

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

  • Две шапки и панели навигации (слева: шапка «a», панель «b»; справа: шапка «e», панель «d»), демонстрирующие использование тем.

HTML второй шапки и панели:

<header data-role="header" data-theme="e">
	<h1>SJV Town Hall</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«>News</a></li>
		</ul>
	</div>
</header>

Пять тем jQuery Mobile:

Тема Описание
a Черный фон, белый шрифт. По умолчанию
b Голубой фон, белый шрифт
c Светло-серый фон, черный шрифт. Текст полужирный
d Светло-серый фон, черный шрифт. Текст не полужирный
e Оранжевый фон, черный шрифт. Используйте для придания акцентов и не увлекайтесь

Два способа задействовать тему:

Используя атрибут «data-theme»:

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

Используя атрибут «class» для выбора темы:

<div class="ui-bar ui-bar-b">Bar</div>

Вкратце

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

Перспективы

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

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

Автор: Зак Равалькаба и Энн Боэм

Оригинал: http://www.netmagazine.com/tutorials/create-mobile-website-jquery-mobile

Рекомендуем:


CMS Magazine CMS Magazine
Реклама
RSS-подписка
CMS Magazine CMS Magazine
CMS Magazine