Разработка мобильных приложений / Разработка навигации с помощью jQuery

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

В этом уроке я покажу, как вы можете создать мобильный веб-сайт / веб-приложение. Мы будем использовать медиазапросы CSS3 для таргетинга на конкретные устройства и разрешения экрана. Плюс немного jQuery помогает анимировать меню и загружать контент внешней страницы с помощью Ajax-вызовов. Более того, макет может даже расширяться для правильного отображения в обычных настольных браузерах, таких как Chrome или Firefox.

Live Demo
Исходный код

Определение структуры страницы

Давайте начнем с того, что сначала перейдем к HTML-странице и стилизуем ее, используя некоторые правила CSS. Я пропущу большинство необычных метатегов в заголовке, поскольку они не влияют непосредственно на веб-приложение. Однако есть несколько, которые я должен упомянуть, а именно из фрагмента ниже:

X-UA-Compatible используется для описания того, как ваш документ должен отображаться в определенных браузерах. Это интересный сценарий при кодировании в HTML5, поэтому я бы не стал сильно беспокоиться об этом. Однако мета окно просмотра тег очень важен. Устанавливает окно мобильного браузера на 100% вместо стандартного эффекта увеличения.

Также возможно отключить пользовательское масштабирование со значением контента Пользователь масштабируемый = нет. Но в этом случае мы просто хотим установить полную ширину экрана равной ширине нашего устройства. Теги веб-приложения Apple позволят сохранить веб-сайт в виде значка домашнего экрана на вашем iPhone или iPod Touch. Не совсем необходимо, но, безусловно, стоит иметь.

Содержание внутреннего тела

Внутри тега body я установил div обертки с идентификатором #W. Внутри я разбил макет еще на два элемента, используя идентификаторы #pagebody а также #navmenu. Ширина всей страницы ограничена до 640 пикселей по выбору, так что макет масштабируется до строгого числа.

   HK Mobile
 
  Добро пожаловать на мобильный сайт!
 
 
   Ссылки меню
 
  Главная
 Насчет нас
 афишировать
 Напишите нам
 контакты
 политика конфиденциальности

Меню навигации имеет более низкое значение z-index, чтобы #pagebody всегда на высоте. Это очень важно, так как код JavaScript будет скользить по телу страницы на определенное количество пикселей, чтобы показать навигацию внизу.

