В первой статье этой серии я показал особенности мобильного приложения «Где я припарковал свой автомобиль» и обрисовал обзор технологий, которые будут использоваться для его реализации. В этой статье я покажу вам источник всех HTML-страниц, составляющих приложение, выделив ключевые моменты каждой из них. Я также объясню короткую таблицу стилей, которая включена.
Домашняя страница
Если вы не создадите явные пользовательские конфигурации, jQuery Mobile загрузит все страницы, используя AJAX, поэтому все точки, необходимые для «Где я припарковал свой автомобиль», такие как CSS и файлы JavaScript, должны быть загружены точкой входа, это index.html
На странице указателя будет отображаться заголовок в верхнем колонтитуле и титры (на самом деле мое имя) в нижнем колонтитуле с кнопкой для просмотра дополнительных сведений об авторе (опять же, я). Как объяснялось в первой части, у указателя есть три кнопки: одна для просмотра и сохранения текущей позиции (где вы припарковали машину), одна для просмотра текущей позиции (и для просмотра маршрута к машине), одна для просмотра. ранее сохраненные позиции.
Сказав это, код домашней страницы приведет к следующему источнику.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where I Parked my Car</title>
<link rel="stylesheet" href="css/jquery.mobile-1.2.0.min.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mobile.config.js"></script>
<script src="js/jquery.mobile-1.2.0.min.js"></script>
<script src="js/cordova-2.0.0.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/functions.js"></script>
<script src="js/maps.js"></script>
<script src="js/positions.js"></script>
<script>
$(document).one('deviceready', initApplication);
</script>
</head>
<body>
<div id="welcome-page" data-role="page">
<header data-role="header">
<h1>Where I parked my car</h1>
</header>
<div id="content" data-role="content">
<p>
Where I parked my car lets you bookmark where you parked your car on a map
and then find a route when you want to return to it. The app will also
save a log of your saved positions (up to 50).
</p>
<a href="map.html?requestType=set" id="set-car-position" data-role="button">Set position</a>
<a href="map.html?requestType=get" id="find-car" data-role="button">Find car</a>
<a href="positions.html" id="positions-history" data-role="button">Positions history</a>
</div>
<footer data-role="footer">
<h3>Created by Aurelio De Rosa</h3>
<a href="aurelio.html" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
</footer>
</div>
</body>
</html>
Вы можете заметить, что для верхнего и нижнего колонтитула приложения я использовал новые теги HTML5 <header><footer><div> Кроме того, все кнопки внутри тегов <header><footer>data-iconpos="notext" Этот атрибут очень полезен для маленьких экранов. Однако, как вы увидите позже, я прикреплю обработчик к pagebeforecreateorientationchange
Страница карты
Страница карты ( map.html Фактически, кроме заголовка, содержащего заголовок приложения, в нем будет один пустой <div> (Карта будет сгенерирована на лету API Карт Google, поэтому вам не придется беспокоиться о разметке.)
В заключение, полный код страницы карты выглядит следующим образом:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Where I parked my car</title>
</head>
<body>
<div id="map-page" data-role="page">
<header data-role="header">
<a href="#" data-icon="back" data-rel="back" data-iconpos="notext" title="Go back">Back</a>
<h1>Where I parked my car</h1>
</header>
<div id="content" data-role="content">
<div id="map">
</div>
</div>
</div>
</body>
</html>
В разделе <head> Я буду полагаться на стандартный механизм AJAX jQuery Mobile, поэтому нет необходимости добавлять их на страницы вручную, кроме точки входа «Где я припарковал свой автомобиль». Как вы, наверное, заметили, в <header> Для этого есть две причины, одна из которых менее очевидна, чем другая. Первое и более простое — повысить удобство использования. Что касается второй причины, помните, что приложение, разработанное с использованием jQuery Mobile и Cordova, может быть развернуто во многих операционных системах. Тем не менее, хотя API-интерфейсы Cordova работают практически одинаково на всех платформах, между физическими устройствами существуют некоторые существенные различия. Например, на устройствах Android есть физическая кнопка «вернуться», поэтому, если вы хотите перейти на предыдущую страницу, вы можете использовать ее. И наоборот, у iPhone нет физической кнопки «вернуться» (кроме кнопки «домашний экран», которая полностью закрывает приложение), поэтому, если вы не встроите ее в свой интерфейс, пользователи iPhone будут очень наказываться.
История позиций
Страница истории позиций ( positions.html На странице есть пустой список, который будет заполнен программно, как вы увидите позже. Список имеет два ключевых атрибута для анализа: data-filter="true"data-split-icon="delete" Последний используется в списках разделенных кнопок , типе списка, где каждый элемент имеет две ссылки, которые (должны) выполнять различные действия: основное действие, активируемое, когда пользователь нажимает на текст элемента списка (первый текст ссылки), и вторичная активируется с помощью кнопки, заменяющей текст вторичной ссылки, расположенной после текста элемента.
Полный источник positions.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Positions' history</title>
</head>
<body>
<div id="positions-page" data-role="page">
<header data-role="header">
<a href="#" data-icon="back" data-rel="back" data-iconpos="notext" title="Go back">Back</a>
<h1>Positions' history</h1>
</header>
<div id="content" data-role="content">
<ul id="positions-list" data-role="listview" data-inset="true" data-split-icon="delete" data-filter="true">
</ul>
</div>
<footer data-role="footer">
<h3>Created by Aurelio De Rosa</h3>
<a href="aurelio.html" data-icon="info" data-iconpos="notext" class="ui-btn-right">Credits</a>
</footer>
</div>
</body>
</html>
Страница кредитов
Страница кредита ( aurelio.html Он просто содержит некоторую информацию об авторе, включая фотографию. Вы можете увидеть код страницы ниже:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelio De Rosa</title>
</head>
<body>
<div data-role="page">
<header data-role="header">
<a href="#" data-icon="back" data-iconpos="notext" data-rel="back" title="Go back">Back</a>
<h1>Aurelio De Rosa</h1>
</header>
<div id="content" data-role="content">
<div class="person">
<img class="photo" src="images/aurelio-de-rosa.png" alt="Photo of Aurelio De Rosa" />
<dl class="informations">
<dt>Email:</dt>
<dd><a href="mailto:[email protected]">[email protected]</a></dd>
<dd><a href="mailto:[email protected]">[email protected]</a></dd>
<dt>Twitter:</dt>
<dd><a href="https://twitter.com/AurelioDeRosa" target="_blank">@AurelioDeRosa</a></dd>
<dt>Information:</dt>
<dd>
I've a Bachelor degree in Computer Science. I'm a self-employed web developer
who have been worked for more than 2 years at the University of Salerno.
I'm also a technical writer for the <a href="http://ug.audero.it/">Audero user group</a>
and for the SitePoint network on <a href="http://www.sitepoint.com/author/aderosa/">SitePoint.com</a>,
<a href="http://www.sitepoint.com/author/aderosa/">JSPro.com</a> and
<a href="http://www.sitepoint.com/author/aderosa/">PHPMaster.com</a>.
I'm a very IT addicted and my main fields are web technologies, especially HTML, CSS,
JavaScript, PHP, jQuery, jQuery Mobile, PhoneGap and Zend Framework.<br />
</dd>
</dl>
</div>
</div>
</div>
</body>
</html>
Стиль Тюнинг
jQuery Mobile очень хорошо работает над улучшением интерфейса страниц, тем не менее, всегда есть место для некоторой настройки стиля. По умолчанию, даже если у вас нет кнопок в верхнем или нижнем колонтитулах страницы, фреймворк по-прежнему резервирует некоторое пространство с обеих сторон элементов. Таким образом, если текст внутри верхнего или нижнего колонтитула (обычно это заголовок, как вы видели в перечисленных источниках) превышает это пространство, jQuery Mobile обрезает текст и добавляет многоточие. Однако это происходит и с другими элементами, и я не всегда хочу, чтобы это произошло. Итак, в очень короткой таблице стилей, которую я упоминал в предыдущей статье, которая называется style.csswhite-space: normal !important; , Еще один важный момент для обсуждения — <div>map Как было сказано ранее, он будет заполнен программным способом API Карт Google, поэтому вначале он не имеет собственной высоты (это просто пустой <div> Это означает, что если вы не установите высоту, вы не увидите карту, даже если работает API Карт Google. Я установил высоту 600 пикселей, но вы можете изменить ее на свой вкус.
Источник обсуждаемой таблицы стилей указан ниже:
.ui-header .ui-title,
.ui-footer .ui-title,
.ui-btn-inner *
{
white-space: normal !important;
}
.photo
{
display: block;
margin: 0px auto;
}
dl.informations dt
{
font-weight: bold;
}
#map
{
width: 100%;
height: 600px;
}
Вывод
В этой части серии я показал все HTML-страницы «Где я припарковал свой автомобиль», так что теперь вы можете перемещаться по ним. Однако на данный момент на страницах отсутствует бизнес-логика, которая будет регулировать функциональность и взаимодействие. В следующей статье я начну рассказывать о некоторых файлах JavaScript, используемых в приложении, и углублюсь в API Cordova.