unlock.js插件具有以下特点:
滑动解锁。
尺寸、颜色、字体大小等都可以个性化定制。
完成解锁后会有回调函数,用来触发进一步的数据处理。
unlock.js如何使用
1.首先在页面中引入unlock.css和unlock.js文件。
1
2
2.然后布置简单的HTML的结构,使用一个
1
2
3.最后初始化插件。在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该滑动解锁插件。
1
2
var$container=$('#foo');
$container.slideToUnlock(options);
配置参数
unlock.js滑动解锁插件的配置参数有:
参数默认值描述
width默认为容器的宽度滑块的宽度
height默认为容器的高度滑块的高度
bgColor#E8E8E8滑块的背景颜色
progressColor#FFE97Fprogress的颜色
handleColor#fff滑块手柄的颜色
succColor#78D02E成功解锁后的颜色
text'slidetounlock'滑块上的默认文字
textColor#000文字的颜色
succText'ok!'成功解锁后显示的文字
succTextColor#000成功解锁后显示的文字颜色
succFuncfunction(){alert('successfullyunlock!');}成功解锁后的回调函数
上一篇:怎么使用nightmare
下一篇:Spectrum是什么