这是一款仿安卓的基于SVG的jquery手势密码解锁插件。你可以设置手势密码,以及验证手势密码,使用非常方便。
使用方法
在页面中引入jquery和patternlock.js文件,以及patternlock.css文件。
<link href="patternlock.css" rel="stylesheet" type="text/css" /> <script src="jquery.min.js"></script> <script src="patternlock.js"></script>
HTML结构
创建一个有9个点的手势解锁屏幕。
<svg class="patternlock" id="lock" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> <g class="lock-actives"></g> <g class="lock-lines"></g> <g class="lock-dots"> <circle cx="20" cy="20" r="2"/> <circle cx="50" cy="20" r="2"/> <circle cx="80" cy="20" r="2"/> <circle cx="20" cy="50" r="2"/> <circle cx="50" cy="50" r="2"/> <circle cx="80" cy="50" r="2"/> <circle cx="20" cy="80" r="2"/> <circle cx="50" cy="80" r="2"/> <circle cx="80" cy="80" r="2"/> </g> <svg>
初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该插件。
var e = document.getElementById('lock') var p = new PatternLock(e, { onPattern: function() { this.success() } });
方法
-
clear()
:清除当前的模式。 -
success()
:验证输入的模式是否成功。 -
error()
:验证输入的模式是否失败。 -
getPattern()
:获取当前的而输入模式,得到模式或者NaN
。
该基于SVG的jquery手势密码解锁插件的github地址为:https://github.com/tympanix/pattern-lock-js
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!