Я использовал хеш-символ (#) перед каждой .html-страницей, чтобы остановить плохое поведение в Mobile Safari. Всякий раз, когда вы нажимаете на ссылку, появляется панель URL, которая перемещает содержимое вниз. Но при обращении к идентификатору ничего не загружается, кроме как через вызовы JavaScript.

CSS Позиционирование

В нашем CSS-коде не так много запутанного контента. Большая часть позиционирования выполняется вручную, а затем управляется с помощью jQuery. Но в нашем документе есть несколько интересных частей.

/ ** @ основное тело группы ** / #w #pagebody позиция: относительная; слева: 0; максимальная ширина: 640 пикселей; минимальная ширина: 320 пикселей; z-индекс: 99999;  #w #navmenu background: # 475566; высота: 100%; дисплей: блок; положение: фиксированное; ширина: 300 пикселей; слева: 0px; верх: 0px; z-индекс: 0;

Этот верхний сегмент определяет стили для обоих разделов страницы. Наше навигационное меню имеет ширину всего 300 пикселей, так что остается немного места для того, чтобы содержимое страницы оставалось видимым. Кнопка открытия / закрытия меню также расположена прямо слева и всегда доступна. Важной частью здесь является значение свойства z-index и использование положение: фиксированное; по нашему навмену.

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

/ ** @ заголовок группы ** / #w # pagebody header # toolbarnav display: block; положение: фиксированное; слева: 0px; верх: 0px; z-индекс: 9999; background: # 0b1851 url ('img / tabbar-solid-bg.png') вверху слева no-repeat; радиус границы: 5 пикселей; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; граница нижний правый радиус: 0; -moz-border-radius-bottomright: 0; -webkit-border-bottom-right-radius: 0; граница нижний левый радиус: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0; высота: 44 пикс; ширина: 100%; максимальная ширина: 640 пикселей;  #w #pagebody header # toolbarnav h1 text-align: center; padding-top: 10px; отступ справа: 40px; цвет: # e6e8f2; вес шрифта: полужирный; размер шрифта: 2,1em; тень текста: 1px 1px 0px # 313131;

Мобильные правила

Легко заметить, что я также использую фоновое изображение для синей текстуры заголовка. Он имеет размер 640 × 44 пикселей, чтобы соответствовать согласованной структуре макета. Но я также разработал изображение @ 2x для дисплеев сетчатки iPhone / iPad. Вы можете увидеть оба изображения ниже или взять их из моего исходного кода демо.

System/demo/img/[email protected]
System/demo/img/[email protected]

Я настроил мобильный CSS для этой функции в другом файле с именем responsive.css. Он содержит два медиа-запроса, которые заменяют строку заголовка bg и значок кнопки меню для устройств Retina.

/ ** Retina Display ** / @media только экран и (-webkit-min-device-pixel-ratio: 2), только экран и (min - moz-device-pixel-ratio: 1.5), только экран и ( min-device-pixel-ratio: 1.5) #w #pagebody header background: # 0b1851 url ('img/[email protected] ') вверху слева no-repeat; размер фона: 640px 44px;  #w #pagebody header # menu-btn background: url ('img/[email protected] ') no-repeat; размер фона: 53px 30px;

Разработка стрелок меню

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

#w #navmenu ul li a :: after content: "; display: block; ширина: 6px; высота: 6px; border-right: 3px solid # d0d0d8; border-top: 3px solid # d0d0d8; позиция: абсолютная; правая : 30px; верх: 45%; -webkit-transform: поворот (45 градусов); -moz-transform: поворот (45 градусов); -o-преобразование: поворот (45 градусов); преобразование: поворот (45 градусов); #w #navmenu ul li a: hover :: after border-color: # cad0e6;

Мы используем преобразование Свойство для создания небольшой границы после содержимого. Я тоже настроил положение: абсолютное; поэтому мы можем свободно перемещать эти границы вокруг внутреннего элемента ссылки. Очень просто изменить цвет границы при наведении, что дает более динамичное ощущение. Это невероятно, что вы можете сделать, просто используя основные правила HTML5 и CSS3.

Но теперь давайте перейдем к кусочкам кода JavaScript. Помните, что для правильной работы моего кода требуется включение в библиотеку jQuery..

JQuery Анимированные

При написании этих пользовательских кодов я создал новый документ под названием script.js. Не стесняйтесь писать это прямо в > теги, или скачайте мой пример из исходного кода демо.

 $ (document) .ready (function () var pagebody = $ ("# pagebody"); var themenu = $ ("# navmenu"); var topbar = $ ("# toolbarnav"); var content = $ (") #content "); var viewport = width: $ (window) .width (), height: $ (window) .height (); // извлекаем переменные как // viewport.width / viewport.height 
 Для начала я настроил некоторые переменные страницы, где мы можем ссылаться на элементы в документе намного быстрее. Значение области просмотра никогда не используется, но может быть полезно, если вы хотите настроить этапы анимации. Например, вы можете проверить текущую ширину браузера и открыть свое меню соответственно меньше или шире.
 function openme () $ (function () topbar.animate (left: "290px", duration: 300, queue: false); pagebody.animate (left: "290px", duration: 300 , очередь: ложь););  function closeme () var closeme = $ (function () topbar.animate (left: "0px", duration: 180, queue: false); pagebody.animate (left: "0px", длительность: 180, очередь: ложь);); 
 Далее я определил две важные функции для открытия и закрытия меню. Это можно было бы сделать с помощью одной функции и переключателя обратного вызова - за исключением того, что нам фактически нужно анимировать два разных элемента одновременно. К сожалению, это не стандартное поведение для jQuery, поэтому нам нужно прибегнуть к альтернативному синтаксису.
 Два элемента, на которые мы нацеливаемся, названы topbar а также pagebody. Внутренняя область содержимого с белым фоном - это полное тело страницы; однако у нас есть позиция строки заголовка, зафиксированная в верхней части страницы. Это означает, что он не будет естественным образом анимироваться со страницей, и нам нужно использовать отдельный вызов. Отверстие настроено так, чтобы выдвигать 290 пикселей влево (почти всю ширину навигации 300 пикселей), а функция закрытия отводит его.
 Загрузка динамического контента
 Приведенный выше код достаточно прост для ухода за анимацией. И теоретически это все, что вам нужно для такого простого мобильного веб-сайта - но я хочу добавить еще немного.
 Каждый раз, когда пользователь нажимает на ссылку меню, мы хотим закрыть текущую навигацию и отобразить загрузочный GIF, пока мы ищем содержимое страницы. Затем, после завершения, мы удаляем изображение GIF и загружаем все внутри. Это фантастика, потому что мы можем даже использовать статические HTML-страницы для контента. Никаких PHP, Ruby, Perl или каких-либо бэкэнд-языков, чтобы не запутаться.
 Управление кликами
 Прежде всего мы хотим проверить, когда наши пользователи нажимают на кнопки навигации. Это остановит загрузку обычного значения href, и вместо этого мы можем использовать наши собственные функции для отображения внешнего контента..
 // загрузка содержимого страницы для навигации $ ("a.navlink"). live ("click", function (e) e.preventDefault (); var linkurl = $ (this) .attr ("href"); var linkhtmlurl = linkurl.substring (1, linkurl.length); var imgloader = '«; 
 Теперь мы открываем селектор для любого якоря с классом navlink. Всякий раз, когда пользователь нажимает одну из этих ссылок, мы запрещаем ему загружать и настраиваем переменную для полного URL. Я также установил переменную для содержимого HTML, чтобы включить стандартный загрузчик изображений. Если вы хотите настроить свой собственный, я настоятельно рекомендую Ajaxload.
 Ajax .load ()
 На этот счет есть две разные части, которые я аккуратно разбил. Код ниже - это наш первый бит, который закрывает меню навигации и полностью сдвигает окно документа до самого верха. Мы хотим заменить содержимое внутреннего тела небольшой анимацией загрузчика, и пользователи не смогут увидеть это, если будут смотреть внизу страницы..
 closeme (); $ (function () topbar.css ("top", "0px"); window.scrollTo (0, 1););
 Теперь, наконец, мы хотим заменить содержимое внутреннего тела нашим изображением и загрузить внешнюю страницу для загрузки. Обычно это займет всего пару сотен миллисекунд или даже быстрее, поэтому я установил функцию тайм-аута.
 content.html (imgloader); setTimeout (function () content.load (linkhtmlurl, function () / * no callback * /), 1200);
 Это приостановит 1200 миллисекунд перед загрузкой нового контента. Для моей демонстрации это выглядит намного лучше и дает представление о том, как приложение будет вести себя на медленных интернет-соединениях..
 
 Заключение
 Я призываю всех веб-разработчиков загрузить учебный исходный код и поиграть самостоятельно. Это такой базовый пример того, что может быть достигнуто с помощью HTML / CSS3 и небольшим количеством эффектов JavaScript. Создавать мобильные экраны проще, чем когда-либо, с помощью медиа-запросов и более расширяемых веб-браузеров..
 Посмотрите, сможете ли вы применить этот код в ваших будущих веб-проектах. Создание мобильных приложений - это искусство, очень похожее на веб-дизайн, и требует большой самоотдачи и практики. Я надеюсь, что это руководство станет хорошей отправной точкой для нескольких энтузиастов-разработчиков. Если у вас есть вопросы или мысли о коде, не стесняйтесь поделиться с нами в области пост-обсуждения.