【EnjoyHint】插件API-网站交互式引导插件

最新推荐文章于 2024-04-12 09:43:38 发布

mfkarj

最新推荐文章于 2024-04-12 09:43:38 发布

阅读量678

点赞数 1

分类专栏：前端文章标签： EnjoyHint

本文链接：https://blog.csdn.net/mfkarj/article/details/111045341

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

作者github及下载地址：
https://github.com/xbsoftware/enjoyhint

这里基于版本v4 API翻译，v4发行说明：

修复标签位置错误
修复了箭头位置错误
修复了调整大小的错误
添加了响应式设计
增加了移动支持
增加了返回上一步的可能性
增加了选择标记颜色的可能性
增加了自定义上一个按钮的可能性

发现两个问题：

1、BUG:作者在为元素添加事件点击或双击启动下一步后并未移除该事件，导致在该元素子元素上再添加点击事件时会触发两次或多次下一步事件，导致点子元素的时候会一下跳两步。

解决方案：在以下位置增加：$event_element.unbind(event);

$event_element.on(event, function(e) {
                            $event_element.unbind(event);
                            if (step_data.keyCode && e.keyCode != step_data.keyCode) {
                                return;
                            }
                            current_step++;
                            stepAction(); // clicked
                        });

2、BUG:插件在点击一下步的时候会提前预处理下下一步，如果下一步骤有设置timeout来延时渲染，下下一步骤不需要延时渲染，这时在点击下一步骤时，实际下下一步骤的部分逻辑反而在下一步骤先运行了，导致逻辑问题（下下一步骤设置onBeforeStart时出现），解决方案：下下一步设置timeout且值必须大于上一步骤。（没有onBeforeStart处理的时候暂未发现问题）

##该插件并不太完善文档也不全面，使用时可能遇到更多问题，有时要跟踪源码才能发现处理方式。

一、快速使用

引入依赖

  <!-- From external libraries -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.2/jquery.scrollTo.min.js"></script>

  <!-- Or from internal libraries from node_modules-->
  <script src="<pathontheserver>/jquery/dist/jquery.min.js"></script>
  <script src="<pathontheserver>/kinetic/kinetic.min.js"></script>
  <script src="<pathontheserver>/jquery.scrollto/jquery.scrollTo.min.js"></script>

  <!-- Enjoyhint library -->
  <link href="<pathontheserver>/enjoyhint/enjoyhint.css" rel="stylesheet">
  <script src="<pathontheserver>/enjoyhint/enjoyhint.min.js"></script>

快速使用

//initialize instance
var enjoyhint_instance = new EnjoyHint({});

//simple config. 
//Only one step - highlighting(with description) "New" button 
//hide EnjoyHint after a click on the button.
var enjoyhint_script_steps = [
  {
    'click .new_btn' : 'Click the "New" button to start creating your project'
  }  
];

//set script config
enjoyhint_instance.set(enjoyhint_script_steps);

//run Enjoyhint script
enjoyhint_instance.run();

二、配置

说明：该插件是基于jquery开发，所以event应该是jquery接受的事件类型，选择器也应该是jquery接受的选择器，但是这里有个问题，jquery选择器是可以接受空格的" "，但是这里空格是用于事件和选择器的分隔，代码里在用split空格来分隔事件和选择器，所以选择器中如果出现空格会导致选择器失效，可以自行修改原码来避免这个问题。

"event selector" : "description" -要描述步骤，您应该设置事件类型，选择元素并为此元素添加说明（提示）
arrowColor -接受所有CSS颜色的标记的颜色。
keyCode-按钮的代码，单击后触发下一个EnjoyHint步骤。由“键”事件定义。（“ key #block”：“ hello”）。
event_selector -如果您需要将一个事件（在“ event”属性中设置）附加到其他选择器，则可以使用此事件
timeout -突出显示元素之前的延迟
shape -突出显示的形状（圆形|矩形）
radius -如果指定了“圆形”形状，我们可以设置半径。
margin -高光形状的边距（例如：10）
top -“矩形”形状的上边距
right -“矩形”形状的右边距
bottom -“矩形”形状的底部边距
left -“矩形”形状的左边距
scrollAnimationSpeed -设置自动滚动速度（毫秒）。
nextButton -允许将其类别和名称应用于按钮Nеxt。
skipButton -允许为“跳过”按钮应用其类和名称。
prevButton-允许将其类别和名称应用于上一个按钮。例如：

var  options  =  { 
                    “next #block“：'你好。' ，
                    “ nextButton”：{ className：“ myNext” ， 文本：“ myNEXT” } ，
                    “ skipButton”：{ className：“ mySkip” ， 文本：“ mySKIP” } ，
                    “ prevButton”：{ className：“ myPrev” ， 文本：“ myPREV” } 
                }

showSkip -显示或隐藏“跳过”按钮（true | false）
showNext -显示或隐藏“下一步”按钮（true | false）
showPrev -显示或隐藏“上一个”按钮（true | false）

三、非标准事件（event_type)：

auto-例如，您需要在第一步之后立即在第二步上单击相同的按钮，然后再进行下一步。然后，您可以在“ event_type”属性中使用“ auto”，并在“ event”属性中使用“ click”。
custom-如果您需要按应用程序事件逐个进行下一步，则此值非常有用。例如，仅在将一些数据加载到应用程序中后，才想转到下一步。然后，您应该使用EnjoyHint实例的“ custom” event_type和“ trigger”方法。

$.get('/load/some_data', function(data){
  //trigger method has only one argument: event_name.(equal to the value of event property in step config)
  enjoyhint_instance.trigger('custom_event_name');
});

