This time I will share jQuery Plugin and tutorial about jQuery Plugin To Create ‘Slider To UnLock’ Slider – slideunlock, hope it will help you in programming stack.
| File Size: | 5.87 KB |
|---|---|
| Views Total: | 2402 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
slideunlock is a jQuery plugin that helps you create a slider control to mimic the iOS and Android‘s ‘slide to unlock’ functionality.
How to use it:
1. Load jQuery library and the jQuery sildeuplock plugin right before the closing body tag.
1 |
<script src="//code.jquery.com/jquery.min.js"></script> |
2 |
<script src="jquery.slideunlock.js"></script> |
2. Create the ‘Slide To Unlock’ slider control as follows:
1 |
<div id="slider"> |
2 |
<div id="slider_bg"></div> |
3 |
<span id="label">>></span> |
4 |
<span id="labelTip">Slide To Unlock</span> |
5 |
</div> |
3. Style the slider control with your own CSS rules:
01 |
#slider { |
02 |
margin: 100px auto; |
03 |
width: 300px; |
04 |
height: 40px; |
05 |
position: relative; |
06 |
border-radius: 2px; |
07 |
background-color: #dae2d0; |
08 |
overflow: hidden; |
09 |
text-align: center; |
10 |
user-select: none; |
11 |
-moz-user-select: none; |
12 |
-webkit-user-select: none; |
13 |
} |
14 |
15 |
#slider_bg { |
16 |
position: absolute; |
17 |
left: 0; |
18 |
top: 0; |
19 |
height: 100%; |
20 |
background-color: #7AC23C; |
21 |
z-index: 1; |
22 |
} |
23 |
24 |
#label { |
25 |
width: 46px; |
26 |
position: absolute; |
27 |
left: 0; |
28 |
top: 0; |
29 |
height: 38px; |
30 |
line-height: 38px; |
31 |
border: 1px solid #cccccc; |
32 |
background: #fff; |
33 |
z-index: 3; |
34 |
cursor: move; |
35 |
color: #ff9e77; |
36 |
font-size: 16px; |
37 |
font-weight: 900; |
38 |
} |
39 |
40 |
#labelTip { |
41 |
position: absolute; |
42 |
left: 0; |
43 |
width: 100%; |
44 |
height: 100%; |
45 |
font-size: 13px; |
46 |
color: #787878; |
47 |
line-height: 38px; |
48 |
text-align: center; |
49 |
z-index: 2; |
50 |
} |
4. Create a new slider object and initialize the plugin.
1 |
var slider = new <a href="https://www.jqueryscript.net/slider/">Slider</a>Unlock("#slider"); |
2 |
slider.init(); |
5. Pass the following options to the SliderUnlock():
01 |
var slider = new SliderUnlock("#slider",{ |
02 |
successLabelTip: "Successfully Verified", |
03 |
duration: 200, |
04 |
swipestart: false, |
05 |
min: 0, |
06 |
max: $elm.width(), |
07 |
index: 0, |
08 |
IsOk: false, |
09 |
lableIndex: 0 |
10 |
}); |
6. Trigger a callback function when you slide the handle to the end of the slider control.
01 |
var slider = new SliderUnlock("#slider",{ |
02 |
successLabelTip: "Successfully Verified", |
03 |
duration: 200, |
04 |
swipestart: false, |
05 |
min: 0, |
06 |
max: $elm.width(), |
07 |
index: 0, |
08 |
IsOk: false, |
09 |
lableIndex: 0 |
10 |
}, |
11 |
function () { |
12 |
// do something |
13 |
} |
14 |
); |
This awesome jQuery plugin is developed by dyh1995. For more Advanced Usages, please check the demo page or visit the official website.
source : jqueryscript.net
