в файле!

• Необходимые навыки: начальный уровень 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 файлов.

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, открывающий страницу в виде диалогового окна с «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.

Иллюстрация 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

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

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

Вкратце

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

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

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

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

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

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

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:

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

Используя атрибут «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