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.

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



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