Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.