next -将event_type的值设置为“ next”时，在此步骤中将看到“ Next” btn。
key -当您单击由keyCode定义的按钮时，告诉EnjoyHint转到下一步

四、方法

set-设置当前步骤配置。参数：配置
run-运行当前脚本。没有参数
resume-从停止脚本的步骤恢复脚本。没有参数
getCurrentStep -返回当前步骤索引
trigger -编写此代码后，您可以继续执行下一步，也可以使用EnjoyHint完成（下一步|跳过）

五、EnjoyHint事件

onStart -第一步射击。
onEnd -在脚本的最后一步之后触发。
onSkip -用户点击跳过后触发。

var enjoyhint_instance = new EnjoyHint({
  onStart:function(){
    //do something
  }
});

onBeforeStart -在步骤开始之前触发。

var enjoyhint_script_steps = [
  {
    selector:'.some_btn',//jquery selector
    event:'click',
    description:'Click on this btn',
    onBeforeStart:function(){
      //do something
    }
  }
];

六、示例

$(function(){
	let enjoyhint_instance = new EnjoyHint({
		onEnd:function () {
			$('.layui-nav-child').removeClass('layui-show');
		}
	});
	let enjoyhint_script_steps = [
		{
			'next .menuli': '欢迎使用本系统，现在是简约模式，如果您已经很熟悉本系统，请点击“跳过”，跳过新手指导。现在开始新手指引模式，这里是功能菜单区域，多菜单情况下可以点击右方的上下箭头翻页，也可以通过鼠标滚轮翻页，然后<a style="color: red;">点击下一步<a>。',
			'showSkip': false,
			'showPrev':false,
			'showSkip': true,
			'nextButton': {text: "下一步"},
			'skipButton': {text: "跳过"}
		},
		{
			'dblclick .menuli>.pf-ul>.pf-li': '鼠标放上一级菜单自动打开二级菜单，也可以双击一级菜单锁定子菜单视图，现在请<a style="color: red;">双击一级菜单<a>。',
			'showSkip': false,
			'showPrev':false
		},
		{
			'click #submenu>div>.pf-ul>.pf-li': '单击菜单可以打开一个功能页面,现在请<a style="color: red;">单击菜单<a>。',
			'showSkip': false,
			'showPrev':false,
			'timeout':100
		},
		{
			'next .layui-body': '这是打开的功能页面，然后请<a style="color: red;">单击下一步<a>。',
			'showSkip': false,
			'showPrev':false,
			'nextButton': {text: "下一步"}
		},
		{
			'next #tabs': '这里是标题区域，双击可以关闭某个功能页，首页不可关闭，右键点击标题区域有更多页卡操作（关闭、刷新、关闭其他、全部关闭、关闭右侧所有、关闭左侧所有），现在请<a style="color: red;">单击下一步<a>。',
			'showSkip': false,
			'showPrev':false,
			'nextButton': {text: "下一步"}
		},
		{
			'next .qucklidiv': '这里是快捷菜单展示按扭，将鼠标指针放上该按扭将自动弹出，移除指针自动收起，可以在设置中修改快捷菜单展示的规则。',
			'showSkip': false,
			'nextButton': {text: "下一步"},
			'showPrev':false
		},
		{
			'click #guide': '该按扭是切换常规菜单展示，包含复杂设置，现在请<a style="color: red;">单击它<a>',
			'shape': 'circle',
			'showSkip': false,
			'showNext': false,
			'showPrev':false
		},
		{
			'dblclick #userImg': '单击头像开启通讯模式,双击开启头像修改功能，现在请<a style="color: red;">双击单击它<a>',
			'shape': 'circle',
			'showSkip': false,
			'showPrev':false,
		},
		{
			'click #layui-layer1': '这里可以修改头像，系统内置部分头像，也可以上传自己的图片，然后拖动滚动条放大缩小图片，然后拽动图片显示自己需要显示的区域作为头像<a style="color: red;">单击取消关闭它<a>',
			'showSkip': false,
			'showPrev':false,
			'timeout':100
		},
		{
			'click .s-profile': '点击非头像区域显示更多设置操作，现在请<a style="color: red;">单击非头像区域<a>',
			'showSkip': false,
			'showNext': false,
			'showPrev':false
		},
		{
			'next #pers-management': '这里可以修改您的基础信息包括密码，展示您的岗位地图，以及个性化配置，现在请<a style="color: red;">单击下一步<a>',
			'showSkip': false,
			'showPrev':false,
			'nextButton': {text: "下一步"}
		},
		{
			'click li[data-method="settingMang"]': '这是人性化设置，个人偏好可以在此设置，现在请<a style="color: red;">单击它<a>',
			'showSkip': false,
			'showPrev':false
		},
		{
			'click #layui-layer2': '这里提供两种主题方式，现目前为简约方式，皮肤有多种根据自己爱好选择，快捷菜单排序方式有多种，默认按使用量排序，可根据情况自行修改，注意这些设置都需要在点击修改后生效，现在请<a style="color: red;">点击取消关闭<a>',
			'showSkip': false,
			'showPrev':false,
			'timeout':100
		},
		{
			'next .layui-nav-child': '服务中心包含全屏（快捷键：F11），锁屏（快捷捷：Shift+Alt+L），门户切换（当您有多个门户视图的时候在这里进行切换）<a style="color: red;">单击结束完成引导<a>',
			'showSkip': false,
			'showPrev':false,
			'nextButton': {text: "结束"},
			'timeout':100,
            onBeforeStart:function(){
				$('.layui-nav-child').addClass('layui-show');
			 }
		}
		];
		enjoyhint_instance.set(enjoyhint_script_steps);
		enjoyhint_instance.run();
});