jQuery Plugin To Create Android Style Pattern Lock

File Size: 38.7 KB
Views Total: 4733
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Create Android Style Pattern Lock

A jQuery script that creates an Android style pattern lock for your app or website to lock the screen until the visitor enters the correct pattern. The lock-screen pattern will be stored locally within the visitor's browser via Html5 localStorage.

How to use it:

1. Include the latest version of jQuery library from Google CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

2. Create the Html for the Android pattern lock.

<div id="patterncontainer" class="patterncontainer">
</div>

3. The required CSS for the pattern lock buttons.

.patterncontainer {
  margin-left: 32.5px;
  position: absolute;
  width: 225px;
  height: 225px;
  background: #66C285;
  padding: 7.5px;
  border-radius: 10px;
}

.heading { padding-top: 5%; }

.button {
  width: 30px;
  height: 30px;
  background: #FFF;
  border-radius: 50%;
  margin: 22.5px;
  float: left;
}

.activebutton {
  width: 30px;
  height: 30px;
  background: rgba(114, 160, 204, 1);
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: #FFF;
  margin: 20.5px;
  float: left;
  -webkit-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
  -moz-box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
  box-shadow: 0px 0px 15px 5px rgba(114, 160, 204, 1);
}

.duplicatebutton {
  width: 30px;
  height: 30px;
  background: rgba(255, 102, 51, 1);
  border-radius: 50%;
  border-width: 2px;
  border-style: solid;
  border-color: #FFF;
  margin: 20.5px;
  float: left;
  -webkit-box-shadow: 0px 0px 15px 5px rgba(255, 102, 51, 1);
  -moz-box-shadow: 0px 0px 15px 5px rgba(255, 102, 51, 1);
  box-shadow: 0px 0px 15px 5px rgba(255, 102, 51, 1);
}

4. Edit the script.js according to your actual needs and include it at the bottom of the web page. By default, the web page will redirect to welcome.html if the visitor unlocks the screen.

<script src="js/script.js"></script>

This awesome jQuery plugin is developed by sgsvenkatesh. For more Advanced Usages, please check the demo page or visit the official website.