В этом уроке я научу вас, как использовать iScroll 4 для создания простого мобильного веб-сайта. Созданный нами сайт будет иметь фиксированный заголовок и нижний колонтитул с контентом, который можно легко прокручивать между ними. Как мы увидим, добиться этого эффекта на Android и iOS не так просто, как вы думаете!
Веб-приложения — отличное место для разработчиков интерфейсов, чтобы начать свой путь в мир создания мобильных приложений. Используя имеющиеся у вас знания HTML, CSS и Javascript, вы можете создавать приложения, которые выглядят очень похоже на приложения, разработанные с помощью SDK для собственной платформы. Более того, ваши приложения будут кросс-платформенными и будут работать на любом мобильном устройстве с современным браузером.
Конечно, есть некоторые ограничения для разработки для мобильных браузеров. Некоторые из них могут быть очевидны, например, невозможность подключиться к камере устройства (по крайней мере, на данный момент). Другие могут быть не такими очевидными, как, например, огромное количество мобильных браузеров, которые уже используются (разнообразие ошеломляет).
Хотя существует множество платформ (например, jQuery Mobile, SenchaTouch и т. Д.), Которые могут помочь вам начать работу с мобильными веб-приложениями, на данный момент я не собираюсь использовать ни одну из них. Вместо этого я собираюсь сосредоточиться на чистом JavaScript с одной удобной библиотекой: iScroll 4.
iScroll решает проблему в мобильных браузерах на основе WebKit, которые есть как на Android, так и на iOS. Оба этих браузера не поддерживают абсолютно позиционированный контент верхнего и нижнего колонтитула, а прокрутка по умолчанию размещается между ними. Весь документ HTML прокручивается независимо от того, какой CSS у вас есть, чтобы достичь иного. Поскольку многие собственные мобильные приложения разработаны с фиксированной панелью навигации вверху экрана и фиксированной панелью инструментов или панелью вкладок внизу экрана, отсутствие поддержки фиксированного контента в браузерах WebKit действительно является проблемой. Не беспокойтесь: в этом уроке я покажу вам, как добиться этого макета с помощью iScroll.
Шаг 1: Базовый HTML-макет
Давайте продолжим и настроим базовый макет веб-приложения. Это будет довольно простая страница и ни в коем случае не разметка производственного качества, но для этой демонстрации она будет работать хорошо.
Обычно я запускаю большинство мобильных веб-приложений (я буду называть их приложениями Webile) с тем же базовым шаблоном (при условии, что я не использую шаблон HTML5 или другую платформу). Изначально я использовал только метатеги, чтобы установить параметры масштабирования в области просмотра. Я также добавляю небольшой «сброс» к элементам, которые, как я знаю, нуждаются в них. Я очень редко использую сброс CSS для приложений Webile, так как это обычно излишне для мобильного устройства, и как только вы приступаете к оптимизации, обычно меньше — больше.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»content-type» content=»text/html; charset=utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″>
<title>Web App Template</title>
<style type=»text/css» media=»all»>
body,ul,li {
padding:0;
margin:0;
border:0;
}
</style>
</head>
<body>
<header>
Web App Template
</header>
<div id=»wrapper»>
<!—content goes here —>
</div>
<footer>
Some Footer Content
</footer>
</body>
</html>
|
Шаг 2: Базовый CSS
Теперь мы можем добавить немного базового CSS, чтобы получить хороший макет для верхнего и нижнего колонтитула.
|
1
|
body { font-family:helvetica;
|
Теперь у вас должно быть что-то похожее на это. Обратите внимание, что мы дали z-index верхнему и нижнему колонтитулам, это скоро вступит в игру.
Шаг 3: прокручиваемый контент
Теперь пришло время добавить контент, который мы хотели бы прокручивать. Я использовал простой список, но контент может быть любым. Нам нужно убедиться, что все, что мы хотим прокрутить, будет заключено в контейнер с идентификатором, который мы будем использовать для подключения к iScroll. Это будет внутри DIV с идентификатором оболочки, который мы настроили на шаге 1.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<div id=»wrapper»>
<div id=»scroll-content»>
<ul>
<li>Some Stuff</li>
<li>More Stuff</li>
<li>Big Stuff</li>
<li>Small Stuff</li>
<li>Geek Stuff</li>
<li>Nerd Stuff</li>
<li>Fast Stuff</li>
<li>Slow Stuff</li>
<li>Good Stuff</li>
<li>Bad Stuff</li>
<li>Your Stuff</li>
<li>My Stuff</li>
<li>Their Stuff</li>
<li>Our Stuff</li>
<li>Super Stuff</li>
<li>Uber Stuff</li>
<li>Stuff Stuff</li>
<li>French Stuff</li>
<li>German Stuff</li>
<li>English Stuff</li>
<li>American Stuff</li>
<li>Stuff</li>
</ul>
</div>
</div>
|
А затем давайте дадим списку немного приятного CSS, чтобы он выглядел немного менее скучным. Кроме того, мы собираемся расположить обертку с более низким z-индексом, чем верхний и нижний колонтитулы.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
#wrapper {
position:absolute;
z-index:1;
top:45px;
width:100%;
background:#aaa;
overflow:auto;
}
#scroll-content {
position:absolute;
z-index:1;
width:100%;
padding:0;
}
ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
|
Как видите, мы дали оболочке переполнение: auto, которое в браузере позволило бы нам прокрутить оболочку — но если вы зарегистрируете свое устройство …
У нас нет возможности прокрутки. Это та самая проблема, которую iScroll заставили исправить, поэтому давайте поможем нам.
Примечание. Если вы хотите избавиться от панели URL в верхней части приложения (ТОЛЬКО для iOS), вы можете добавить следующую мета-метку.
|
1
|
<meta name=»apple-mobile-web-app-capable» content=»yes» />
|
Теперь, когда / если пользователь добавляет приложение на свой домашний экран, он может запустить его из ОС, как и любое другое приложение, и строка URL-адреса не будет отображаться.
Альтернативный подход к удалению панели URL — это метод, который обсуждал Марк Хэммондс в учебнике « Полноэкранные веб-приложения» — это хороший метод, использующий JavaScript для автоматического скрытия адресной строки. Сейчас я собираюсь использовать метод META TAG, потому что он приятный и чистый и избавляется от нижней панели кнопок в дополнение к адресной строке.
Шаг 4: Включение iScroll в ваш проект
Перейдите на домашнюю страницу iScroll и загрузите исходный код. iScroll 4 является последней версией на момент написания этой статьи и версией, которую мы будем использовать, поэтому обязательно загрузите ее. Разархивируйте загружаемый файл и возьмите файл iscroll-lite.js. Поскольку мы используем только основные функции прокрутки, это все, что нам нужно. Перетащите файл в нужный каталог. Сейчас я собираюсь поместить его в корень проекта.
Шаг 5: Инициализация iScroll
Сначала мы импортируем файл iscroll-lite.js в наш проект. Импортируйте его либо в верхней части (<head>), либо в нижней части (непосредственно перед </ body>) HTML-кода. Я предпочитаю импортировать его внизу
|
1
2
|
<script type=»text/javascript» src=»iscroll-lite.js»></script>
</body>
|
Затем мы устанавливаем функцию, которая запускает iScroll и подключается к оболочке. Наконец, мы добавляем прослушиватель событий в документ, чтобы дождаться загрузки содержимого, прежде чем отключить нашу функцию для запуска iScroll.
|
1
2
3
4
5
6
7
8
|
<script type=»text/javascript»>
var theScroll;
function scroll() {
theScroll = new iScroll(‘wrapper’);
}
document.addEventListener(‘DOMContentLoaded’, scroll, false);
</script>
|
Шаг 6: Конечный продукт
Если вы проверите свое устройство сейчас, у вас должен быть красивый прокручиваемый список с фиксированным верхним и нижним колонтитулами.
Шаг 7: Проверка кода
Вот полный письменный код, используемый в этом совете.
|
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<meta name=»viewport» content=»width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0″>
<meta name=»apple-mobile-web-app-capable» content=»yes» />
<title>Web App Template</title>
<style type=»text/css» media=»all»>
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-family:helvetica;
}
header{
background-color:#deb500;
position:absolute;
z-index:2;
top:0;
width:100%;
height:45px;
padding:0;
}
footer {
background-color:#c27b00;
position:absolute;
z-index:2;
bottom:0;
width:100%;
height:48px;
padding:0;
border-top:1px solid #444;
}
header, footer{
font-size:20px;
text-align:center;
color:#f3f3f3;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
line-height:45px;
}
#wrapper {
position:absolute;
z-index:1;
top:45px;
width:100%;
background:#aaa;
overflow:auto;
}
#scroll-content {
position:absolute;
z-index:1;
width:100%;
padding:0;
}
ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
</style>
</head>
<body>
<header>
Web App Template
</header>
<div id=»wrapper»>
<div id=»scroll-content»>
<ul>
<li>Some Stuff</li>
<li>More Stuff</li>
<li>Big Stuff</li>
<li>Small Stuff</li>
<li>Geek Stuff</li>
<li>Nerd Stuff</li>
<li>Fast Stuff</li>
<li>Slow Stuff</li>
<li>Good Stuff</li>
<li>Bad Stuff</li>
<li>Your Stuff</li>
<li>My Stuff</li>
<li>Their Stuff</li>
<li>Our Stuff</li>
<li>Super Stuff</li>
<li>Uber Stuff</li>
<li>Stuff Stuff</li>
<li>French Stuff</li>
<li>German Stuff</li>
<li>English Stuff</li>
<li>American Stuff</li>
<li>Stuff</li>
</ul>
</div>
</div>
<footer>
Some Footer Content
</footer>
</body>
<script type=»text/javascript» src=»iscroll-lite.js»></script>
<script type=»text/javascript»>
var theScroll;
function scroll() {
theScroll = new iScroll(‘wrapper’);
}
document.addEventListener(‘DOMContentLoaded’, scroll, false);
</script>
</html>
|
Слово предупреждения
Как мы видели в этом руководстве, iScroll решает проблему в некоторых мобильных браузерах на основе webkit с фиксированным позиционированием контента, но следует отметить, что существуют также некоторые потенциальные подводные камни. iScroll не поддерживает все мобильные браузеры, доступные в настоящее время. Например, нет поддержки телефонов с Windows 7. Итак, на данный момент это в значительной степени исправление для Android / iOS WebKit, и, хотя оно действительно предлагает решение, вы можете провести дополнительное исследование того, как iScroll работает «под капотом», прежде чем внедрять его во всем приложении.
Еще учебники по iScroll?
Мы только коснулись функциональности, которую iScroll может предложить для разработки мобильных веб-приложений. В дополнение к тому, что я продемонстрировал в этом руководстве, iScroll также можно использовать для «Вытянуть до обновления», «Горизонтальная прокрутка (для каруселей)», «Сжатие и увеличение» (для фиксированного содержимого) и «Привязка к элементу».
Если вы хотите увидеть дополнительные учебники по этой теме, оставьте комментарий ниже, чтобы сообщить нам!