余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

JQuery插件-unlock.js 滑动解锁(jquery异步表插件)

xiyangw 2022-12-06 10:01 22 浏览 0 评论

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

滑动解锁。

JQuery插件-unlock.js 滑动解锁(jquery异步表插件)

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

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

如何使用

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#FFE97Fprogress的颜色
handleColor#fff滑块手柄的颜色
succColor#78D02E成功解锁后的颜色
text'slide to unlock'滑块上的默认文字
textColor#000文字的颜色
succText'ok!'成功解锁后显示的文字
succTextColor#000成功解锁后显示的文字颜色
succFuncfunction() { alert('successfully unlock!'); }成功解锁后的回调函数

更多有关unlock插件信息,请访问项目github地址为:https://github.com/menthe/unlock.js

相关推荐

若用户浏览器禁用JavaScript Google将不再允许其登录

PingWest品玩11月1日讯,据ZDNet报导,Google昨天宣布了四项用于保护Google账户的新安全功能,不仅用于加强用户登录账户前后的保护,也适用于在受到黑客攻击后恢复的情况。第一...

干货分享 | JavaScript 基础知识(直播干货分享)
干货分享 | JavaScript 基础知识(直播干货分享)

随着现在技术行业门槛的不断提高,大多数的小伙伴们想要学前端或者是入门前端行业,就必须要掌握一定基础的JavaScript语言知识,本文档将介绍绝大部分常用的...

2023-03-21 19:31 xiyangw

第34节 Web浏览器中的Javascript-零点程序员
第34节 Web浏览器中的Javascript-零点程序员

本内容是《Web前端开发之Javascript视频》的课件,请配合大师哥《Javascript》视频课程学习。JavaScript由最初的一个原始的脚本语言,已...

2023-03-21 19:31 xiyangw

JavaScript ES2019 中的 8 个新功能(javascript 菜鸟教程)
JavaScript ES2019 中的 8 个新功能(javascript 菜鸟教程)

JavaScript一直在不断改进和添加更多新功能。TC39已经完成,并批准了ES2019的8项新功能。这个过程包含了5个阶段:第0阶段:稻...

2023-03-21 19:30 xiyangw

JavaScript 对象可以做到的三件事(在浏览器上运行javascript程序,可以)

除了普通的对象属性赋值和遍历之外,我们还可以使用JavaScript对象执行许多其他操作。在本文中,我们将了解如何使用它们,包括访问内部属性、操作属性描述符和继承只读属性。1.访问内部属性Jav...

冰与火之歌:JavaScript 的困境与挑战(冰与火之舞url)
冰与火之歌:JavaScript 的困境与挑战(冰与火之舞url)

最近几年以来,伴随着各个端平台的迅猛发展,以TypeScript、Swift、Kotlin和Dart为代表的新一代应用编程语言纷纷浮现。群雄环伺之下,J...

2023-03-21 19:30 xiyangw

JavaScript每年更新一个版本,功能越来越强大,能用JS的终将用JS
JavaScript每年更新一个版本,功能越来越强大,能用JS的终将用JS

不做详细功能介绍ES2015(ES6)带来的重大特性Arrowfunctions(箭头函数)PromisesGeneratorslet和const...

2023-03-21 19:30 xiyangw

IT技术分享:浅谈JavaScript作用域(js有哪些作用域,分别是什么意思)
IT技术分享:浅谈JavaScript作用域(js有哪些作用域,分别是什么意思)

javascript是目前web领域中使用非常广泛的语言,不管是在前端还是在后端都能看到它的影子,可以说web从业者不论怎样都绕不开它。在前端领域,各种框架层出...

2023-03-21 19:29 xiyangw

软件测试 | JavaScript如何使用(javascript自动测试框架)

简介JavaScript是脚本语言,是一种轻量级的编程语言,可以插入HTML页面的编程代码。插入HTML页面后,可由所有的现代浏览器执行。作用JavaScript可以直接写入HTML输...

高性能的JavaScript,这是一个高级程序员必备的技能
高性能的JavaScript,这是一个高级程序员必备的技能

不知道大家有没有看过高性能JavaScript,这个书是一本好书,推荐有JavaScript的基础的同学可以看一看这本书.下面是我根据这本书整理出来的知识:1、...

2023-03-21 19:28 xiyangw

javascript:5分钟了解javascript,就能上手(javascript环境配置)
javascript:5分钟了解javascript,就能上手(javascript环境配置)

javascript一.js组成部分ECMA:文档对象类型:(DOM)documentobjectmodule浏览器对象类型:(BOM)broswe...

2023-03-21 19:28 xiyangw

JavaScript 使用(javascript 原型)
JavaScript 使用(javascript 原型)

JavaScript使用<script>标签在HTML中,JavaScript代码必须位于<script>与</s...

2023-03-21 19:28 xiyangw

JavaScript的前景一片光明(js在前端设计中的作用)
JavaScript的前景一片光明(js在前端设计中的作用)

JavaScript的未来很光明,该语言确实正在打破浏览器的壁垒,许多开发人员看到JavaScript的服务器端实现,入node.js,从而可以使用一种语言编...

2023-03-21 19:27 xiyangw

第4节 使用Javascript(javascript基本语法学习四)
第4节 使用Javascript(javascript基本语法学习四)

如果使用JavaScript,在哪里使用JavaScript?这节课我们来研究这些知识点。在哪里使用:在<script>中嵌入,向HTML页面中插入...

2023-03-21 19:27 xiyangw

我的 JavaScript,比你的 Rust 更快(rust vs javascript)
我的 JavaScript,比你的 Rust 更快(rust vs javascript)

JoshUrbane是一位从业多年的软件架构师,很喜欢在社交媒体分享技术观点。近日,他写了一篇文章,记录了自己凭借经验赢了与新人开发者打赌的故事,而“我的...

2023-03-21 19:27 xiyangw

取消回复欢迎 发表评论: