Javascript Girl
  1. Javascript Girl
  3. Le moyen recommandé d'activer les événements tactiles dans Bootstrap 3?
Intereting Posts
Multiple dropzone.js – page unique Comment activer la console javascript sur Android 4.2.2 Parse query string in JavaScript IE 9 jQuery ne définissant pas la valeur d'entrée Comment frapper le WebSocket Endpoint? Faites défiler la page vers un <a> avec un href particulier avec jQuery JavaScript vérifiant si la ressource est accessible avec l'extraction Comment créer un objet à partir d'une série de paires de valeurs-clés? Comment comparer deux variables contenant des chaînes en JavaScript? Le Widget de filtrage de tablester ne fonctionne pas Utilisation d'autoprefixer avec les postcs dans le pack 2.x Quel moteur de Javascript incorporeriez-vous dans votre application? Quelle est la différence entre D3 et jQuery? Analyser XML JQuery Ajax Response avec l'espace de noms Firefox Javascript: Pourquoi ne fonctionne-t-il pas tout?

Le moyen recommandé d'activer les événements tactiles dans Bootstrap 3?

Maintenant que Bootstrap 3 est sorti, quelle est l'option recommandée pour permettre le contact? Comme auparavant , il n'y a pas beaucoup d'événements tactiles dans bootstrap.js, bien qu'il soit censé être un premier cadre mobile.

La dernière chose que j'ai trouvée sur github suggère d'utiliser fastclick.js, mais c'était avant la version de v3.0.

Ma recommandation est d'utiliser Bootstrap aux côtés de JQuery mobile, TouchSwipe ou Hammer.js. Un exemple d'un carrousel tactile de démarrage peut être trouvé ici .

Commencez à travailler sur un Touch Carousel entièrement fonctionnel sur GitHub. Cela comprend également des événements de glisser …

Bien que je pense que bootstrap est une blague d'un framework css, en particulier en raison d'une navigation multi-niveaux.

Je serais probablement d'accord avec d'autres pour aller avec un carrousel différent si vous avez le choix. De mon expérience, JQuery Mobile fonctionnera plutôt bien, mais mon site n'a pas été construit sur le côté de jquery mobile et les css qui lui appartiennent ont réagi. 

<script> $(document).ready(function() { $('.carouselresp').carousel({'data-interval': 6000, 'data-pause': "hover"}); var clicking = false; var currentMousePos = 0; var newMousePos = 0; $('.carouselresp img').on('mousedown', function(event) { clicking = true; currentMousePos = event.pageX; }); $('.carouselresp img').on('touchstart', function(event) { clicking = true; var touchstart = event.originalEvent.touches[0]; currentMousePos = touchstart.pageX; }); $(document).on('mouseup', function(event) { clicking = false; }); $('.carouselresp img').on('touchend', function(event) { clicking = false; }); $(document).on('mousemove', function(event) { if (!clicking) { return; }else { if (event.pageX < currentMousePos) { if ((currentMousePos - event.pageX) > 50) { $('.carouselresp').carousel('next'); clicking = false; } } else { if ((event.pageX - currentMousePos) > 50) { $('.carouselresp').carousel('prev'); clicking = false; } } } }); $('.carouselresp img').on('touchmove', function(event) { var touch = event.originalEvent.touches[0]; if (!clicking) { return; }else { if (touch.pageX < currentMousePos) { if ((currentMousePos - touch.pageX) > 50) { $('.carouselresp').carousel('next'); clicking = false; } } else { if ((touch.pageX - currentMousePos) > 50) { $('.carouselresp').carousel('prev'); clicking = false; } } } event.preventDefault(); }); }); </script>

Fonctionne bien pour moi sur Android et iPhone, plus je permet le déplacement même dans les navigateurs sans support tactile

La version de base se trouve ici

Goo.gl/2SIOJj

Espérons que cela a aidé

TomHre