Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Чем заменить hover для touchscreen?

Автор: ksnk 24.12.2012, 16:13

Есть менюшка, которая открываетcя-закрывается по mouse-hover. К сожалению, на сенсорных устройствах она не работает. Чем и как, обычно, заменяют такие менюшки? Хочется примерно сохранить функциональность и внешний вид.

Как вариант, сейчас рассматривается "двойной тык". Первый тач - открытие меню, второй (в открытое уже) - переход.

Есть ли что-нибудь попроще Modernizer'а для определения типа экрана?

Автор: CruorVult 24.12.2012, 17:46

Можно сделать свайп вниз/вверх или вправо/влево

Реализуется свайп через touchstart + touchmove + touchend

Автор: CruorVult 24.12.2012, 18:08

Цитата(ksnk @ 24.12.2012, 16:13

)

Есть ли что-нибудь попроще Modernizer'а для определения типа экрана?

Тебе нужно определить тачскрин или нет?

Я когда-то выпилил у SenchaTouch

Код


Utils.getDevice = function() {
    var flags;
    var get = function() {
        if (!flags) {
            flags = {
                isMobile: false,
                isDesktop: false
            };
            var names = {
                ios: 'iOS',
                android: 'Android',
                webos: 'webOS',
                blackberry: 'BlackBerry',
                rimTablet: 'RIMTablet',
                mac: 'MacOS',
                win: 'Windows',
                linux: 'Linux',
                bada: 'Bada',
                other: 'Other'
            };
            var prefixes = {
                ios: 'i(?:Pad|Phone|Pod)(?:.*)CPU(?: iPhone)? OS ',
                android: 'Android ',
                blackberry: 'BlackBerry(?:.*)Version\/',
                rimTablet: 'RIM Tablet OS ',
                webos: '(?:webOS|hpwOS)\/',
                bada: 'Bada\/'
            };
            var userAgent = navigator.userAgent, osName,
                i, prefix, match;
            for (i in prefixes) {
                if (prefixes.hasOwnProperty(i)) {
                    prefix = prefixes[i];
                    match = userAgent.match(new RegExp('(?:'+prefix+')([^\\s;]+)'));
                    if (match) {
                        osName = names[i];
                        break;
                    }
                }
            }
            if (!osName) {
                osName = names[(userAgent.toLowerCase().match(/mac|win|linux/) || ['other'])[0]];
            }
            if (/Windows|Linux|MacOS/.test(osName)) {
                flags.isDesktop = true;
            } else {
                flags.isMobile = true;
            }
        }
        return flags;
    };
    return get;
}();

Utils.getDevice().isMobile - это телефоны + планшеты

Автор: ksnk 15.1.2013, 14:44

В продолжении темы о детекторе мобильных устройств
- http://mobiledetect.net/, github https://github.com/serbanghita/Mobile-Detect - детектор мобильных устройств по заголовкам на php стороне. ~ 700 строк. Достаточно точно детектит.

Другое дело, что мне нужно делать это на JS стороне, так что мне больше подходит пример CruorVult.

Автор: Aliance 15.1.2013, 16:47

Вроде обсуждали не детектор, но если уж начали и их, то вам имхо наилучший: http://api.yandex.ru/detector/

Автор: CruorVult 15.1.2013, 17:00

Aliance, предлагаешь еще делать отдельный запрос на сервис для определения девайса?
Тем более если это нужно сделать на клиенте.

Автор: Aliance 15.1.2013, 17:49

CruorVult, не я предлагаю, а Яндекс ;-) Кто считает это затратным, волен не делать и пытаться собрать оную базу самостоятельно.

Автор: ksnk 15.1.2013, 18:03

В моем случае нужно побыстрее выставить обработчики на меню и побыстрее об этом забыть. Асинхронно дожидаться ответа от yandex'а как-то слишком сложно для пары обработчиков событий smile

Автор: CruorVult 15.1.2013, 18:18

Цитата(Aliance @ 15.1.2013, 17:49

)

Кто считает это затратным, волен не делать

Цитата(ksnk @ 15.1.2013, 18:03

)

В моем случае нужно побыстрее выставить обработчики

Естественно, кому-то сервис и нужен, но в контексте задачи этого топика - вряд ли smile

Автор: ksnk 12.2.2013, 15:28

Недавно напоролся на такой трюк, который ставит окончательную, imho, точку в вопросе детектирования устройства.

Код


var touch = ('ontouchstart' in document.documentElement)

Соответственно, если touch, то работаем на девайсе с поддержкой пальцев, иначе - мышка only.

Автор: CruorVult 12.2.2013, 16:49

Есть еще такой способ

Код


function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}

Но, больше склоняюсь к вышеуказанному