Веб-прототипирование для сенсорных жестов

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

Разработчикам, однако, необходимо создать функциональность, недоступную в статическом каркасе. Веб-прототип больше похож на рабочую модель, которая позволяет разработчику экспериментировать с тем, как все работает на веб-странице.

В этой статье вы узнаете, как создать веб-прототип с помощью сенсорных жестов, используя простые и удобные HTML, CSS и jQuery.

Прототип для Touch

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

Учитывая, что это был всего лишь прототип и не собирался использоваться для реальной разработки, и, учитывая, что у меня ограниченные знания в области программирования (общая проблема для дизайнеров), я искал простую инфраструктуру JavaScript, позволяющую жестам смахивать работать на мобильных браузерах, в частности на планшетах и ​​iPad.

Основным требованием будет показ основной навигационной панели со скользящей анимацией, когда пользователь проводит пальцем слева направо. Я начал Googling и пробовал различные фреймворки от jQuery mobile до hammer.js. Все фреймворки, которые я пробовал, были либо слишком сложны в использовании, либо не очень отзывчивы в мобильных браузерах.

Наконец, я попробовал другой фреймворк под названием wipetouch.js, и он работал так, как я хотел. Он очень прост и удобен, а жест смахивания очень отзывчив на платформах, таких как iOS и Android.

Примечание: демо-версия в основном предназначена для iPad и планшетов, но хорошо работает и в настольных браузерах. Для рабочего стола, вместо свайпа, пользователь может двигать указатель мыши. Чтобы увидеть результат, откройте ссылку на планшете iPad или Android, затем проведите пальцем слева направо, справа налево и сверху вниз.

Посмотреть демо

Файлы, используемые для этого упражнения

• index.html для HTML
• style.css для стайлинга
• common.js для JavaScript
• jquery.wipetouch.js — структура, используемая для жеста смахивания
• и ссылка на файлы jQuery

Изображения, используемые в этом упражнении

Проведите слева направо:
Отображение левой строки меню со скользящей анимацией

Проведите справа налево:
Отображение правой панели со скользящей анимацией

  <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"> </ script>

 <script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"> </ script>

 <script src = "jquery.wipetouch.js"> </ script>

 <script src = "common.js"> </ script> 

  <img src = "images / left_menu.png" width = "262" height = "600" id = "menuLeft"> 

  / * Установить положение левой полосы * /
 #menuLeft {
     позиция: абсолютная;
     Слева направо: 0;
     топ: 0px;
     г-индекс: 99;
 } 

  $ ( "# MenuLeft") скрыть (). 

  wipeRight: функция (результат) {
     $ ("# menuLeft"). show ("slide", {direction: "left"}, 1000);
 } 

  $ ("# menuLeft"). click (function () {
     $ ("# menuLeft"). hide ("слайд", {direction: "left"}, 1000);
 });