Android inspired pattern lock jQuery Plugin – patternlock.js

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.

     <link rel="stylesheet" href="patternlock.css">
 

     <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 with the classes lock-actives, lock-lines and lock-dots

"patternlock" id="lock" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    ="lock-actives">>
    ="lock-lines">>
    ="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"/>
    >
>

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.

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

Related