How to use the unlock js plug-in
This article mainly explains "how to use the unlock js plug-in", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in depth, together to study and learn how to use the unlock js plug-in bar!
The unlock.js plug-in has the following characteristics:
Slide to unlock.
Size, color, font size and so on can be customized.
After unlocking, there will be a callback function to trigger further data processing.
How to use unlock.js
1. First introduce the unlock.css and unlock.js files into the page.
one
two
two。 Then lay out a simple HTML structure, using a container as a slider.
one
two
3. Finally, initialize the plug-in. After the page DOM element is loaded, you can initialize the slide unlock plug-in by doing the following.
one
two
Var$container=$ ('# foo')
$container.slideToUnlock (options)
Configuration parameters
The configuration parameters of the unlock.js sliding unlock plug-in are:
Parameter default value description
Width defaults to the width of the container's width slider
Height defaults to the height of the container, the height of the slider
Background color of the bgColor#E8E8E8 slider
The color of progressColor#FFE97Fprogress
The color of the handleColor#fff slider handle
The color after the succColor#78D02E is successfully unlocked
Default text on the text'slidetounlock' slider
Color of textColor#000 text
Succeed Textbacks okayed' Text displayed after successful unlocking
The color of the text displayed after the succTextColor#000 is successfully unlocked
SuccFuncfunction () {alert ('perfect fullyunlocked');} callback function after successful unlocking
Thank you for your reading, the above is the content of "how to use the unlock js plug-in", after the study of this article, I believe you have a deeper understanding of how to use the unlock js plug-in, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
