Мобильная версияКак создать раскрывающийся элемент для закрытия с помощью jQuery или Javascript? ⇐ Jquery
-
Anonymous
Как создать раскрывающийся элемент для закрытия с помощью jQuery или Javascript?
В качестве эксперимента я пытался придумать простой способ создания модального окна (по сути просто элемента div), который можно было бы закрыть на мобильном устройстве. под закрытием я имею в виду удаление с экрана/представления.
Чтобы объяснить это, вот пример угловой версии: здесь
Мне нужно найти способ сделать это с помощью JavaScript или jQuery.
Я знаю, что Hammerjs — это то, что я могу использовать, но я не смог найти простой/легкий способ сделать это!
Кроме того, я знаю, что у Hammerjs есть некоторые проблемы с вертикальным пролистыванием/прокруткой!
вот пример javascript, но он не дает мне того результата, который я ищу:
document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false); вар xDown = ноль; вар yDown = ноль; функция getTouches(evt) { вернуть evt.touches || // API браузера evt.originalEvent.touches; // jQuery } функция handleTouchStart(evt) { const firstTouch = getTouches(evt)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }; функция handleTouchMove(evt) { если ( ! xDown || ! yDown ) { возвращаться; } вар xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; вар xDiff = xDown - xUp; вар yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*наиболее значимое*/ если ( xDiff > 0 ) { /* свайп вправо */ тревога(); } еще { /* свайп влево */ } } еще { если ( yDiff > 0 ) { /* пролистывание вниз */ } еще { /* пролистывание вверх */ } } /* сброс значений */ хВниз = ноль; yDown = ноль; }; Может кто-нибудь посоветовать по этому поводу?
В качестве эксперимента я пытался придумать простой способ создания модального окна (по сути просто элемента div), который можно было бы закрыть на мобильном устройстве. под закрытием я имею в виду удаление с экрана/представления.
Чтобы объяснить это, вот пример угловой версии: здесь
Мне нужно найти способ сделать это с помощью JavaScript или jQuery.
Я знаю, что Hammerjs — это то, что я могу использовать, но я не смог найти простой/легкий способ сделать это!
Кроме того, я знаю, что у Hammerjs есть некоторые проблемы с вертикальным пролистыванием/прокруткой!
вот пример javascript, но он не дает мне того результата, который я ищу:
document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false); вар xDown = ноль; вар yDown = ноль; функция getTouches(evt) { вернуть evt.touches || // API браузера evt.originalEvent.touches; // jQuery } функция handleTouchStart(evt) { const firstTouch = getTouches(evt)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }; функция handleTouchMove(evt) { если ( ! xDown || ! yDown ) { возвращаться; } вар xUp = evt.touches[0].clientX; var yUp = evt.touches[0].clientY; вар xDiff = xDown - xUp; вар yDiff = yDown - yUp; if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*наиболее значимое*/ если ( xDiff > 0 ) { /* свайп вправо */ тревога(); } еще { /* свайп влево */ } } еще { если ( yDiff > 0 ) { /* пролистывание вниз */ } еще { /* пролистывание вверх */ } } /* сброс значений */ хВниз = ноль; yDown = ноль; }; Может кто-нибудь посоветовать по этому поводу?
