类似enjoyhint
本文的目的是介绍为网站创建提示的过程。 首先,我们将研究如何为适当的网站元素创建单个提示。 然后,我们将创建一系列提示,以指导您浏览网站。 要创建提示,我将使用EnjoyHint 。 作为示例,我使用Bootstrap框架进行了简单演示 。
EnjoyHint依赖于jQuery ,它要求该库的版本大于或等于1.7版。 另一个依赖项是KineticJS v5.1.0 ,它已经包含在EnjoyHint中,因此无需担心。
如果您想查看该演示的源代码, 可以访问此GitHub存储库 。
为什么要使用EnjoyHint?
EnjoyHint的主要目标是为您提供机会,以帮助用户通过您的网页功能找到自己的方式。 对于具有大量元素的大型Web应用程序,这可能非常有用。
您可以突出显示单个元素并为其添加描述,也可以用手抓住用户向其展示所有可用功能。 使用此库,还可以更改突出显示区域的形状或对提示文本使用自己的样式。 以下是其主要功能列表:
- 免费使用
- 自动聚焦和突出显示与提示相关的区域
- 高亮区域的不同形状
- 提示延迟属性
- 恢复中断的提示序列的可能性
- 跨浏览器支持
- 支持Android,iOS和Windows触摸屏
考虑到这一点,现在是时候编写一些代码来查看该库的运行了。
创建提示
我已经创建了一个很小的搜索引擎模型作为示例:
它包含标题,搜索字段和“选项”按钮,该按钮有助于在不同类型的搜索结果之间切换。 该网站的开发非常简单,并且不在本教程的讨论范围之内,因此我将不对其进行详细描述。 但是, 您可以根据需要检查源代码 。
有了基本网页后,就可以开始使用EnjoyHint。 要执行的第一步是使用Bower安装它:
bower install enjoyhint
或者, 您可以从其GitHub存储库下载它 。
下载并解压缩该程序包后,可以将其包含到HTML文件中。 就像我们说的那样,该库依赖于jQuery,因此您必须在EnjoyHint之前包括后者。 如果您不想在本地托管jQuery,则可以使用jQuery CDN ,如下所示:
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="enjoyhint/enjoyhint.min.js"></script>
<link href="enjoyhint/enjoyhint.css" rel="stylesheet"/>
EnjoyHint初始化
要初始化一个新的EnjoyHint实例,您可以编写:
var enjoyhint_instance = new EnjoyHint({});
现在,您可以描述您的第一个提示:
var enjoyhint_script_steps = [{
/*hint code goes here*/
}];
或者,如果您想创建一系列提示:
var enjoyhint_script_steps = [{
/*first hint code*/
}, {
/*second hint code*/
}];
下一步是将提示的描述设置为实例配置:
enjoyhint_instance.set(enjoyhint_script_steps);
一切准备就绪,我们现在可以运行脚本:
enjoyhint_instance.run();
提示定义
作为我们的第一个示例,让我们添加一个新提示来描述“选项”按钮的用途:
'click .btn' : 'This button allows you to switch between the search results'
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
结果如下所示:
click
是将运行下一个提示的事件。 在我们的案例中,事件是单击按钮。 .btn
是我们要突出显示的元素的选择器(在我们的示例中是btn
类的“选项”按钮)。 然后,在冒号之后,我们应该定义提示的文本。
由于脚本中只有一个提示,因此当我们单击“选项”按钮或“跳过”按钮时,该提示将消失。 默认情况下会显示“跳过”按钮。 EnjoyHint允许您为其内置元素应用自己CSS类和名称,如果您想描述页面的单个元素,则可能会有所帮助。
您可以使用skipButton
属性更改按钮的标签:
'click .btn' : /*hint text*/,
'skipButton' : {className: "mySkip", text: "Got It!"}
此代码还向其中添加了mySkip
CSS类。 例如,使用以下CSS代码:
.mySkip {
color: white;
border-color: white;
}
您可以得到以下结果:
您甚至可以通过指定showSkip: false
来删除“跳过”按钮。
现在您知道了如何创建单个提示,是时候创建几个提示了。 他们将一个接一个地创建指南。
提示序列
为了开始创建提示序列,我们应该从头开始重写所有提示定义代码。
提示一个。 “下一个”事件
第一个提示将指定如下:
'next .navbar-brand' : /*hint text*/
这次我使用了next
事件,结果如下:
如您所见,我们的网站标题现已突出显示。 现在,我们有两个按钮。 下一步按钮将运行下一个提示,而跳过一个将中止脚本。 您可以以与上一个示例中的“跳过”按钮相同的方式来更改“下一步”按钮:
'nextButton' : {className: "myNext", text: "Sure"},
'skipButton' : {className: "mySkip", text: "Nope!"}
这些按钮现在看起来像这样:
提示二。 “关键”事件
下一个提示将告诉用户如何使用搜索字段。 为此,我们将使用key
事件。 在按下某个键后,它将运行下一个提示:
'key #mySearch' : /*hint text*/,
'keyCode' : 13
请注意,这次我们使用ID作为选择器。 keyCode
属性定义触发下一个提示的按钮的代码。 在这种情况下,它等于Enter按钮。
让我们检查一下它的外观:
单击“输入”按钮后,将调用下一个提示。
提示三和四。 改变形状
在第三步中,我们将为选项按钮使用先前定义的提示(有关详细信息,请参见“提示定义”部分):
'click .btn' : /*hint definition*/
当您单击此按钮时,第四个提示将运行。 现在,我们将使用shape
属性更改默认的突出显示形状:
'next .about' : /*hint definition*/,
'shape': 'circle'
此代码将突出显示“关于”部分,如下所示:
最后一步
如果默认圆的大小不足以容纳您,则可以使用radius
属性更改其大小。 现在,我们将使用此功能创建最后的提示。 由于这是指南的最后一步,因此我们不再需要“跳过”按钮,可以使用showSkip
属性将其禁用。
因此,这是我的最终提示代码:
'next .contact' : 'Your feedback will be appreciated',
'shape': 'circle',
'radius': 70,
'showSkip' : false,
'nextButton' : {className: "myNext", text: "Got it!"}
结果:
如您所见,这次突出显示区域的半径更大。
回呼
我要讨论的最后一个功能是执行回调函数的可能性。 EnjoyHint为您提供onStart
和onEnd
属性以运行回调。 第一个在第一个提示开始之前执行,第二个在最后一个提示完成之后执行。 以下是使用示例:
var enjoyhint_instance = new EnjoyHint({
onStart: function () {
// runs before the first hint
},
onEnd: function () {
// runs after the last hint
}
});
还有另一个属性可以运行称为onBeforeStart
的回调。 在确定提示开始之前触发此事件:
var enjoyhint_script_steps = [{
/* hint description */
onBeforeStart: function () {
// runs before the hint
}
}];
结论
EnjoyHint允许您通过向网站逐步添加提示来创建分步指南。 该工具为您提供了其他有用的功能,例如自定义事件创建。 您可以在提示的描述中使用HTML,这使您可以根据需要更改其外观。
如果您想查看源代码, 可以访问此GitHub页面 。 这是演示页面 。
翻译自: https://www.sitepoint.com/hints-creation-with-enjoyhint/
类似enjoyhint