jQuery滑動解鎖
阿新 • • 發佈:2017-05-05
寬度 .com ccf blog add href 參數 插件 itl
unlock.js是一款jQuery滑動解鎖插件。目前很多網站在用戶登錄和註冊時,為防止惡意攻擊,采用來滑動解鎖的驗證方式。用戶需要滑動指定的滑塊到指定位置,才能通過驗證。unlock.js可以實現這種滑動解鎖功能。
查看演示 下載源碼unlock.js插件具有以下特點:
滑動解鎖。
尺寸、顏色、字體大小等都可以個性化定制。
完成解鎖後會有回調函數,用來觸發進一步的數據處理。
如何使用
1. 首先在頁面中引入unlock.css和unlock.js文件。
<link href="css/unlock.css" rel="stylesheet">
<script src=‘js/unlock.js‘></script>
2. 然後布置簡單的HTML的結構,使用一個<div>作為滑塊的容器。
<!--滑塊容器-->
<div id = "foo"></div>
3. 最後初始化插件。在頁面DOM元素加載完畢之後,可以通過下面的方法來初始化該滑動解鎖插件。
var $container = $(‘#foo‘);
$container.slideToUnlock(options);
配置參數
unlock.js滑動解鎖插件的配置參數有:
參數 | 默認值 | 描述 |
width | 默認為容器的寬度 | 滑塊的寬度 |
height | 默認為容器的高度 | 滑塊的高度 |
bgColor | #E8E8E8 | 滑塊的背景顏色 |
progressColor | #FFE97F | progress的顏色 |
handleColor | #fff | 滑塊手柄的顏色 |
succColor | #78D02E | 成功解鎖後的顏色 |
text | ‘slide to unlock‘ | 滑塊上的默認文字 |
textColor | #000 | 文字的顏色 |
succText | ‘ok!‘ | 成功解鎖後顯示的文字 |
succTextColor | #000 | 成功解鎖後顯示的文字顏色 |
succFunc | function() { alert(‘successfully unlock!‘); } | 成功解鎖後的回調函數 |
更多有關unlock插件信息,請訪問項目github地址為:https://github.com/menthe/unlock.js
jQuery滑動解鎖