VPF::Чем заменить hover для touchscreen? - Форум программистов

ksnk

Дата 24.12.2012, 16:13 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

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

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

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

Это сообщение отредактировал(а) ksnk - 24.12.2012, 16:14

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

CruorVult

Дата 24.12.2012, 17:46 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

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

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

CruorVult

Дата 24.12.2012, 18:08 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

Цитата(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 - это телефоны + планшеты

Это сообщение отредактировал(а) CruorVult - 24.12.2012, 18:12

ksnk

Дата 15.1.2013, 14:44 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

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

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Aliance

Дата 15.1.2013, 16:47 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

CruorVult

Дата 15.1.2013, 17:00 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

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

Aliance

Дата 15.1.2013, 17:49 (ссылка)

(нет голосов)

Загрузка ...

I ♥ <script>

Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 55
Всего: 137

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

--------------------

• Все о событиях
• Объекты и массивы
• ОКНА И ФРЕЙМЫ

JAVA ≠ JavaScript

ksnk

Дата 15.1.2013, 18:03 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

CruorVult

Дата 15.1.2013, 18:18 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

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

)

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

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

)

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

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

ksnk

Дата 12.2.2013, 15:28 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 84
Всего: 386

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

Код


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

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

Это сообщение отредактировал(а) ksnk - 12.2.2013, 15:28

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

CruorVult

Дата 12.2.2013, 16:49 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 868
Регистрация: 24.9.2008
Где: г.Киев, Украина

Репутация: 13
Всего: 28

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

Код


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

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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »