—»     —»   MooTools Mobile: оно «трогательно»!
  Раздел: Библиотеки скриптов, Фреймворки и Платформы   Нет комментариев  

MooTools Mobile: оно «трогательно»!



Когда сообщество разработчиков обратилось к команде MooTools с просьбой о том, чтобы MooTools была добавлена основная функция прослушки класса событий, разработчики инструмента не опустили это из внимания. Сегодня MooTools поддерживает все события жестов и прикосновений. Но что если нам хотелось бы более расширенного функционала отслеживания мобильных событий, как например, определение направления переворота корпуса, или щепотку и так далее? Именно здесь нам на помощь приходит MooTools Mobile от Кристофа Пойера (Christoph Pojer). MooTools Mobile – это не совсем полноценная мобильная платформа, это больше похоже на набор инструментов для улучшения мобильных приложений. Давайте рассмотрим ресурсы, которые нам предоставляет MooTools Mobile.

MooTools Mobile: оно «трогательно»!

Так как задача была поставлена профессионалам из команды MooTools, но классы событий, основанные на технологии touch, от Кристофа получились компактными и модульными. Каждый класс может быть найден в пределах технологии Touch.

Swipe

Используя технологию Touch/Swipe, вы можете определять направление движение пальца, а также начальные и конечные координаты:

// Add the swipe event listener
anyElement.addEvent("swipe", function(event){
    event.direction // "left" or "right"
    event.start // {x: Number, y: Number} Swipe start position
    event.end // {x: Number, y: Number} Swipe end position
});

// Configure minimal swipe distance and vertical swipe preferences
anyElement.store("swipe:distance", 30); // Default: 50
anyElement.store("swipe:cancelVertical", true); // Default: false

Как видно в коде сверху, вы также можете настроить минимальные дистанции скольжения или отключить вертикальное скольжение.

Pinch

Touch/Pinch позволяет вам определять события, когда пользователь «щиплет» дисплей, и в данной функции тоже есть свои настройки:

// Add a pinch event to anyElement
anyElement.addEvent("pinch", function(event){
    event.pinch // "in" or "out"
});

// Store a custom threshold
anyElement.store("pinch:threshold", 0.3); // Default: 0.5; Amount of scaling to be done to fire the pinch event

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

Touchhold

Данное событие используется во всех мобильных операционных системах, так почему не встроить ее в браузер?

//  Listen for touchhold on anyElement
anyElement.addEvent("touchhold", function(event){
    // Event fires
});

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

anyElement.store("touchhold:delay", 1000); // Default: 750

Максимум универсальности и минимум кода!

Расширения браузера

Кроме этих пользовательских touch-событий, MooTools Mobile также может предоставлять дополнительную информацию посредством параметров устройства в браузере:

Browser.Device // Object added to Browser
  Browser.Device.name // ipad / iphone / ipod OR other
  Browser.Device.ipad // true if on ipad
  Browser.Device.iphone // true if on iphone
  Browser.Device.ipod // true if on ipod
  Browser.hasHighResolution // true on iPhone 4
  Browser.isMobile // True on any platform that is not Windows / Linux / Mac

Эти параметры дают вам возможность больше узнать о возможностях устройства!

С интенсивным развитием мобильных устройств, важно сделать так, чтобы ваш веб-сайт был максимально адаптирован под них. Подобная разработка от Кристофа – это всего лишь небольшой помощник, который понадобится разработчикам, чтобы максимально продуктивно адаптировать веб-приложения, основанные на MooTools.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: Mootools, мобильные сайты
Опубликовал Design FactoRy   Прочитано (раз): 6063   |   Нет комментариев
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Длф трифолиум
Интернет-магазин семян История гольфа
euro-semena.ru
Лечение анорексии
Лечение бесплодия
psy-ihb.ru
майнинг pokerstars
professional players
hhmailer.com
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930