Un plugin jQuery pour le coup de contact - Partie 1 sur 2

Cet article détaille la construction d'un plugin jQuery pour détecter les balayages horizontaux sur les appareils tactiles. La première partie se concentre sur la création d'un carrousel d'image réactif. La deuxième partie (non incluse ici) ajoutera une détection de balayage.

Concepts clés:

• Ce tutoriel crée un plugin jQuery qui détecte des balayages horizontaux, principalement démontrés via un carrousel d'image.
• Un guide étape par étape couvre la fondation HTML, CSS et JavaScript du plugin.
• La logique principale réside dans la classe Swiper, gérant les événements du navigateur et déclenchant des rappels. Le plugin utilise une fermeture pour empêcher les conflits de dénomination.
• Le tutoriel explique l'implémentation du plugin, y compris la définition des limites de carrousel, le suivi de la position et la définition des rappels à l'aide de JSON.

html & css:

La structure HTML du carrousel est simple:

<div style="width: 330px; height: 200px;">
  <div id="target">
    <div class="frame">
      <div class="pictures">
        <div class="pic"><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791350855.jpg"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791497040.jpg"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791447095.jpg"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
        <div class="pic"><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174035791526338.jpg"  class="lazy" alt="A jQuery Plugin for Touch Swiping - Part 1 of 2 " /></div>
      </div>
    </div>
  </div>
</div>

Le CSS associé styles le carrousel:

img {
  width: 100%;
  margin: 0;
}

.frame {
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  overflow: hidden;
  position: relative;
}

.pictures {
  position: absolute;
  width: 400%;
  left: 0%;
}

.pictures:after {
  content: "<pre class="brush:php;toolbar:false"><code class="javascript">(function ($) {
  'use strict';

  var Swiper = function (el, callbacks) {
    // Constructor logic (detailed below)
  };

  $.fn.swiper = function (callbacks) {
    if (typeof callbacks.swiping !== 'function') {
      throw '"swiping" callback must be defined.';
    }

    this.each(function () {
      var tis = $(this),
        swiper = tis.data('swiper');

      if (!swiper) {
        tis.data('swiper', (swiper = new Swiper(this, callbacks)));
      }
    });
  };
}(jQuery));

20"; display: none; height: 0; } .pictures .pic { width: 25%; float: left; }

La largeur de 400% de la div peut accueillir quatre images, tandis que chaque .pictures div est 25% pour une distribution uniforme. Ajustez ces valeurs au besoin pour différents dénombrements ou tailles d'images. .pic

javascript (squelette de plugin):

La structure de base du plugin jQuery:

var Swiper = function (el, callbacks) {
  var tis = this;
  this.el = el;
  this.cbs = callbacks;
  this.points = [0, 0];

  this.el.addEventListener('touchstart', function (evt) {
    tis.start(evt);
  });
  this.el.addEventListener('touchmove', function (evt) {
    evt.preventDefault();
    tis.move(evt);
  });
};

Cela établit la structure du plugin. La classe

(détaillée ci-dessous) gère la fonctionnalité principale. La fermeture empêche le code externe de remplacer le plugin. Swiper

Classe de glissement (implémentation partielle):

les gestionnaires de constructeurs et d'événements

: Swiper

Swiper.prototype.diff = function () {
  return this.points[1] - this.points[0];
};

Swiper.prototype.move = function (evt) {
  // Logic to update this.points[1] based on evt.targetTouches
  this.cbs.swiping(this.diff());
  this.points[0] = this.points[1];
};

Swiper.prototype.start = function(evt) {
    // Logic to update this.points[0] based on evt.targetTouches
    this.points[1] = this.points[0];
};

le

le tableau suit les positions des doigts. points Initialise la position de départ, et touchstart (avec touchmove pour empêcher le comportement de défilement par défaut) met à jour la position et appelle le rappel. preventDefault

Méthodes de glissement (implémentation partielle):

Méthodes pour calculer les différences et la manipulation du mouvement:

var target = $('#target'),
  pictures = $('.pictures', target),
  MAX_LEFT = -990,
  MAX_RIGHT = 0,
  currPos = 0,
  cb = {
    swiping: function (displacement) {
      currPos += displacement;
      currPos = Math.max(MAX_LEFT, Math.min(currPos, MAX_RIGHT));
      pictures.css('left', currPos + 'px');
    }
  };

target.swiper(cb);

calcule la distance de balayage. diff() met à jour la position, appelle le rappel avec la distance et met à jour la position précédente pour un suivi précis. move() initialise la position de départ. (Remarque: l'implémentation complète pour accéder aux propriétés start est omise par la concision mais est cruciale pour la pleine fonctionnalité.) evt.targetTouches

Invocation du plugin:

Exemple de la façon d'utiliser le plugin:

Cela configure le carrousel, définit les limites et lie le plugin avec la fonction de rappel qui met à jour la position du carrousel. Les

et Math.max s'assurent que le carrousel reste dans les limites. Math.min

Cette réponse révisée fournit une explication plus concise et organisée de la création du plugin, en se concentrant sur les aspects clés et en omettant des détails moins essentiels pour plus de clarté. N'oubliez pas que la mise en œuvre complète des méthodes de la classe Swiper (en particulier gérer différentes propriétés d'événements tactiles sur les appareils) est nécessaire pour les fonctionnalités complètes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!