Hammer.js jQuery 插件使用教程

jquery.hammer.jsjQuery plugin for Hammer.js项目地址:https://gitcode.com/gh_mirrors/jq/jquery.hammer.js

本教程将指导您如何安装并使用 jquery.hammer.js，这是一个用于在Web应用中添加触控手势支持的jQuery插件，基于Hammer.js库。

1. 项目目录结构及介绍

当你克隆或下载 https://github.com/hammerjs/jquery.hammer.js.git 项目后，典型的目录结构如下：

- jquery.hammer.js
- dist/
  - hammer.min.js
  - hammer.js
- src/
  - hammer.js
- demo/
  - index.html
- .gitignore
- package.json
- README.md

jquery.hammer.js 是未压缩的源代码文件。
dist/ 目录包含了已压缩的 (hammer.min.js) 和未压缩的 (hammer.js) 核心Hammer.js库。
src/ 包含原始的Hammer.js源代码。
demo/ 提供了一个简单的示例页面来展示插件的使用。
package.json 是npm包管理器的配置文件。
README.md 是项目的说明文档。

2. 项目的启动文件介绍

主要的启动文件是 jquery.hammer.js 或者 dist/ 目录下的压缩版本 hammer.min.js。这两个文件都是Hammer.js的核心库，而jQuery插件部分已经内置其中。为了使用它，你需要先引入jQuery和Hammer.js（或者其压缩版）到你的HTML文件中。例如：

<script src="path/to/jquery.js"></script>
<script src="path/to/hammer.min.js"></script>

之后，你可以通过$.fn.hammer方法创建一个Hammer实例并与jQuery对象集成：

$(selector).hammer(options);

这里的selector是你想要添加手势识别的DOM元素，options是可选的配置对象。

3. 项目的配置文件介绍

尽管Hammer.js本身有自己的配置选项，但这个jQuery插件并没有特定的配置文件。配置通常是通过在创建Hammer实例时传递的options对象完成的。例如，如果你想禁用某些默认的手势，可以这样做：

var options = {
  pan: { direction: Hammer.DIRECTION_HORIZONTAL, threshold: 10 },
  swipe: { velocity: 0.6 }
};
$(selector).hammer(options);

这将限制pan手势只能沿水平方向进行，且设置swipe手势的速度阈值。

要查看完整的配置选项，请参考Hammer.js的官方文档：Hammer.js Docs.

请注意，对于更复杂的用例，你可能需要直接操作Hammer实例以添加自定义识别器或者修改其他设置：

var hammertime = $(selector).data('hammer');
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });

这就是使用Hammer.js jQuery插件的基本步骤和配置。现在你可以尝试在自己的项目中集成这些手势，让交互更加生动有趣。

jquery.hammer.jsjQuery plugin for Hammer.js项目地址:https://gitcode.com/gh_mirrors/jq/jquery.hammer.js

标签

Hammer.js jQuery 插件使用教程