jQuery使用unlock.js插件实现滑动解锁


Posted in jQuery onApril 04, 2017

unlock.js插件具有以下特点:

滑动解锁。

尺寸、颜色、字体大小等都可以个性化定制。

完成解锁后会有回调函数,用来触发进一步的数据处理。

如何使用

1. 首先在页面中引入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插件实现滑动解锁思路详解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

jQuery 相关文章推荐
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
利用jQuery异步上传文件的插件用法详解
Jul 19 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
jQuery中常用动画效果函数知识点整理
Aug 19 jQuery
jquery使用FormData实现异步上传文件
Oct 25 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
jquery validate 实现动态增加/删除验证规则操作示例
Oct 28 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery zTree如何改变指定节点文本样式
Oct 16 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 #jQuery
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
Apr 04 #jQuery
使用jQuery卸载全部事件的思路详解
Apr 03 #jQuery
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 #jQuery
基于JQuery和原生JavaScript实现网页定位导航特效
Apr 03 #jQuery
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 #jQuery
如何选择jQuery版本 1.x? 2.x? 3.x?
Apr 01 #jQuery
You might like
Thinkphp中的curd应用实用要点
2015/01/04 PHP
php防止sql注入简单分析
2015/03/18 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
javascript window.opener的用法分析
2010/04/07 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
Validform+layer实现漂亮的表单验证特效
2016/01/17 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
javascript 闭包详解及简单实例应用
2016/12/31 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
vue中使用v-model完成组件间的通信
2019/08/22 Javascript
vue 实现图片懒加载功能
2020/12/31 Vue.js
Python 实现一个颜色色值转换的小工具
2016/12/06 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Python Dataframe常见索引方式详解
2020/05/27 Python
Python QT组件库qtwidgets的使用
2020/11/02 Python
CSS3之背景尺寸Background-size使用介绍
2013/10/14 HTML / CSS
中邮全球便购:中国邮政速递物流
2017/03/04 全球购物
艺术专业大学生自我评价
2013/09/22 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
班组长安全工作职责
2014/07/15 职场文书
公司出纳岗位职责
2015/03/31 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
2015年电气技术员工作总结
2015/07/24 职场文书
分享mysql的current_timestamp小坑及解决
2021/11/27 MySQL
关于pytest结合csv模块实现csv格式的数据驱动问题
2022/05/30 Python