Android Style Pattern Lock with jQuery - gesture.password.js

Just another jQuery implementation of a highly customizable pattern lock as you seen on Android lock screen.

See also:

• jQuery Plugin To Create Android Style Pattern Lock

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.