Android inspired pattern lock jQuery Plugin – patternlock.js

by

Today I am going to share simple jQuery library which help you to add An android inspired pattern lock in scalable vector graphics and pure javascript. A passcode mechanism built with scalable vector graphics (SVG) and javascript for modern web application with mobile and tablet support.



Libraries

Include latest jQuery core library after that add plugin’s JS+CSS library.

<!--CSS-->
     <link rel="stylesheet" href="patternlock.css">
 
<!--JS-->
     <script src="//code.jquery.com/jquery-latest.min.js"></script>
     <script src="patternlock.js" charset="utf-8"></script>

HTML

Design your desired svg pattern (or use the default one below). Your svg graphics must as a minimum have the patternlock class and three groups <g> with the classes lock-actives, lock-lines and lock-dots

<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>



JS

Initialize the pattern lock and do something after a patten has been drawn. also you can Enable/disable the ‘vibrate’ effect. Default: true (enable).

var lock = new PatternLock("#lock", {
    onPattern: function() {
      this.success()
    },
    vibrate: false
});

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by tympanix. Visit their official github repository for more information and follow for future updates.


Published by Rohit