Android Style Pattern Lock with jQuery - gesture.password.js
File Size: | 39 KB |
---|---|
Views Total: | 3338 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Just another jQuery implementation of a highly customizable pattern lock as you seen on Android lock screen.
See also:
How to use it:
1. Load the latest version of jQuery library and the jQuery gesture.password.js script into your web app.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="src/jquery.gesture.password.js"></script>
2. Create a DIV element for the Android like pattern lock.
<div id="gesturepwd"></div>
3. Call the plugin with customization options to generate a pattern lock interface.
$("#gesturepwd").GesturePasswd({ backgroundColor:"#252736", color:"#FFFFFF", roundRadii:25, pointRadii:6, space:30, width:240, height:240, lineColor:"#00aec7", zindex :100 });
3. Validate the password when a pattern draw completes.
$("#gesturepwd").on("hasPasswd",function(e,passwd){ var result; // password pattern // 1235789 = 'Z' if(passwd == "1235789"){ result=true; } else { result=false; } if(result == true){ $("#gesturepwd").trigger("passwdRight"); setTimeout(function(){ alert("Password is valid.") },500); } else{ $("#gesturepwd").trigger("passwdWrong"); // do something } });
This awesome jQuery plugin is developed by chiruom. For more Advanced Usages, please check the demo page or visit the official website.