Вернуться в библиотеку

Реализация мобильных веб-сайтов с помощью jQTouch Framework

Автор: Azam Mohammad
Перевод: Малёваный Е. Ф.
Источник: http://www.devproconnections.com/content1/topic/implement-mobile-websites-jqtouch-framework-139829/catpath/mobile-development

Аннотация

Мобильные устройства стали необходимостью в современном технически-оснащенном мире, и просмотр мобильных веб-сайтов является типичной задачей. К сожалению, большинство веб-сайтов не спроектированы для воспроизведения на мобильном устройстве, и как результат – плохо совместимы с пользователями. В этой статье, я объясню, как использовать jQTouch framework для создания веб-сайтов, совместимых со всеми популярными мобильными устройствами, и верну пользователям мобильных устройств радость от веб-серфинга.

Что такое jQTouch Framework?

jQTouch – это плагин для библиотеки jQuery, который предоставляет встроенную анимацию, автоматическую навигацию и темы для мобильного WebKit-браузера, который работает на таких устройствах, как iPhone, Androidm и Palm Pre. Основная цель библиотеки jQTouch – сделать навигацию сайта проще для пользователей, которые используют веб-сайт на мобильном устройстве.

Сценарий

В этой статье мы будем работать над веб-страницей с простым содержанием и преобразуем ее для воспроизведения на мобильном устройстве. Для простоты мы сосредоточимся только на нескольких страницах вебсайта, который включает в себя такие компоненты, как Меню, Последние Статьи и Последние Видео. На рисунке 1 изображен скриншот одной из этих страниц, как он выглядит в браузере на рабочем столе. Веб-страница не иллюстрирует стилей или тем; такие факторы не важны для сути данной статьи.

Демо-версия веб-страницы
Рисунок 1 – Демо-версия веб-страницы

Разработка для мобильных устройств

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

Загрузка jQTouch Framework . Первый шаг в использовании библиотеки jQTouch – загрузить ее. Вы можете легко загрузить библиотеку jQTouch с веб-сайта jQTouch.

Активация jQTouch Framework . Следующим шагом является активация библиотеки jQTouch. Для того это сделать, добавьте необходимые папки JavaScript и Cascading Style Sheets (CSS) в ваш проект. Разместите папки jqtouch и themes внутри загруженной вами папки, затем скопируйте эти папки в проект вашего веб-приложения:

- jqtouch: Эта папка содержит необходимые файлы JavaScript и CSS, которые используются библиотекой jQTouch.

- themes: Эта папка содержит CSS и изображения, которые используются для обеспечения темы дисплея. Тема Apple используется по умолчанию, но вы можете изменить тему на любую, которую захотите.

После добавления необходимых стилей и файлов JavaScript, мы открыли jQTouch для нашей веб-страницы. Теперь нам нужно использовать эти стили для мобильной версии веб-страницы. JQTouch работает на воспроизведение предопределенных стилей, создает внешний вид приложения, разработанного для мобильного устройства. Давайте начнем с определения имени панели инструментов. Мы делаем это, используя домашний класс:

<div id="home">

<div class="toolbar">

<h1>My website</h1>

</div>

</div>

На рисунке 3 показано, каким образом этот код отображается на веб-странице.

Панель управления, включенная в веб-страницу при помощи использования библиотеки jQTouch
Рисунок 3 – Панель управления, включенная в веб-страницу при помощи использования библиотеки jQTouch

Теперь добавим опцию выбора последних статей. Взгляните на соответствующий код:

<div id="home">

<div class="toolbar">

<h1>My website</h1>

</div>

<ul class="edgetoedge">

<li><a href="#latest_articles">Latest Articles</a></li>

</ul>

</div>

Тэг ul позволяет нам воспроизвести список пунктов. Класс edgetoedge отвечает за растяжку элементов списка полностью до правого края экрана. На рисунке 4 изображен результат данного кода на веб-странице.

Ссылка на последние статьи, добавленная на веб-страницу
Рисунок 4 – Ссылка на последние статьи, добавленная на веб-страницу

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

<ul class="edgetoedge">

<li class="arrow"><a href="#">Latest Articles</a></li>

</ul>