jQuery 遮罩引导插件:jQuery Guide

项目地址: https://github.com/panlatent/jquery-guide | 演示地址: Demo

介绍

jQuery Guide 是我实现的一个遮罩层用户操作引导插件。该插件的功能最初被我用在了一个操作比较复杂的活动页面上,用来指导用户如何进行操作,后提取成为 jQuery 插件。可用于网站改版的界面指引和功能介绍,配以适当且清晰的界面指引和提示, 可以让用户更快的了解和适应网站的功能。

使用方法

本项目源码可以在 GitHub上 获得,也可使用Bower包管理器下载:

引入 js 文件:

编辑动作:

例子:

$.guide() 是插件的注册函数,它需要一个 json 参数。json 参数目前只实现一个 actions 键功能. 「 actions 」是一个包含一系列连续引导的动作参数数组。

动作参数:
element: 被提示的元素,需要一个jQuery元素,如 $(‘#btn’)
content:提示内容(html)
offsetX:提示内容相对被提示元素的水平偏移位置
offsetY:提示内容相对被提示元素的垂直偏移位置
beforeFunc:动作执行之前执行函数[可选]
successFunc:动作执行之后执行函数[可选]

beforeFunc和successFunc回调函数都可以接受一个jQueryGuide类型实例的对象,即$.guide()创建的对象,通过这个参数可以在回调函数内控制动作的执行.

jQueryGuide 类

addAction(action) 添加一个动作
execAction() 执行当前动作
back() 返回上个动作并执行
next() 转到下个动作并执行
exit() 销毁遮罩层并退出引导

jQueryGuide 类内部使用一个属性来记录当前执行的动作的位置,back()/next() 的原理是改变位置并再次执行execAction()函数。

同时为了解决浏览器窗口大小改变引起的遮盖区域偏移的问题,$.guide() 会自动将 jQueryCuide::draw() 方法绑定到window对象的resize和scroll事件,重新绘制遮罩层。

感谢你的阅读!本文系原创文章,出自 行间小筑 并遵循 自由转载-非商用-非衍生-保持署名(创意共享3.0许可证),转载时请注明出处和本文链接:https://panlatent.com/archives/jquery-guide

发表评论