Slide To Unlock/Lock Jquery Plugin

Check demo

Usage

    <link href="css/slideToUnlock.css" rel="stylesheet">  
    <link href="css/green.theme.css" rel="stylesheet">  
    <script src="js/jquery.slideToUnlock.js"></script>  

    $("div").slideToUnlock();

Options

• lockText: A string Change the default text default: Slide To Unlock
• unlockText: A string Change the default text default: Slide To Unlock
• useData : Boolean. Weather to use the data attribute in the element to get the text and status
• status: A boolean indeactes weather the inital state is locked or unlocked.
• unlockfn: A call back function fired when the item is unlocked. The this variable is passed by default as self.
• lockfn: A call back function fired when the item is locked. The this variable is passed by default as self.
• allowToLock: a boolean value indecates if the can lock back or not. default: true

    $("div").slideToUnlock({
        lockText: "Hello World!",
        allowToLock: true 
    });

Themes

Green Theme

.locked {
    color: #692003;
    font-size: 18px;
    font-family: 'Microsoft Yahei', serif;      
    background-color: #eff3ea;   
}
.unlocked {
    background-color:rgba(8, 252, 20, 0.5);
}

iPhone Theme

.locked {
    font-size: 18px;
    font-family: 'Microsoft Yahei', serif;      
    background-color: rgb(168, 167, 167);   
    color: white;
}
.locked_handle{
    background-image: url("../img/right_arrow.png");  
}  
.unlocked {
    background-color:rgb(128, 131, 128);
}
.unlocked_handle{
    background-image: url("../img/left_arrow.png");   
}  

With themes, you can easily change:

• backgroud color
• background image.
• using gradiant you can do a lot.
• font color
• font family
• font size
• font weight

Adding contents to the handle

.unlocked {
    background-color:rgb(128, 131, 128);
}

How to add you own theme

Just define those 2 css classes

• .locked
• .unlocked

Two other optional classes if you want the handle to appear differently.

• .locked_handle
• .unlocked_handle

Note

Unlock state == to success state.

Features

• Ability to lock and unlock
• change theme.
• change width and height.
• Works with touch as well as mouse.
• Supported by most modern browsers.
• All built with ES6 standards.
• Callback functions accepts this as parameter

Prerequisites

Jquery library

demo