JQuery Mobile - 如何仅将其用于滑动

JQuery Mobile - how to use it for ONLY swipe

本文关键字：用于 何仅 Mobile JQuery      更新时间：2023-09-26

我在使用jquery移动包时遇到了巨大的问题，它通过使链接转到ajax并显示加载div等来破坏我的整个页面。我尝试将它们全部修复，并以某种方式使用大量多余的代码对其进行管理（我不知道哪个部分确切地隐藏了加载部分，哪个部分撤消了 ajax）。

基本上JQuery移动版把我的页面弄得一团糟，我所需要的只是滑动事件，我找到了jquery mobile的github存储库（这里），但老实说，我不知道该采取哪些部分，以便我可以使用滑动事件。

我知道人们想要代码，但我的代码在这里没有问题，JQuery mobile只是想打开ajax中的所有链接，因为我使用的是bootstrap，除了滑动之外，我不使用JQuery移动做任何其他事情，所以我不会粘贴任何东西。

如果有人能告诉我需要采取/修改哪些部分才能使其工作，那就太棒了。

我尝试只复制事件/触摸.js但它不起作用。

这是一个

老问题，但我今天遇到了同样的问题，并通过这个称为滑动检测的小片段找到了非常实用的解决方案.js，它只是这样做，没有别的。

你可以这样使用它（所有功劳都归功于亚历山大·埃马舍夫）：

(function($) {
  $.fn.swipeDetector = function(options) {
    // States: 0 - no swipe, 1 - swipe started, 2 - swipe released
    var swipeState = 0;
    // Coordinates when swipe started
    var startX = 0;
    var startY = 0;
    // Distance of swipe
    var pixelOffsetX = 0;
    var pixelOffsetY = 0;
    // Target element which should detect swipes.
    var swipeTarget = this;
    var defaultSettings = {
      // Amount of pixels, when swipe don't count.
      swipeThreshold: 70,
      // Flag that indicates that plugin should react only on touch events.
      // Not on mouse events too.
      useOnlyTouch: false
    };
    // Initializer
    (function init() {
      options = $.extend(defaultSettings, options);
      // Support touch and mouse as well.
      swipeTarget.on("mousedown touchstart", swipeStart);
      $("html").on("mouseup touchend", swipeEnd);
      $("html").on("mousemove touchmove", swiping);
    })();
    function swipeStart(event) {
      if (options.useOnlyTouch && !event.originalEvent.touches) return;
      if (event.originalEvent.touches) event = event.originalEvent.touches[0];
      if (swipeState === 0) {
        swipeState = 1;
        startX = event.clientX;
        startY = event.clientY;
      }
    }
    function swipeEnd(event) {
      if (swipeState === 2) {
        swipeState = 0;
        if (
          Math.abs(pixelOffsetX) > Math.abs(pixelOffsetY) &&
          Math.abs(pixelOffsetX) > options.swipeThreshold
        ) {
          // Horizontal Swipe
          if (pixelOffsetX < 0) {
            swipeTarget.trigger($.Event("swipeLeft.sd"));
            console.log("Left");
          } else {
            swipeTarget.trigger($.Event("swipeRight.sd"));
            console.log("Right");
          }
        } else if (Math.abs(pixelOffsetY) > options.swipeThreshold) {
          // Vertical swipe
          if (pixelOffsetY < 0) {
            swipeTarget.trigger($.Event("swipeUp.sd"));
            console.log("Up");
          } else {
            swipeTarget.trigger($.Event("swipeDown.sd"));
            console.log("Down");
          }
        }
      }
    }
    function swiping(event) {
      // If swipe don't occuring, do nothing.
      if (swipeState !== 1) return;
      if (event.originalEvent.touches) {
        event = event.originalEvent.touches[0];
      }
      var swipeOffsetX = event.clientX - startX;
      var swipeOffsetY = event.clientY - startY;
      if (
        Math.abs(swipeOffsetX) > options.swipeThreshold ||
        Math.abs(swipeOffsetY) > options.swipeThreshold
      ) {
        swipeState = 2;
        pixelOffsetX = swipeOffsetX;
        pixelOffsetY = swipeOffsetY;
      }
    }
    return swipeTarget; // Return element available for chaining.
  };
})(jQuery);
// Showcase
$("document").ready(function() {
  var message = $(".message");
  $(".swipe-detector")
    .swipeDetector()
    .on("swipeLeft.sd swipeRight.sd swipeUp.sd swipeDown.sd", function(event) {
      if (event.type === "swipeLeft") {
        message.text("Swipe Left");
      } else if (event.type === "swipeRight") {
        message.text("Swipe Right");
      } else if (event.type === "swipeUp") {
        message.text("Swipe Up");
      } else if (event.type === "swipeDown") {
        message.text("Swipe Down");
      }
    });
});
    * {
      font-family: sans-serif;
      box-sizing: border-box;
    }
    
    html, body {
      height: 100%;
    }
    
    body {
      background-color: #ffffff;
    }
    
    h1 {
      text-align: center;
      color: #4e84ba;
      text-shadow: 1px 1px 10px rgba(40, 127, 214, 0.18);
    }
    
    .swipe-detector {
      width: 350px;
      height: 200px;
      background-color: #52a9e8;
      margin: 65px auto 0;
      text-align: center;
      overflow: hidden;
      position: relative;
      box-shadow: 5px 5px 15px rgba(101, 166, 201, 0.34);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-content: center;
    }
    
    .message {
      display: inline-block;
      color: #ffffff;
      -webkit-user-select: none;
      user-select: none;
      
    }
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Simple swipe jQuery plugin</h1>
  
   <div class="swipe-detector">
     <span class="message">Use touch or mouse to swipe.</span>
   </div>

如果您想

在不使用ajax的情况下导航页面，则应添加标签rel=external或data-ajax="false"您可以在此处找到有关Jquery移动版的更多信息

编辑

我有另一个解决方案，但我不喜欢，但我之前也有同样的问题，所以我尝试了这个解决方案

$(document).ready(function(){
$("a").click(function (){
window.top.location = $(this).attr("href");
return false;
});
});

试试这个，我希望它也对你有用。

当用户单击任何Hyperlink时，此功能将强制更改文档位置

相关文章：