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

【如何使用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 functionvar lock = new PatternLock('#patternHolder', { mapper: function(idx){ return idx + 10; } });

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