GOOCODE - Find your code/scripts

1 Unlock.js is a jQuery slide unlock plugin. At present, many websites use the verification method of sliding to unlock when a user logs in and registers to prevent malicious attacks. The user needs to slide the specified slider to the specified position in order to pass the verification. Unlock.js can implement this sliding unlock function.

The unlock.js plugin has the following features:
Slide to unlock.
Size, color, font size, etc. can be customized.
After the unlock is completed, there will be a callback function to trigger further data processing.

how to use
1. First introduce the unlock.css and unlock.js files into the page.

<link href="css/unlock.css" rel="stylesheet">
<script src='js/unlock.js'></script>

2. Then lay out the structure of the simple HTML, using a /div/ as the container for the slider.

<!--slider container -->
<div id = "foo"></div>

3. Finally initialize the plugin. After the page DOM element is loaded, the sliding unlock plugin can be initialized by the following method.

var $container = $('#foo');
$container.slideToUnlock(options);  

Configuration parameter
The configuration parameters of the unlock.js slide unlock plugin are:
Parameter -Default-Description
Width- defaults to the width of the container- width of the slider
Height- defaults to the height of the container- height of the slider
bgColor- #E8E8E8- The background color of the slider
progressColor- #FFE97F- progress color
handleColor -#fff- The color of the slider handle
succColor-#78D02E- Color after successful unlocking
Text -'slide to unlock' -default text on the slider
textColor- #000 -The color of the text
succText -'ok!'- text displayed after successful unlocking
succTextColor-#000 -The text color displayed after successful unlocking
succFunc -function() { alert('successfully unlock!'); }- Callback function after successful unlocking