如何使用jQuery模拟Android样式锁定模式(拖放)

Android上提供的锁定模式很棒, 但并不那么安全, 它是一个非常酷的小部件, 可以为用户提供”安全感”。

在本文中, 我们将与你分享一个有用的插件, 它将在支持javascript的每个平台上为你解决问题。你可以在网站, Cordova或Ionic应用程序中轻松使用此小部件。

PatternLock.js

Pattern Lock是一款轻巧的插件, 可为你的混合应用或网站模拟类似于android的模式锁定机制。它易于配置和自定义, 因此你可以根据需要使用不同类型的模式锁定。 API还提供了一些安全使用此插件的方法。

初始化非常简单, 并且该插件已被详细记录。以下示例显示了如何使用3×3表检查M模式。

你只需要包括css和js(源代码)文件, 然后将使用jQuery将结构附加到DOM元素。

请注意, 此示例非常简单, 并且不提供任何映射器：

var lock= new PatternLock('#myDiv', {
  matrix:[3, 3]
});
var MPattern = '7415369';

// 3 x 3
// [1] [ ] [3]
// [4] [5] [6]
// [7] [ ] [9]

lock.checkForPattern(MPattern, function(){
    alert("You unlocked your app");
}, function(){
    alert("Pattern is not correct");
});  

请注意, 你可以使用设置上的onDraw事件在绘制图案时自定义事件, 以对其进行处理或将其保存在第一次初始化中。你可以使用Mapper更改模式的返回值, 例如, 而不是返回正常值(1, 2, 3, 4, 5, 6, 7, 8, 9), 我们将更改为(11 , , 12, 13, 14, 15, 16等), 显然你可以实现一个复杂的函数来返回遵循模式的稀有值。

var lock = new PatternLock('#patternHolder', {
    mapper: {
      1:11,       2:12,       3:13,       4:14,       5:15,       6:16,       7:17,       8:18,       9:19
    }
});

// or with a function

var lock = new PatternLock('#patternHolder', { 
    mapper: function(idx){
      return idx + 10; 
    } 
});

最后由你来定制它并创建一个很棒的应用程序。

玩得开心 ！