溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
unlock.js插件具有以下特點：
滑動解鎖。
尺寸、顏色、字體大小等都可以個性化定制。
完成解鎖后會有回調函數，用來觸發進一步的數據處理。
如何使用
１. 首先在頁面中引入unlock.css和unlock.js文件。
<link href="css/unlock.css" rel="external nofollow" 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使用unlock.js插件實現滑動解鎖思路詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
