logo图片
phoneGap教程

photoGap 检测手势

photoGap 检测手势

手势技术允许我们在不触摸屏幕的情况下与设备进行交互。 PhoneGap 自然不支持手势。为此,我们将使用Hammer min 和time JavaScript 库,因为它是创建移动应用程序最重要的部分之一。有两个问题,即JavaScript是为浏览器构建的。锤子给了我们手势,锤子时间给了我们实际的图书馆。现在,我们将安装这些库。我们将使用以下步骤在我们的应用程序中设置和添加锤子库:

1) 创建一个新项目

首先,我们将创建一个新的一个带有空白模板的PhoneGap 项目。如果您不知道如何使用空白模板创建应用程序,请查看 PhoneGap 项目链接。
检测手势

2) 下载hammer.js文件

现在,我们将转到http://hammerjs.github.io/ 链接并单击 Hammer.min.js 选项。此点击将打开 hammer.min.js 文件的代码。我们将复制完整的代码并将其粘贴到我们合适的编辑器中。之后,我们将其保存在我们应用程序的 www 文件夹中,名称为hammer.js。
检测手势
检测手势
检测手势
检测手势

3) 下载hammer-time.js 文件

现在,我们将从http://hammerjs.github.io/dist/hammer-time.min.js 链接。我们将粘贴它并以 hammertime with JavaScript 扩展名保存它。我们还将其保存在我们应用程序的 www 文件夹中。
Detecting Gesture

4) 在 index.html 文件中添加锤子和锤子时间

现在,我们将在 index.html 文件中添加这两个库。我们将使用 <script></script> 标签并使用 src 属性它在文件中添加这两个库。我们将按以下方式使用 <script></script> 标签:
<script src= "hammer.js"</script>
<script src= "hammertime.js" ></script>

5) 创建UI

现在,我们将为手势创建一个用户界面。我们将创建两个 <dvi></dvi> 标签,即一个用于手势和结果之一。之后,我们将在正文部分添加脚本。这将起到与 window.onload 函数相同的作用。在此脚本中,我们将获取执行手势的元素,并在元素下方创建一个新的锤子。
现在,我们将创建一条语句以获取结果并显示结果。完整的正文部分将按以下方式编码:
<body>
        <div id = "gestureDiv" ></div>
        <div id = "resultDiv" ></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script>
          var myElement = document.getElementById('gestureDiv');
                var mc = new Hammer(myElement);
                mc.on("panleft panright tap press", function(ev) {
                    document.getElementById('resultDiv').innerHTML = ev.type + " gesture detected.";
                });
        </script>
</body>

Detecting Gesture

6) 改变gestureDiv的样式

现在,我们将使用 <style></style> 来更改gestureDiv 的样式标签。我们将宽度设置为 300 像素,高度为 400 像素,背景颜色为红色,边框为 1 像素纯黑色。我们还将为我们的应用程序添加一个标题。
<style>
        #gestureDiv
            {
                width: 300px;
                height: 400px;
                background-color: red;
                border: 1px solid black;
            }
</style>
现在,我们已准备好在我们的PhoneGap开发者应用中运行我们的项目。

完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <script src= "hammer.js" ></script>
        <script src= "hammertime.js" ></script>
        <style>
        #gestureDiv
            {
                width: 300px;
                height: 400px;
                background-color: red;
                border: 1px solid black;
            }
        </style>
        <title> Gesture Example </title>
    </head>
    <body>
        <div id= "gestureDiv" ></div>
        <div id= "resultDiv" ></div>
        <script type="text/javascript" src="cordova.js"></script>
        <script>
          var myElement = document.getElementById('gestureDiv');
                var mc = new Hammer(myElement);
                mc.on("panleft panright tap press", function(ev) {
                    document.getElementById('resultDiv').innerHTML = ev.type + " gesture detected.";
                });
        </script>
    </body>
</html>
输出
检测手势
昵称: 邮箱:
Copyright © 2020 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4