A jQuery Plugin for Touch Swiping - Part 1 of 2

This article details building a jQuery plugin for detecting horizontal swipes on touch devices. Part one focuses on creating a responsive image carousel. Part two (not included here) will add swipe detection.

Key Concepts:

• This tutorial creates a jQuery plugin that detects horizontal swipes, primarily demonstrated through an image carousel.
• A step-by-step guide covers the HTML, CSS, and JavaScript foundation of the plugin.
• The core logic resides within the Swiper class, handling browser events and triggering callbacks. The plugin uses a closure to prevent naming conflicts.
• The tutorial explains plugin implementation, including setting carousel limits, tracking position, and defining callbacks using JSON.

HTML & CSS:

The HTML structure for the carousel is straightforward:

<code class="language-html"><div style="width: 330px; height: 200px;">
  <div id="target">
    <div class="frame">
      <div class="pictures">
        <div class="pic"><img src="/static/imghwm/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/imghwm/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/imghwm/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/imghwm/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></code>

The associated CSS styles the carousel:

<code class="language-css">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="language-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));</code>

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

The .pictures div's 400% width accommodates four images, while each .pic div is 25% for even distribution. Adjust these values as needed for different image counts or sizes.

JavaScript (Plugin Skeleton):

The jQuery plugin's basic structure:

<code class="language-javascript">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);
  });
};</code>

This establishes the plugin structure. The Swiper class (detailed below) handles the core functionality. The closure prevents external code from overriding the plugin.

Swiper Class (Partial Implementation):

The Swiper constructor and event handlers:

<code class="language-javascript">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];
};</code>

The points array tracks finger positions. touchstart initializes the starting position, and touchmove (with preventDefault to prevent default scrolling behavior) updates the position and calls the callback.

Swiper Methods (Partial Implementation):

Methods for calculating differences and handling movement:

<code class="language-javascript">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);</code>

diff() calculates the swipe distance. move() updates the position, calls the callback with the distance, and updates the previous position for accurate tracking. start initializes the starting position. (Note: The complete implementation for accessing evt.targetTouches properties is omitted for brevity but is crucial for the full functionality.)

Plugin Invocation:

Example of how to use the plugin:

This sets up the carousel, defines limits, and binds the plugin with the callback function that updates the carousel's position. The Math.max and Math.min ensure the carousel stays within bounds.

This revised response provides a more concise and organized explanation of the plugin's creation, focusing on the key aspects and omitting less essential details for clarity. Remember that the complete implementation of the Swiper class's methods (especially handling different touch event properties across devices) is necessary for full functionality.

The above is the detailed content of A jQuery Plugin for Touch Swiping - Part 1 of 2. For more information, please follow other related articles on the PHP Chinese website!