unblock.js example 滑动解锁插件

It's a popular way to verify the users security when they login or register.

The Github address

Step1:
Link jQuery library cause it's basic for plugin.Download or link online address
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

Download unlock.css and unclock.js and link them in the file.

Step2:
HTML
Bulid a div named a id or class which can be grabbed in the js part.

Step3:
JS

js

Using slideToUnlock to link the unlock.js.

width:  the width of bar
height: the height of bar
text: the text content in the bar
bgColor: background color of bar
progressColor: the bar color after you drag through it
handleColor: the color of block where you drag
succColor: the bar color after the verification is succeed
textColor: the color of messages
succText: the message when the verification is succeed
succTextColor: the color of message when it success
succFunc: When the verification is succeed, you can recall a function

Tips:
Don't add 'px' when you set the width and height.
Add the ' ' with the color, like  '#27a9ae'.